Clever Geek Handbook

JQuery ui dialog boxes not dragging or resizing after appendTo?

I am using sticky notes using jquery ui dialog boxes. When the button is clicked, a large full screen ui dialog opens and inside this large dialog there is a button to add small dialogs (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 a problem when I add appendTo: "#outter-dialog"

to my dynamic small dialog boxes (notes):

after adding them to the outter dialog, they are no longer resized or dragged .

I attached them to the outter dilaog box so that when the outter dialog is opened / closed, the inner notes are shown / hidden.

Any idea why they don't drag and drop and resize?

+3


source to share


2 answers


This is how you can overcome the problem, Demo Just install dragable

and resizable

on false

and call them separately as soon as you create a dialog. and don't forget to clone the dynamic element and use a 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++;
});
+7


source 


$( "#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');
        }
    }
});


-2


source






More articles:


All Articles