jQuery modal form dialog postback problems - asp.net

Question

I've created a jQuery UI Modal form, and I want that form to trigger a postback, but I'm having difficulty getting it to work.
I know there are quite a few articles based on using the SimpleModal plugin, and I have tried to adapt these and override the _doPostback function, but with no joy.
I think the problem is within the call to my __doPostBack function and what the parameters should be. Is that the case?
Here's my form
<form id="summaryForm" runat="server">
<div id="dialog" title="Quick Booking">
<p>Select user from list or enter name in box</p>
<fieldset>
<p><label>Is machine going out of the office?</label></p>
<asp:RadioButton TextAlign="Left" GroupName="outOfOffice" Text="Yes" ID="optYes" class="radio" runat="server" />
<asp:RadioButton TextAlign="Left" GroupName="outOfOffice" Text="No" ID="optNo" class="radio" runat="server" Checked="true" />
<label for="dropLstUser">User:</label>
<asp:DropDownList ID="dropLstUser" runat="server" />
<input type="text" name="txtUser" id="txtUser" value="" class="text" />
<label for="txtStartDate">Start Date:</label>
<input type="text" id="txtStartDate" name="txtStartDate" class="datepicker" />
<asp:HiddenField ID="assetField" runat="server" />
<%--<button onclick="performPostBack('summaryForm')">Postback</button>--%>
</fieldset>
</div>
//--------------------------------
Here is the JavaScript code:
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
bgiframe: true,
height: 300,
modal: true,
buttons: {
'Close': function() {
alert("closing");
$(this).dialog("close");
__doPostBack = newDoPostBack;
__doPostBack("aspnetForm",null);
}
}
});
});
function newDoPostBack(eventTarget, eventArgument)
{
alert("postingback");
var theForm = document.forms[0];
if (!theForm)
{
theForm = document.aspnetForm;
}
if (!theForm.onsubmit || (theForm.onsubmit() != false))
{
document.getElementById("__EVENTTARGET").value = eventTarget;
document.getElementById("__EVENTARGUMENT").value = eventArgument;
theForm.submit();
}
}
</script>

Answer 1

After creating your dialog simply move the dialog back into your form. Example:
$("#divSaveAs").dialog({bgiframe:false,
autoOpen:false,
title:"Save As",
modal:true});
$("#divSaveAs").parent().appendTo($("form:first"));
This worked for me. Postback works find.

Answer 2

Be aware that there is an additional setting in jQuery UI v1.10. There is an appendTo setting that has been added, to address the ASP.NET workaround you're using to re-add the element to the form.
Try:
$("#dialog").dialog({ autoOpen: false, height: 280, width: 440, modal: true, appendTo:"form" });

Answer 3

"AppendTo" option works to me.
$("#dialog").dialog({ ..., appendTo:"form" });
See: http://api.jqueryui.com/dialog/#option-appendTo

Answer 4

Many thanks for the post of csharpdev!
The following code did it for my page:
$("#photouploadbox").dialog({
autoOpen: false,
modal: true,
buttons: { "Ok": function() { $(this).dialog("close"); } },
draggable: false,
minWidth: 400 });
$("#photouploadbox").parent().appendTo($("form#profilform"));

Answer 5

One cheeky hack I have used is to create a normal .NET button along with textboxes, etc. within a div on the page, using jQuery get the HTML for that div, add it to the dialog, and then remove the HTML within the original div to avoid id duplication.
<div id="someDiv" style="display: none">
<p>A standard set of .net controls</p>
<asp:TextBox ID="textBoxl" runat="server" CssClass="required email"></asp:TextBox>
<input id="button1" type="button" value="Confirm" onclick="SomeEvent();" />
</div>
And the script:
var html = $("#someDiv").html();
$("#dialog").append(html);
$("#someDiv").remove();
$("#dialog").dialog({
bgiframe: true,
height: 300,
modal: true
});

Answer 6

