jQuery ui dialog boxes not draggable and resizable after appendTo?

Question

I am implementing sticky notes using jquery ui dialog boxes. On a button click a big full screen ui dialog box is opened and inside that big dialog box is a button to add small dialog boxes (notes).

HTML:

<body>

  <button id="opener">open the dialog</button>

  <div id="outter-dialog" title="Notes">
    <button id = "add-note">Add Note</button>
  </div>

JS:

$( "#outter-dialog" ).dialog({
        autoOpen: false,
        title: "Success Message",
        width: $(window).width(),
        height: $(window).height(),
        modal: false,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

$("#opener").click(function(){
    $( "#outter-dialog" ).dialog('open');
});


var prevelement;
$("#add-note").click(function () {
    var dynamicDialog = $('<div id="MyDialog"> <textarea>Hello</textarea> </div>');
    var pos;
    if (prevelement) {
        pos = {
            my: "left",
            at: "bottom",
            of: prevelement
        }
    }

    dynamicDialog.dialog({
        title: "Note",
        modal: false,
    appendTo: "#outter-dialog",
        buttons: [{
            text: "Save",
            click: function () {}
        }],
        position: pos
    });
    prevelement = dynamicDialog
});

Now I have an issue when I add appendTo: "#outter-dialog" to my dynamic small dialog boxes (notes):

after appending them to outter dialog box they are no longer resizable and draggable.

I appended them to outter dilaog box so that on open/close of outter dialog box inner notes are shown/hidden.

Any idea why they are not draggable and resizable??

you have to delegate the event for dynamically generated html see here http://stackoverflow.com/questions/22960144/jquery-draggable-not-working-for-appended-table-row — Kartikeya Khosla, Sep 15 '14 at 05:44
@Kartikeya: I tried `$( "#outter-dialog" ).on( "mouseover", ".MyDialog", function( event ) { var elem = $( this ); alert(elem.text()); elem.dialog("option", "resizable", true); }); ` . But still it's not resizable. Any idea?? — Siddharth Trikha, Sep 15 '14 at 09:03

Chamika Sandamal · Accepted Answer · 2014-09-17T09:32:57.410

8

Here is the way you can overcome the issue, Demo Just set the dragable and resizable to false and call them separately once you create the dialog. and remember to clone the dynamic element and use dynamic id for that element

var elementCount = 0;
$("#add-note").click(function () {
    var dynamicDialog = $('<div> <textarea>Hello</textarea> </div>');
    var pos = {
        my: "left",
        at: "bottom",
        of: "#dialog" + elementCount
    }

    var dialogId = "dialog" + elementCount;
    dynamicDialog.clone(true).attr("id", dialogId).dialog({
        title: "Note",
        modal: false,
        appendTo: "#outter-dialog",
        draggable: false,
        resizable: false,
        buttons: [{
            text: "Save",
            click: function () {}
        }],
        position: pos
    });
    $("#" + dialogId).parent().draggable().resizable();
    elementCount++;
});

edited Sep 17 '14 at 09:32

answered Sep 16 '14 at 09:15

Chamika Sandamal

23,565
5
63
86

`appendTo` does not work as it was added in version 1.10 – Siddharth Trikha Sep 16 '14 at 09:24
`appendTo` of dialog box, I meant. – Siddharth Trikha Sep 16 '14 at 10:06
Sorry for the confusion. Updated the working answer for you :) – Chamika Sandamal Sep 17 '14 at 06:42
Above answer works but now positioning of new notes is not side by side, they are `bottom`. After trying `top` too new notes don't move side by side. Any idea? – Siddharth Trikha Sep 17 '14 at 09:00
They are one below the other. I meant one besides the other – Siddharth Trikha Sep 17 '14 at 10:06
Is ther a way to position a new note in the next row when a new note created reaches screen width?? So like after 3 notes creation a scroll comes as 4th note is positioned on right side of the 3rd. – Siddharth Trikha Oct 01 '14 at 06:52

score -2 · Answer 2 · answered Sep 16 '14 at 11:05

$( "#outter-dialog" ).dialog({
autoOpen: false,
title: "Success Message",
width: $(window).width(),
height: $(window).height(),
modal: false,
resizable: true,
draggable: true,
buttons: {
        Cancel: function() {
         $(this).dialog('close');
        }
    }
});

jQuery ui dialog boxes not draggable and resizable after appendTo?

2 Answers2