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

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>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Better one-

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

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

Method 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;
        });

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0