Issues with jQuery Dialog Widget


I have been working with this jQuery Dialog widget for few days and just this morning got stuck into some weird issues. It look very long time to solve and thus I thought I can share those experience with you guys:

My problem was, I wanted to have a jQuery modal dialog form in my aspx page which will help me add some data. So, I took the first step by going to jQuery site and grabbing the source for jQuery modal form with css and javascript given in their site.

http://jqueryui.com/dialog/#modal-form

Now, first thing you’ll notice that their code has a form tag inside the dialog div, which surely you don’t want since you already have a form tag. So, I have removed it.

When I tried the code first the dialog opened after click of a button but no… the page posted back suddenly!

so, when you click the button to open your jquery modal dialog form, the page posted back right after opening the form. It’s because they have used a button inside their code!

<button id=”create-user”>Create new user</button>

//JavaScript

$(“#create-user”)
.button()
.click(function () {
$(“#mydialog”).dialog(“open”);
});

They have failed to notice that if this is used in ASPX page then the page will post back. There is few solution, one of which is to add a ‘return false;’ in the above function, like:

$(“#create-user”)
.button()
.click(function () {
$(“#mydialog”).dialog(“open”);
return false;
});

Or, you can change the button to a input type button, i.e. simple HTML button.

First problem solved.

Next one came right after: I wanted to submit the modal form but it was not working. No matter what I do my jquery modal form is not getting submitted. I have added a ASPX button which is also not getting posted back. I have added a HTML input type submit which has cause similar output.

So, I have tried to post the form back in the following way:

//Try 1

$(“#myForm”).submit();

//try 2

document.getElementById(“myForm”).submit();

//try 3

$(“form:first”).submit();

//try 4

$(“form[name=’myForm’]”).submit();

Aha! Now the form is getting submitted but … not the values! In my modal jquery form I have few ASPX fields like textbox, check box, hidden element all of whose values are showing as blank string in the PostBack.

This was really a nightmare to me. I had no clue why this is not getting posted back. After googling a lot I came around a solution which  told me the cause: “When you use jQuery UI’s Dialog plugin to bring up a div as a dialog, it usually pulls the div out of the form to do this and then ASP.Net elements don’t work” says Ken (http://www.keysolutions.com/blogs/kenyee.nsf/d6plinks/KKYE-7XPVS6)

Then I have tried the solution he gave, i.e. to append the dialog to the form through JavaScript.

//Either you need to call this

$(“#mydialog”).parent().appendTo($(“#myForm”));

//Or you can have it in the dialog.open method

$(“#mydialog”).dialog({
bgiframe: true,
autoOpen: false,
height: 400,
width: 350,
modal: true,

open: function (type, data) {
$(this).parent().appendTo($(“#myForm”));
},
close: function () {
allFields.val(“”).removeClass(“ui-state-error”);
}
});

Note: Watch out for the following function:

close: function () {
allFields.val(“”).removeClass(“ui-state-error”);
}

If you call the close function before submit then you’ll not see any values in the post back because they will get wiped up when allFields.val(“”) is called. So, you need be wise when calling this close method.

when I have tried this my jquery modal form was showing up properly and I was also able to submit it with values. But unfortunately I came to another bummer!

Strangely my jquery dialog form was opening up but it was getting show under the overlay. Yes, you read it correct. The dialog was opening beneath the masked overlay. So, there was no way to control it with normal jQuery dialog. You just have to use tab to navigate through elements and submit. TAB, ESC keys were working but not the mouse controller!

I clearly understood that the issue is with the CSS z-index property. Somehow, my jquery modal form’s z-index was lower than the masked overlay and I have to increase the z-index to bring it to front.

So I have added  a inline CSS to my DIV containing the dialog like below:

<div id=”mydialog” title=”My Dialog” style=”z-index: 99999″>

But, this didn’t work. I have used IE developer tools and found that the parent of this dialog is still not having a greater z-index. So I have used the following and it did work. I had to change the open function for the dialog:

$(“#mydialog”).dialog({

bgiframe: true,

autoOpen: false,

height: 400,

width: 350,

modal: true,

open: function (type, data) {

$(this).parent().appendTo($(“#myForm”));

$(this).parent().css(‘z-index’, ‘999999’); //Increase the z-index here

},

close: function () {

allFields.val(“”).removeClass(“ui-state-error”);

}

});

Hopefully this post will help someone in need and save some time 🙂

<div id=”mydialog” title=”Create a new Role” style=”z-index: 99999″>

Advertisements

One thought on “Issues with jQuery Dialog Widget

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s