Question

I have a button on my form. When I click that button I first ajaxpost to a webpage on the server, take inner html of the specified div and finally append that html to another div that will present a jqueryui dialog. Here’s the code:

$('#window').html(content).
dialog({
    title: title,
    show: 'drop',
    hide: 'drop',
    width: 400,
    buttons: buttons,
    position: { my: 'center', at: 'center', of: window }
}
);

And here’s the inner html of the div on the posted page:

  <div id="cardOrder" class="cardOrder-div">
        <form runat="server" id="frmAjax" >
        <table class="cardOrder-tbl">
        ......
        </form>
  </div>

I have a problem with Chrome and Opera. When I click the button for the first time and show the jqueryui dialog with the above html content, the “form” tag is missing. But the next times when I present the dialog the form tag gets added. And if there’s no form tag I cannot submit. Firefox and IE lack this problem. The form tag gets added right from the first dialog show.

EDIT: When I debug the code to see if the html content returned from the ajax response contains the form tag I can see it there. But when the content is added to the div it somehow disappears.

Answer 1

I believe by default the jquery dialog box gets added to the end of the body tag, and therefore, any controls you have in the dialog box are not part of the form, and will not get posted you might need to add something like this

$('#DIALOGID').dialog({
        open:function(event, ui){
            $(this).parent().appendTo('form');
        }
    });
    $('#DIALOGID').dialog('open');

this will append the dialog HTML to the end of the form tag, and controls within the dialog can then be accessed in code behind,

Also, I don’t believe you can have more than 1 Form tag within a page.

Unless this answer is completely unhelpful