Changing JavaScript into jQuery - createElement

Question

I'm trying to use the draggable and resizable jQuery function, but I may have to change a little bit of this code to jQuery.

I have this HTML code:

<div id="resizable2" class="ui-widget-content">
    <h3 class="ui-widget-header">MS</h3>
</div>

This works great with the jQuery:

 $(function() {
    $( "#resizable" ).draggable();
    $( "#resizable" ).resizable();
}

But then, I've tried to use it with a div created by javascript:

function addnewbox() {
    var newDiv = document.createElement("div"); 
    var h = document.createElement("h3"); 
    var text = document.createTextNode("MS"); 
    document.body.appendChild(newDiv);
    newDiv.appendChild(h);  
    newDiv.className = "ui-widget-content";
    h.appendChild(text);   
    h.className = "ui-widget-header";
    newDiv.id = "resizable";
}

And it's not working

Not working how? Could you make a fiddle so we can see the problem? — Spencer Wieczorek
– Spencer Wieczorek, Commented Nov 18, 2014 at 14:16
The draggable() and resizable() are called on the current elements. When you create a new element you must manually make them draggable and resizable too. Besides that, you can't create elements that have the same id's of existing ones (you can, but you shouldn't) — devqon
– devqon, Commented Nov 18, 2014 at 14:19
Javascript executes in a linear fashion meaning the order in which you have declared your functions affects when they are called. To make the new div resizeable you have to call the draggable() and resizeable() methods on it after it has been created - like in the answers below. — Craicerjack
– Craicerjack, Commented Nov 18, 2014 at 14:27

Mark Walters · Accepted Answer · 2014-11-18 15:20:38Z

Change your dom object to a jQuery object by calling $(newdiv) and re-initialise the resizable and draggable functionality on the new content.

function addnewbox() {
    var newDiv = document.createElement("div"); 
    var h = document.createElement("h3"); 
    var text = document.createTextNode("MS"); 
    newDiv.appendChild(h);  
    newDiv.className = "ui-widget-content";
    h.appendChild(text);   
    h.className = "ui-widget-header";
    newDiv.id = "resizable";
    $(newDiv).resizable(); //Add this
    $(newDiv).draggable(); //and this

    document.body.appendChild(newDiv); //Append to the dom once you've finished with it.
}

As devqon has mentioned, the reason for this is that this function adds dynamic content (content which isn't there on page load) this means that the draggable and resizable functionality is not present on this new content. This is why you need to re-initialise the connection between the new element and the functionality.

Also as menioned don't re-use ID's, they must be unique. It is bad practice to use the same id for multiple elements and will very likely lead to other issues.

Lastly, it is a good idea when creating new content to manipulate it first and add it to the page at the end. In this instance you are appending further content inside the newly created div. I would do this first and then when finished with it, add it to the page.

michalh · Accepted Answer · 2014-11-18 14:21:02Z

0

Hi I have changed your function to:

function addnewbox() {
    var newDiv = document.createElement("div"); 
    var h = document.createElement("h3"); 
    var text = document.createTextNode("MS"); 
    newDiv.id = "resizable";
    newDiv.className = "ui-widget-content";
    h.className = "ui-widget-header";
    h.appendChild(text);   
    newDiv.appendChild(h);  

    document.body.appendChild(newDiv);

}

And I have created a jsfiddle for you to try yourself:

http://jsfiddle.net/ttw7218z/4/

answered Nov 18, 2014 at 14:21

michalh

3,03727 silver badges32 bronze badges

Comments

dfsq · Accepted Answer · 2014-11-18 14:21:50Z

0

Well you need to initialize resiazble plugin on new DOM elements. You already have a few JS solutions so I will post one more version using jQuery for elements creation:

function addnewbox() {
    $('<div class="ui-widget-content resizable">' +
          '<h3 class="ui-widget-header">MS</h3>' +
      '</div>').appendTo('body').resizable();
}

One more thin you should be aware of: you should not duplicate ids, they must be unique. So instead of multiple #resizable use .resizable classes.

answered Nov 18, 2014 at 14:21

dfsq

193k26 gold badges244 silver badges261 bronze badges

Collectives™ on Stack Overflow

Changing JavaScript into jQuery - createElement

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related