Question

I was wondering if there is a way to execute script within a ajax dynamically loaded content.
I’ve searched the web and this forum also an find a lot of answers, like

[Running scripts in an ajax-loaded page fragment
[1]: Running scripts in an ajax-loaded page fragment [1]

But none of this seems to work fine for me.
I’m not experienced as the author of the quoted post, so maybe we can find a solution more simple and quite for everyone.

For now i’ve implemented a tricky turnaround that smell to much of an hard-coded solution that is:

//EXECUTE AJAX REQUEST LET'S SAY SUCCESSFULLY,

$ajax([..]) //THEN 
.ajaxSuccess(function(){     
    // LOCATE ANY OBJECT PRE-MARKED WITH A SPECIFIC CLASS
    $(".script_target").each(function()
    {   
      //DO SOMETHING BASED ON A PRESET ATTRIBUTE OF THIS SPECIFIC ELEMENT
      //EXAMPLE: <div class=".script_target" transition="drop_down">...</div>
      //WILL FIRE A SCRIPT RELATED TO drop_down CASE.
    });
});

I know this is an ugly solution but i didn’t came up with nothing better than this.
Can you help to improve this method?
Maybe there’s a way to let the browser fire script within the loaded page automatically?

PS. I’m not going to use the eval() method if it’s not the last solution, cause both security leak and global slowdown, AND be aware that the script launched need to modify objects loaded in the same fragment of the script.

Thanks in advance.

Answer 1

If I understand you correctly :

• you use “load” to retrieve html content from the server, and you add it to the page.
• later, you do an ajax call, and on the return of the ajax call, you want to act on the markup you added earlier
• but, depending on the markup retrieved, you want to do something different in the ajax callback

So another question : before you load the markup, do you know what logic will be behind it, or do you actually need to “read” the returned HTML to understand what it will be used for ?

Otherwise maybe something like this would work :

• In the callback of the “$.load” function, use $.data() to attach more information to created dom object
• In the ajax callback, you should be able to access the “added” markup (with a class like you did, or with an id if possible), and read to “data” to known which behavior you should have ?

Hopefully I got your problem right, it could help if you were able to create a jsfiddle or something, just to make sure we understand it.

Hoping this helps.

EDIT : After your comment, it might be related to the selector you use when calling $.load().

There is a “Script Execution” section in the $.load documentation : http://api.jquery.com/load/ , that explains that the scripts are not executed if you add a selector in the url, like this :

$('#b').load('article.html #target');

Could this be your issue ?

Also, if possible, you could try and change your site so that instead of having the js code of each “page” of the gallery inside the page, you put it inside a separate javascript file, that you load at runtime (for example with require js).

This way, “loading” a page would be something along the lines of :

$.load("url_of_a_page_markup.html", function () {
  require(["url_of_the_javascript_module.js"], function (TheJsModuleForThePage) {
     TheJsModuleForThePage.doSomething();
  });
});

If you structure your JS modules in a consistent way, and you define a convention for the name of markup and js files, you can generalize things so that a “gallery” manager deals with all this code loading, and you’ll end up with well isolated js modules for each page.

Hoping this helps.