$("#dialog").parent().appendTo($("form:first"));

Question

I'm opening a few jQuery dialogs on my page and I was using:

$("#dialog2").parent().appendTo($("form:first")); //This was working, no problem.

I noticed when I applied it again to dialog3 it has stopped that line from working on dialog 2. How can this be used for different dialogs?

$("#dialog2").dialog({
    bgiframe: false,
    autoOpen: false,
    height: 410,
    width: 800,
    modal: true,
    draggable: true,
    resizable: true
});

$("#dialog2").parent().appendTo($("form:first")); //doesn't work now

$("#dialog3").dialog({
    bgiframe: false,
    autoOpen: false,
    height: 410,
    width: 600,
    modal: true,
    draggable: true,
    resizable: true
});

$("#dialog3").parent().appendTo($("form:first"));

HTML:

<div id="dialog3" title="Attachments">
    <p id="P1">
        <asp:Button ID="btnAttach" runat="server" Text="Attach files" class="float-left ui-button"/></p>
    <fieldset>

    </fieldset>
</div>


<div id="dialog2" title="Notes">
    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/icons/user_comment.png" />
    <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="Larger" Text="Notes"></asp:Label>
    <br />
    &nbsp;
    <div style="overflow: auto; height: 310px; width: 780px;">
        <fieldset>
            <br />
            <asp:TextBox ID="txtNote" runat="server" CssClass="notetext" Width="740px" Rows="6"
                TextMode="MultiLine" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" />
            <br />
            &nbsp;
            <div style="width: 743px">
                <asp:Button ID="btnNoteSave" runat="server" Text="Save" class="float-right ui-button" />
            </div>
        </fieldset>
    </div>

Solution 1

Better one-

$('#dialog2').dialog({
      open:function(){{
         $(this).parent().appendTo($("form:first"));
      }}
});

$('#dialog3').dialog({
      open:function(){{
         $(this).parent().appendTo($("form:first"));
     }}
});

Solution 2

Ok, I now appear to have both buttons working i.e. going through the code behind both buttons. I put the "appendTo" calls in the functions that open the dialogs...

        $('#edit-notes').click(function() {
            $('#dialog2').dialog('open');
            $("#dialog2").parent().appendTo($("form:first"))
            return false;
        });

        $('#attachments').click(function() {
            $('#dialog3').dialog('open');
            $("#dialog3").parent().appendTo($("form:first"))
            return false;
        });

Comments

[Jeff Sternal]

I can't reproduce this - my stripped-down version works fine. (I basically removed the ASP.NET control declarations and went vanilla html.) When you say "it has stopped that line from working on dialog 2," what is the exact symptom? Do you get an error in Firebug/Fiddler?

[thegunner]

What is happening is: Both jquery dialog boxes appear. If I just put $("#dialog2").parent().appendTo($("form:first")); then the button on dialog2 will click and run through the method behind it- great. If I add $("#dialog3").parent().appendTo($("form:first")); then the button on dialog3 will click and run through the method behind it, but then when I call up dialog2 it's button will not run through the method behind it. I've tried putting: $("#dialog3").parent().appendTo($("form:second")); ...as a guess but that doesn't work either!