jQuery is not working on ajaxally loaded data

Question

I have tried to load data from external html file into div.

Like I am selecting html file from dropdown and then clicking on load button, on click it will load data of selected html file into current html and in the current html page I am having a div, in which html content are to be copied.

I can easily get content of external html file into div on button click, but problem is that content which are copied from external html to div, on that html content jquery is not working properly like draggable, resizable are not working.

How Can I resolve this error ?

My code:

$.ajax({
    url: "test.html",
    async: false,
    dataType: "text",
    success: function (data) {
        console.log(data);
        $(data).appendTo("#col_two");
        return true;
    }
});

EDIT: Code from comment below...

<div class="ui-draggable ui-resizable" style="background: none repeat scroll 0% 0% rgb(253, 23, 23); width:394px;height:210px;position:absolute; left:1084px; top: 287px;border:1px solid rgb(82, 1, 243); z-index:1;" id="rectangle_1">
   <div style="z-index:1;" class="ui-resizable-handle ui-resizable-e"></div>
   <div style="z-index:1;" class="ui-resizable-handle ui-resizable-s"></div>
   <div style="z-index:1;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>
</div>

I am trying to add above code in

I am appending abovecode in ajax call into col_two, appended div whose id is "rectangle_1" is not draggalbe nor resizable

$.ajax({ url: "test.html", async: false, dataType:"text", success: function (data) { console.log(data); $(data).appendTo("#col_two"); return true; } }); here col_two is the id of a div — ParthPatel, Oct 01 '13 at 10:38
Please post HTML and javascript code in your question or as a [fiddle](http://jsfiddle.net/), not in a comment. — Raidri, Oct 01 '13 at 10:40
You're not assigning draggable and resizable to the elements that you are loading. You have to do that *after* you load them, so do it in the success callback. — Reinstate Monica Cellio, Oct 01 '13 at 10:41

score 1 · Answer 1 · edited May 23 '17 at 10:30

1

Can you not use the load function for this, as in...

$( "#col_two" ).load("test.html");

Take a look at the load api in the jquery documentation, and also see Difference between $("#id").load and $.ajax? link for a comparison.

For the issue of using Draggable etc, are you referencing JQuery.UI and also do you have this in your code...

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

I tested this locally, and it worked...

 $(document).ready(function () {
            $("#col_two").load("Page.htm");
            $("#col_two").draggable();
        });

enter image description here

When I run this, I can drag 'This is the loaded page...' around.

edited May 23 '17 at 10:30

Community

1
1

answered Oct 01 '13 at 10:48

Christian Phillips

18,399
8
53
82

I have tried to use, content are getting displayed but jquery is not working on them, like resize and drag.. – ParthPatel Oct 01 '13 at 10:53
@user1244566, add code to the question - not in the comments. – Christian Phillips Oct 01 '13 at 11:01
@user1244566, where are you hooking up the `.draggable()` function? – Christian Phillips Oct 01 '13 at 11:05

score 0 · Accepted Answer · answered Oct 01 '13 at 10:44

0

I would suggest handling anything related to the ajax-loaded content in the parent file. Given that you did not post any code, however something like this is what you want to do:

$.ajax({
  url: "/file.php",
  success: function(response) {
    $('#div').html(respose);
  }
});

If you were to put your javascript within the ajax-loaded content, one problem I would worry about is that your ajax-loaded script might have dependencies that are assumed to exist in the "parent" file.

In addition, your ajax-loaded code would get loaded multiple times if you reload that same content more than once.

so don't load any script in with ajax loaded content rather write any functions within the parent javascript file.

answered Oct 01 '13 at 10:44

Shani

142
2
9

i am not putting any javascript function in ajax data as in your example it is response object. It is just pure html code – ParthPatel Oct 01 '13 at 10:50
means you are trying to use jquery dragable after loading ajax data right? – Shani Oct 01 '13 at 11:05
yes, but not only jquery draggable, but all the functionality of jquery like resizable, changing css and all other functions. – ParthPatel Oct 01 '13 at 11:07
if you are trying to use dragable with ajax loaded data then this will not work, because jquery plugins make their dom structure when initialize. so if you want to use ajax loaded data you have to re initiate the draggable function that you already done within .ready function – Shani Oct 01 '13 at 11:08

jQuery is not working on ajaxally loaded data

2 Answers2

Linked