Preventing script execution on ajax load pages with jQuery

Question

I'm trying to load a page using the load() function, the problem is that javascript code on that page is being executed when loading. I use this:

$('#itemid').load('thepage.php #selector', function() {
     MY CODE HERE
});

how can i prevent the javascript code from being executed and load only the HTML part that i want?

Jeff B · Accepted Answer · 2012-03-22 19:43:11Z

3

Use .get() or .post() and process what you get back. Pull the script tags out of your returned code before you append it to the page, or just pull out the code you want:

$.post('thepage.php', {
    data: myData
}, function(data) {
    var myHTML = $(data).not('script');
    $('#itemid').html(myHTML);
});

Or:

$.post('thepage.php', {
    data: myData
}, function(data) {
    var myHTML = $(data).filter('#selector');
    $('#itemid').html(myHTML);
});

Demo: http://jsfiddle.net/jtbowden/wpNBM/

Note: As you mentioned, using a selector with load should accomplish the same thing, as you see in the example. So, if it isn't working this way, something else is going on.

edited Mar 22, 2012 at 19:43

answered Mar 22, 2012 at 19:34

Jeff B

30.1k7 gold badges64 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

FidoBoy Over a year ago

i think that this is exactly what i need, i'll try it right now and report back the results. I forgot to mention that i'm not uusing jQuery exactly, but i'm using the Zepto script (that should work in same way for that functions). I'm thinking that it's a bug, cause reading the jQuery documentation for the load() function i've readed that scripts are executed ONLY if load is used WITHOUT using a selector from the loaded page... but in Zepto it's not working that way

Jeff B Over a year ago

Yes, the selector should work, like in my jsfiddle example. I am not familiar with Zepto, but from what it sounds like the syntax is the same, but not all features are guaranteed to be the same.

Jeff B Over a year ago

From the Zepto docs: "Note that emulation of all features of jQuery is not a project goal". They are most concerned with being a small library. That means they give up some features to achieve that.

Maleck13 · Accepted Answer · 2012-03-22 19:34:57Z

0

Not sure if I have understood the problem correctly, but you could remove the javascript and just have the html. I assume you want to js bindings to happen on the new page though. So when you load the new page, in the callback, you could call a function that applies the needed bindings.

function applyAfterAjax(){
  $(this).find('element').click(function(){alert('clicked');});
}
$('#itemid').load('thepage.php #selector',applyAfterAjax);

answered Mar 22, 2012 at 19:34

Maleck13

1,73915 silver badges17 bronze badges

Collectives™ on Stack Overflow

Preventing script execution on ajax load pages with jQuery

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related