I managed to solve the problem - probably not the best way but here's what I did.
The dialog wouldn't postback because jQuery UI takes the submit button out of the form and appends it to the bottom of the body tag, so when you try to postback the button it doesn't know what it's posting.
I got round this by modifying the jQuery UI code by changing this:
uiDialog = (this.uiDialog = $('<div/>'))
.appendTo(document.body)
.hide()
.addClass(
'ui-dialog ' +
'ui-widget ' +
'ui-widget-content ' +
'ui-corner-all ' +
options.dialogClass
)
To this:
uiDialog = (this.uiDialog = $('<div/>'))
.appendTo(document.forms[0])
.hide()
.addClass(
'ui-dialog ' +
'ui-widget ' +
'ui-widget-content ' +
'ui-corner-all ' +
options.dialogClass
)
It is not ideal to modify the source library, but it's better than nothing.

Answer 7

It works as expected when I used
$("#divDlg").dialog("destroy");
instead of
$("#divDlg").dialog("close").appendTo($("#Form1")).hide();
When we append to the Form and reopen the dialog, I had issues with layouts and z-index.

Answer 8

'Close': function() {
alert("closing");
$(this).dialog("close");
__doPostBack = newDoPostBack;
__doPostBack("aspnetForm", null);
}}});});
The __doPostBack function takes the control which is causes the postback and an argument if required. Your JavaScript examples and your markup do not seem to match up. For example, where I have quoted above, you reference aspnetForm, change this to the ID of the form and try again.
Make sure that the ID you use for client script is the same as the client ID of the ASP.NET control at runtime. If a control resides in a INamingContainer then it will have a unique id based on its parent container, so YourControlID will become YourINaminContainerID_YourControlID.
Let us know the outcome.

Answer 9

I can get this working if I have one of each. One div, one script, and one link. In my case, the dialog is allowing the user to leave a "note" per database record. I don't have any buttons on my dialog, just the default upper right "x" to close the dialog.
But I'm trying to get this to work within a ColdFusion query loop.. Multiple records, with each having their own dialog button, associated script, and div. I'm changing the IDs dynamically so they're all unique (that is, appending a _XX where XX is primary key of record to all the ids).
When I expand to this model, having multiple dialogs, scripts, divs.. If I open each dialog to edit the corresponding "note" for that record, it will only save the LAST one. Should I be doing the .parent().appendTo on a button click vs. automatically? Somewhere it's getting confused.
If I don't open any dialog (don't make any changes via dialog) and run a dump on the form results, I see all dialog fields coming through on the post as expected.
When I look at the raw HTML produced... All the IDs are unique and are called appropriately. I was thinking I was getting collision on a conflicting name/id somewhere, but it all looks good on that front.
My script:
<script type="text/javascript">
// Increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "##dialog#getALLFacilityEquipOrders.order_id#" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode",
width: 500,
resizable: false
});
$('.countable2').jqEasyCounter({
'maxChars': 2000,
});
// Dialog Link
$('##dialog_link#getALLFacilityEquipOrders.order_id#').click(function(){
$('##dialog#getALLFacilityEquipOrders.order_id#').dialog('open');
return false;
});
//hover states on the static widgets
$('##dialog_link#getALLFacilityEquipOrders.order_id#, ul##icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
$("##dialog#getALLFacilityEquipOrders.order_id#").parent().appendTo($("form##allequipedit"));
});
</script>
My div:
<div id="dialog#getALLFacilityEquipOrders.order_id#"
title="Notes For #getALLFacilityEquipOrders.cLicenseNumber# - Order ID: ORD-#getALLFacilityEquipOrders.order_id#"
style="display:none;">
<cfquery datasource="#a_dsn#" name="getOrderNotes">
select notebody
from QIP_EquipOrders_Notes
where fk_order_id = #getALLFacilityEquipOrders.order_id#
</cfquery>
<fieldset class="qip_menu">
<label><b>Enter/Edit Notes:</b></label>
<textarea class="countable2"
id="notebody_#getALLFacilityEquipOrders.order_id#"
name="notebody_#getALLFacilityEquipOrders.order_id#"
rows="10"
cols="75">#getOrderNotes.notebody#</textarea>
</fieldset>
</div>
My button:
<a href="##"
id="dialog_link#getALLFacilityEquipOrders.order_id#"
class="ui-state-default ui-corner-all"
><span class="ui-icon ui-icon-newwin"></span>Notes</a>

Answer 10

To remove the animation glitch while appending dialog to form, below is the strategy.
open: function (event, ui) {
var dg = $(this).parent();
setTimeout(function () { dg.appendTo("form"); }, 1000);
});