Using JQuery on JavaScript variables

Question

$.getJSON('ajax_popup.php', function(data)
{
    var popupDiv = decodeURIComponent(data.data);
    $('body').append( popupDiv );
});

This piece of code returns <div> element that has other XHTML elements inside. It is returned in JSON format with JQuery. The returned XHTML from data.data is stored into JavaScript variable by first decoding UTF-8 encoded data. The DIV element is a custom popup window. The above code works, BUT I want to make it draggable using JQuery UI's .draggable() method, but I don't know where to use it and how to make it work in this case.

I've tried:

popupDiv.draggable();

But it didn't work.

And:

$('body').append( popupDiv ).draggable();

But it made the body element draggable :D

Answer 1

Try this:

$(popupDiv).draggable();

Answer 2

The jQuery function can turn text into jQuery extended DOM elements. So:

$.getJSON( 'ajax_popup.php', function( data ) {
  var popupDiv = decodeURIComponent( data.data );
  $('body').append( $(popupDiv).draggable() );
} );