I am using Eric Martin's SimpleModal plugin 1.4.1 with JQuery 1.4.2 to display basic form in a modal window.
The form has 2 JQuery UI Datpicker elements.
Everything works as intended (I think). The Datepickers display their calendars when the user gives focus the the Datepicker textboxes. When the开发者_开发问答 user clicks the Cancel button, the modal disappears and the values held in the Datepicker elements are hidden. Here is where the problem lies.
I need the modal window to "forget" all the form values it contains whenever the window is closed either because the form was submitted or the cancel button was clicked, not just hide them. I don't mind if I have to do this programmatically if necessary.
My current SimpleModal code looks like this:
$('#NewDeliverable').click( function() {
$("#DeliverableFormContainer").modal({onOpen: function (dialog) {
dialog.overlay.fadeIn('slow', function () {
dialog.data.hide();
dialog.container.fadeIn('slow', function () {
dialog.data.slideDown('slow');
});
});
EDIT Thanks to @Josiah Ruddell for his help. Here is the complete working code for anyone else with this issue:
$('#NewDeliverable').click( function()
{
$("#DeliverableFormContainer").modal({
onOpen: function (dialog)
{
dialog.overlay.fadeIn('slow', function ()
{
dialog.data.hide();
dialog.container.fadeIn('slow', function ()
{
dialog.data.slideDown('slow');
});
});
},
onClose: function(dialog)
{
dialog.data.find(':input').each(function ()
{
switch (this.type)
{
case 'password':
$(this).val('');
break;
case 'select-multiple':
case 'select-one':
$(this).val(-1);
break;
case 'text':
case 'textarea':
$(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
$.modal.close(); // must call this!
}, persist: true
});
});
}});
});
Add an onclose callback that clears out the modal data. You could easily make this a jquery plugin called clear form.
$("#DeliverableFormContainer").modal({
persist: true, // don't clone the data
onOpen: function (){ /* code */ },
onClose: function(dialog){
dialog.data.find(':input').each(function () {
if(this.type.match(/password|text|textarea/))
$(this).val('');
else if(this.type.match(/select\-multiple|select\-one/))
$(this).val('-1');
else if(this.type.match(/checkbox|radio/))
this.checked = false;
});
$.modal.close(); // must call this!
}
});
精彩评论