Script in a loaded html with ajax doesn't run

Question

I'm having a major problem here and I'm running out of options. I hope someone can help me.

I have a link (script Number 1) that loads a html file (single-project.html) in a div after it is clicked. I'm using jQuery (script Number 2).

But the script number 3, that is in the single-project.html doesn't run.

Here a picture for more clearness

Here the script Number 3, which must fill the div with the id rex

$('#rex').ready(function() { var url="genredetail.php"; var activitydetail = sessionStorage.activitydetail; $.getJSON(url,function(json){ $.each(json.genredetail,function(i,item){ if(item.name == activitydetail){ $('<p class="excerpt">' + item.beschreibung3 + '</p>').appendTo('#rex'); } }); }); });

script Number 2

$('#betriebe').on('click', '.ajax-portfolio', function() { var url = $(this).attr("href"); $('.close-ajaxWrapper').css("background-color","white"); $('.close-ajax img').tooltip(); $('html, body').animate({scrollTop: ($('#div1').offset().top - 100)},'slow', function(){ $('#div1').load(url + ' #transmitter', function (){ $('.gallery').slideDown("slow");}); $('a.close-ajax').click(function(){ $('.close-ajax img').tooltip('hide') $('.close-ajaxWrapper').css("background-color","transparent"); $('div#filters').slideDown(1000, function(){ $('div#div1').empty(); }); $('html, body').animate({scrollTop: ($('#div1').offset().top - 0)}); return false; });//End: click() }); return false; });

$.ready only works on Document level, not on Element level: api.jquery.com/ready — lordvlad
– lordvlad, Commented Nov 19, 2014 at 8:35
Oh, meant script number 3. If it's in the head it might get removed by jQuery — Spokey
– Spokey, Commented Nov 19, 2014 at 8:42
I see you are loading a document fragment (load(url + ' #transmitter' ...) are you sure script number 3 is in that fragment? — lordvlad
– lordvlad, Commented Nov 19, 2014 at 8:43

lordvlad · Accepted Answer · 2014-11-19 09:57:39Z

You are using $.load to insert a document fragment. By design, this will NOT execute javascript. You can read the documentation about loading Page Fragments and Script Execution in the jQuery API docs

Either, you include the contents of script 3 to be within the $.load callback of script 2, or you put script 3 in a seperate file and execute it with $.getScript, right after you have loaded the HTML fragment.

I think the first option is conceptually simpler to understand so you should try this:

$('#betriebe').on('click', '.ajax-portfolio', function() { var url = $(this).attr("href"); $('.close-ajaxWrapper').css("background-color","white"); $('.close-ajax img').tooltip(); $('html, body').animate({scrollTop: ($('#div1').offset().top - 100)},'slow', function(){ $('#div1').load(url + ' #transmitter', function (){ // this gets executed as soon as the document fragment // has been loaded and inserted $('.gallery').slideDown("slow"); var url="genredetail.php"; var activitydetail = sessionStorage.activitydetail; $.getJSON(url, function(json){ $.each(json.genredetail, function(i,item){ if (item.name == activitydetail){ $('<p class="excerpt">' + item.beschreibung3 + '</p>').appendTo('#rex'); } }); // end $.each }); // end $.getJSON }); // end $.load $('a.close-ajax').click(function(){ $('.close-ajax img').tooltip('hide') $('.close-ajaxWrapper').css("background-color","transparent"); $('div#filters').slideDown(1000, function(){ $('div#div1').empty(); }); $('html, body').animate({scrollTop: ($('#div1').offset().top - 0)}); return false; }); // end: click a.close-ajax }); // end: animate return false; });// end: click .ajax-portfolio

with my bad english is this a tortur. but thanks. i will try :-)
this is not the place for job negotiations. I can give you more hints if you need, though.
i tried do insert the function after $('#div1').load(url + ' #transmitter', function (){ $('.gallery').slideDown("slow"); but the problem is still there.
you mean you have tried the code from my updated answer? what does not work? does the documen fragment get pulled in? but your data not? have you had a look at the 'network' section of your browsers debugger? (firefox: ctrl+shift+i, chrome: F12) Does it load the fragment and the data?

akman · Accepted Answer · 2014-11-19 08:34:36Z

Your script is loaded before the element is created so probably you could try $('document').find('#rex') and chain next function to do what you have to do

Collectives™ on Stack Overflow

Script in a loaded html with ajax doesn't run

2 Answers 2

9 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Related