Need help with jQuery UI elements

shongale

I have 'datepicker' from UI elements working great on the Add new Record popup form. BUT I can't figure out how to add it to a DataTable date field for Updating. I added a 'checkbox' .editable function at the end of .makeEditable
[code]
$(document).ready( function () {
var id = -1;//simulation of id
$('#example').dataTable({ bJQueryUI: true
// lots and lots of code
}).makeEditable({
"aoColumns": [
// lots more field definition code
{
indicator: 'Changing Saturday...',
tooltip: 'Change Saturday...',
type: 'checkbox',
submit:'Save Saturday'
}
]
})
/**********************************************************************
* Custom input types for the jquery.jeditable plugin
* By Richard Davies
*********************************************************************/
// Create a custom input type for checkboxes
$.editable.addInputType("checkbox", {
element : function(settings, original) {
var input = $('');
$(this).append(input);

// Update 's value when clicked
$(input).click(function() {
var value = $(input).attr("checked") ? 'Yes' : 'No';
$(input).val(value);
});
return(input);
},
content : function(string, settings, original) {
var checked = string == "Yes" ? 1 : 0;
var input = $(':input:first', this);
$(input).attr("checked", checked);
var value = $(input).attr("checked") ? 'Yes' : 'No';
$(input).val(value);
}
});
[/code]
This works great and I am able to control the checkboxes.

I found some other code that does the same thing for the datepicker but can't figure out where to put it. Can someone please tell me how to extend the above and add new elements to it????

[code]
/* Create an inline datepicker which leverages the jQuery UI datepicker */
$.editable.addInputType('datepicker', {
element: function(settings, original) {
var input = $('');
input.datepicker({
onSelect: function(dateText, inst) {
$(this).parents("form").submit();
}
});

$(this).append(input);
return (input);
}
});
[/code]

Thanks in advance for any help. This is the last thing I need to know. This is an awesome plugin and It took about 15 hours to get this far but I am super pleased and any other tables later on will come quickly. It was worth the time and I don't say that very often. The authors can count on our payment coming soon. Awesome!!!

shongale

Come on!!!! Someone has to know how to do this?????

shongale

Wow!!!!! 2 days without a response. Should be a simple fix.

jcrawford

I am not using the makeEditable but had implemented that prior to going to full row editing inline. The only way I was able to get it to work was to attach it to a live event.

[code]
$('#promos a.edit').live('click', function (e) {
e.preventDefault();

$('#edit_promo_type').selectmenu({
speed: 400,
maxHeight: 400,
menuWidth: 250,
width: 250
});

$("#edit_start_time").datepicker({
dateFormat: "yy-mm-dd"
});

$("#edit_expiration_time").datepicker({
dateFormat: "yy-mm-dd"
});

$("#edit_close_date").datepicker({
dateFormat: "yy-mm-dd"
});
} );
[/code]

When my edit link is clicked the row is turned into input and select elements. I then attach date pickers to them like above.

Eric_DeCoff

Ok here is what I did to use jquery datepicker plugins ( Notice I use #pricing instead of #example)

[code]
$('#pricing').dataTable({
"aoColumnDefs": [ { "sClass": 'ui-datepicker-inline', "aTargets": [ 3,5 ] } ],
rest of your take setup here
});
[/code]

Next setup handling

[code]
// select everything when editing field in focus
$('#pricing tbody td input').live('focus', function (e){
$(this).select();
});

// attach datepicker on focus and format to return yy-mm-dd
$('#pricing tbody td.ui-datepicker-inline input').live('focus', function (e){
$(this).datepicker({ dateFormat: 'yy-mm-dd' }).datepicker("show");
});

// override normal blur function ( needed for date month switching )
$('#pricing tbody td input').live('blur', function (e){
return false;
});

// set change function to handle sumbit
$('#pricing tbody td.ui-datepicker-inline input').live('change', function (e){
$(this).parents("form").submit();
});

[/code]