function beforeShow doesn't work on a inline datepicker.How to add a additional button on the panel?
beforeShow: function(input) {
setTimeout(function() {
var buttonPane = $(input).datepicker("widget").find( ".ui-datepicker-buttonpane" );
var btn = $('<button class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" type="button">Clear</button>');
btn.unbind("click").bind("click", function () {
$.datepicker._clearDate( input );
});
btn.appendTo( buttonPane );
}, 1 );
} ,
Thanks for any answer.
You can find an example here.. I hope is useful for your case
http://csharptechies.blogspot.ca/2010/12/adding-custom-buttons-to-jquery.html
Also you can do That....
in you datepicker declaration:
jQuery("#to").datepicker({
dateFormat: 'yy-mm-dd',
inline: true,
changeMonth: true,
showButtonPanel: true,
numberOfMonths: 2,
minDate: -20,
beforeShow: buttonClear,
/* Function button Clear */
function buttonClear( input ) {
setTimeout(function() {
var buttonPane = jQuery( input )
.datepicker( "widget" )
.find( ".ui-datepicker-buttonpane" );
jQuery( "<button>", {
text: "Clear",
class: "ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all",
click: function() {
jQuery.datepicker._clearDate( input );
}
}).appendTo( buttonPane );
}, 1 );
}
Regards
Related
$("#accordion").accordion({
icons: icons,
collapsible: true,
heightStyle: "content",
active: false,
header: "> div > h3",
activate: function (event, ui) {
setTimeout(function(){
item(ui);
},100);
}
}).sortable({
axis: "y",
handle: "h3",
stop: function (event, ui) {
ui.item.children("h3").triggerHandler("focusout");
$(this).accordion("refresh");
}
});
function item(ui){
var active = $('#accordion').accordion( "option", "active" );
var activeid = $('.ui-accordion-header-active').attr('id');
ithtml = '';
$.post('sample.php',function(data){
$.each(data, function( index, value){
var dividit = value.ItemID;
var cls = (value.IsVeg==0) ? 'green' : 'red';
var bord = (value.IsVeg==0) ? 'green_border' : 'red_border';
ithtml += 'some html content';
$(ui.newPanel).find(".normal_add__box").remove().end().append(ithtml);
},'json');
}
$('#dialog').dialog({
autoOpen: false,
buttons: [{
text: "Submit",
type:"submit",
id:"Btn"
}]
});
I want to know where to append the function item(ui) to active panel when i clicked a button(where the button is in dialog with id Btn) what i mean is the dialog will open when class .normal_add_box is clicked and when i click submit the function item(ui) must be used and append data to active accordion panel from where the dialog is opened.
I use .data like this to pass the id of the textbox that calls the dialog
$("#<%=txtDirProprio.ClientID%>").focus(function()
{
$("#<%=dialog.ClientID%>").dialog( "open" ).data("id","#<%=txtDirProprio.ClientID%>");
return false;
});
here is the code for the dialog
$("#<%=dialog.ClientID%>").dialog({
autoOpen: false,
show: "blind",
hide: "explode",
width: 800,
height:200,
modal: true,
buttons:
{
"Ajouter": function() {
$( this ).dialog( "close" );
StringBuilderDir($( this ).data("id"));
},
"Vider": function() {
$( this ).dialog( "close" );
$( $( this ).data("id") ).val("")
},
"Canceler": function() {
$( this ).dialog( "close" );
}
},
open: function()
{
var dir = $( $( this ).data("id") ).val().split("-");
if(dir[0] != "")
{
$("#<%=dd_dialog_directionvp.ClientID%> option").each(function(index)
{
if ($("#<%=dd_dialog_directionvp.ClientID()%> option")[index].text == dir[0])
{
$("#<%=dd_dialog_directionvp.ClientID()%> option")[index].selected = true;
}
})
}
}
});
So $ ( this ).data("id") returns the id of the textbox. It works fine except in the open function. The id is undefined
Why it works in the functions for the buttons but not in the open function. It looks like it's not the same 'this'
Thank you
$("#<%=txtDirProprio.ClientID%>").focus(function()
{
$("#<%=dialog.ClientID%>").data("id","#<%=txtDirProprio.ClientID%>").dialog( "open" );
return false;
});
Have to set the data first before calling .dialog('open');
I have a JQuery dialog that has two textboxes associated with Jquery date pickers, which are used to accept a date range.
I have added a custom button to the Jquery datepicker, called "Save". Problem is, when I click the button, the function associated with it executes, but the calendar remains open. I have to click on an area outside the datepicker to make the calendar close.
How do I fix this? This is seen only with IE. Works fine with FF.
var startDateTextBox = $('#StartDate');
var endDateTextBox = $('#EndDate');
This is my custom function:
function addSaveButton(textBoxObject)
{
//These variables can be ignored. Used to set limits for the other datepicker
var idTextBox = textBoxObject.attr('id');
var otherTextBoxObject = idTextBox == "StartDate" ? endDateTextBox : startDateTextBox;
var optionName = idTextBox == "StartDate" ? "minDate" : "maxDate";
setTimeout(function ()
{
var buttonPane = textBoxObject
.datepicker("widget")
.find(".ui-datepicker-buttonpane");
$("<button>", {
text: "Save",
click: function ()
{
//Get the date
var dateToBeSet = getDateToSet(idTextBox);
//Set the date
textBoxObject.datepicker('setDate', dateToBeSet);
//Set the limits for the other date picker
otherTextBoxObject.datepicker("option", optionName, dateToBeSet);
//Hide this datepicker
textBoxObject.datepicker("hide");
//Remove focus
textBoxObject.blur();
}
}).appendTo(buttonPane).addClass(".ui-datepicker-buttonpane ui-state-default ui-priority-primary ui-corner-all");
}, 1);
}
This is my datepicker code For one of the textboxes:
startDateTextBox.datepicker({
autoSize: true,
closeText: "OK",
showButtonPanel: true,
constrainInput: true,
showWeek: true,
maxDate: "+0",
dateFormat: 'd MM yy',
changeMonth: true,
changeYear: true,
beforeShow: function (input, inst)
{
addSaveButton(startDateTextBox);
},
onChangeMonthYear: function (year, month, inst)
{
addSaveButton(startDateTextBox);
},
onSelect: function (dateText, inst)
{
//Set the limits for the other date picker
instance = startDateTextBox.data("datepicker");
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
dateText,
instance.settings);
endDateTextBox.datepicker("option", "minDate", date);
},
onClose: function (dateText, inst)
{
//Remove focus
startDateTextBox.blur();
}
});
I updated the function addSaveButton(textBoxObject) and added code to briefly disable the input textbox associated wth the datapicker and it worked.
function addSaveButton(textBoxObject)
{
...
setTimeout(function ()
{
var buttonPane = textBoxObject
.datepicker("widget")
.find(".ui-datepicker-buttonpane");
$("<button>", {
text: "Save",
click: function ()
{
.
.
.
//Remove focus
textBoxObject.blur();
//Disable textbox
textBoxObject.attr("disabled", "disabled");
setTimeout(function ()
{
// Removed the 'disabled' attribute after 1 millisecond
textBoxObject.removeAttr("disabled");
}, 1);
}
}).appendTo(buttonPane).addClass(".ui-datepicker-buttonpane ui-state-default ui-priority-primary ui-corner-all");
}, 1);
}
jquery-ui dialog window in javascript:
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Ok": function() {
$( this ).dialog( "close" );
},
"Cancel": function() {
$( this ).dialog( "close" );
}
}
});
There two buttons "Ok" and "Cancel". On each button there function. Buttons names fastened hardly. There some ways to named buttons from variable?? like this:
var Button1 = "Ok";
var Button2 = "Cancel";
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
Button1: function() {
$( this ).dialog( "close" );
},
Button2: function() {
$( this ).dialog( "close" );
}
}
});
I try code above but buttons appear with names "Button1" and "Button2".
Can I also display images in buttons but not text???
Referring to http://jqueryui.com/demos/dialog/ you can see there are 2 alternate ways of defining the buttons, one is what you are using here, the second is using arrays.
var button1 = 'Ok';
var button2 = 'Not Ok';
$( ".selector" ).dialog({ buttons: [
{
text: button1,
click: function() { $(this).dialog("close"); }
},
{
text: button2,
click: function() { $(this).dialog('close'); }
}
] });
It looks like this must solve your problem.
Does anyone know how to create a jQuery Dialog in a function? I can't find an attribute to set the message... In every example I found, the dialog has been statically written into the code in a div-tag. However, I want to create it dinamically, so I need to know how to create a dialog in a function.
It is no problem to set the title:
<script>
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$( "#opener" ).click(function() {
//$( "#dialog" ).dialog( "open" );
$( this ).dialog({ title: 'Please confirm deletion!' });
return false;
});
});
</script>
</head>
<body>
I have the documentation and some examples here.
Thanks for helping out guys.
Cheers,
doonot
============================= [SOLUTION]=====================================
Thanks for all who answered this questions. This is how i wanted it:
function createDialog(title, text) {
return $("<div class='dialog' title='" + title + "'><p>" + text + "</p></div>")
.dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Confirm": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
}
And it can be called for example like this (clicking on an image):
<img src="delete.png" onClick="createDialog('Confirm deletion!', 'Do you really want to delete this package?')">
function createDialog(title, text, options) {
return $("<div class='dialog' title='" + title + "'><p>" + text + "</p></div>")
.dialog(options);
}
Here is a simple example:
function openDialog(message) {
if ($('#dialog').length == 0) {
$(document.body).append('<div id="dialog">'+message+'</div>');
} else {
$('#dialog').html(message);
}
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$( "#dialog" ).dialog("open");
}
I used this with additionally jQuery tmpl plugin.
var confirmTemplate = jQuery.template("<div class='dialog' title='${title}'><p>${text}</p></div>");
function showDialog(options) {
if (options && options.data && options.dialog) {
var dialogOptions = jQuery.extend({}, { modal: true, resizable: false, draggable: false }, options.dialog);
return jQuery.tmpl(confirmTemplate, options.data).dialog(dialogOptions);
}
}
function hideDialog (item) {
if (!item.jQuery) item = $(item);
item.dialog("close").dialog("destroy").remove();
}
usage:
showDialog({
data: {
title: "My Title",
text: "my Text"
}
dialog: {
myDialog: "options"
}
});