Jquery load () strips script tags - workaround?

Question

Does anyone know about working for jquery.load () by removing script tags loaded from external content?

There is a lot of documentation about this happening, but after something like 4 hours on the network, I can’t find a job?

I load dynamically generated divs - similar to the search results page - and I need to bind .click () to the element inside each dynamically generated div. I have a php file that works in html generation and returns all html as a string, but I cannot bind jquery.click () as the script tags containing the jquery function are removed.

here is the code that loads external content, calling the php file ...

$("#titles_wrap").load("m_scripts/m_php/titles_loader.php", function(){ $..some code }); 

and here is a loop from a php file that generates divs (this works fine) ...

 $tag1='<script type="text/javascript">'; $tag2='</script>'; while($result_array = mysql_fetch_array($result)) { if($i2<=($titles_total)){ $_SESSION['titles_string'] .= '<li id="listItem_'.$i2.'"> <div id="titles_list_item"> <div id="titles_list_image_box" style="background-image: url(../../images/thumbs_test/'.$result_array[0].'); background-repeat: no-repeat; ">'.($i2+1).'</div> <div id="title_php_loader"></div> <div id="title_info_wrap"> <div id="title_current"><span class="title_current_grey" >current title: </span><br>'.$result_array[1].' </div> <div id="title_form_wrap"> <span class="title_current_grey" >new title: </span><br><input name="title_input_'.$i2.'" id="title_input_'.$i2.'" type="text" class="title_input"></input> <div id="title_send" class="title_send_'.$i2.'">GO</div> </div> </div> '.$tag1.' $(".title_send_'.$i2.'").click(function(){$("#title_php_loader").load("m_scripts/m_php/title_sender.php")}) '.$tag2.' </div> </li>'; $i2++; } } 

Sorry if this second block of code is a bit on the overkill side - let me know if a simplified excerpt will be more useful. However, you can see on the eighth of the last line of PHP code a jquery function that must be written to each div with a dynamically assigned selector.

Of course, it may be that there are other errors in the code, but I cannot test it until I get .load () to stop it.

If anyone finds a solution to this - or even a workaround of limited grace - brilliant!

Thanks in advance,

Greetings

Scott

EDIT - EDIT - EDIT - EDIT - EDIT - EDIT - EDIT - EDIT

@TJ Crowder @Frug

Thanks for your help!

I just looked carefully at the pages participating in your demonstration, and yes, I see that you have a job. It seems surprising because they are those script tags, and there are many people who cannot make it work - unfortunately, I am one of them!

The only differences that I see between your demo and my code situation were

1) type declarations in the opening script tag,

2) you load the page with script tags as part of the DOM, while I load the output of the php string (I really don't think this matters tho), huh? By the time he gets into the client everything is going to the same thing, no?)

3), your .load call retrieved the whole page, while mine only returned items. Since then, I have changed the output line to include everything, and tags, but grrrrrr ... I still can’t get dam script tags that will be displayed in the DOM.

Any suggestions? There loads, about which I do not know, can be anything! thanks S

Answer 1

jQuery load does not highlight script tags ( example ), and there are no script tags in the content that you return from your PHP script. There is some JavaScript, but it is not properly embedded in script tags and therefore is not recognized by the browser.

If you want to use JavaScript in this:

 ... '.$tag1.' $(".title_send_'.$i2.'").click(function(){$("#title_php_loader").load("m_scripts/m_php/title_sender.php")}) '.$tag2.' ... 

to be recognized as JavaScript, put it in a script tag.

 ... '.$tag1.' <script>"$(".title_send_'.$i2.'").click(function(){$("#title_php_loader").load("m_scripts/m_php/title_sender.php")})</script> '.$tag2.' ... 

... or better yet, use one script tag at the end of the content to include it, or a load callback.

---

Refresh . Repeat your edit:

1) type declarations in the opening script tag,

It doesn’t matter, see this updated example . The browser interprets the script tag according to the same rules that it always applies.

2) you load the page with script tags as part of the DOM, while I load the output of the php string (I really don't think this matters tho), huh? By the time he gets into the client everything is going to the same thing, no?)

That's right, everything happens the same as soon as it hits the browser.

3), your .load call retrieved the whole page, while mine only returned items. Since then, I changed the output line to include everything, and tags, but grrrrrr ... I still can’t get the script features that will be displayed in the DOM.

My example is just loading a fragment, not a full page.

I do not know why yours is not working. I was wondering if this is due to several script elements that are displayed in a loop, or the fact that you are connecting a click handler, but these are not the ones .

There is nothing to do except take your non-working example and peel off the layers in half until you find the part that, when removed, allows you to start working. Basically, again, it’s not that using load makes scripts inoperative (no matter how many people you find, who thinks that a case is a big world, there are a lot of people who think almost anything). You should give up the idea that this is due to the jQuery load function that does something with scripts; probably not so.

The key to debugging this type really simplifies, simplifies, simplifies. make sure the HTML returned by the server for ajax calls looks the way you think it does (no weird quotes or anything else). Try this with static pages. Etc.

Answer 2

Update now, which you can find on the doc jQuery website:

http://api.jquery.com/load/

These are strip tags only if you invoke a load with a specific suffix selector.

Script Execution

When calling .load () using a URL without a suffix for the selector expression, the content is passed to .html () before the scripts are deleted. This is done before the script blocks before dropping them. If .load () is called with a selector expression added to the URL, however, the scripts are deleted before the DOM is updated and thus are not executed. An example of both cases can be seen below:

Here, any JavaScript loaded in #a as part of the document will succeed. 1

 $('#a').load('article.html'); 

However, in the following case, the script blocks in the document loaded in #b are deleted and not executed: 1

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

Answer 3

Now this thread is a bit outdated, but I found a workaround for the $.load + selector + <script> function that I would like to share. Maybe this will help someone. Instead of $.load I use this:

 $.ajax({ url: '/some/url', success: function(html) { var content = $('<div />').html(html).find('#my-custom-selector'); $('#container-to-place-html-in').html(content); } }); 

Greetings, Alex

Answer 4

Can you confirm that it removes scripts or that event binding does not work? However, I think you can change the approach a bit. First change your script as

 $("#titles_wrap").load("m_scripts/m_php/titles_loader.php", function(){ $..some code $("[class^='title_send_']").click(function(){$("#title_php_loader").load("m_scripts/m_php/title_sender.php")}); }); 

Then remove the script part from php code

 while($result_array = mysql_fetch_array($result)) { if($i2<=($titles_total)){ $_SESSION['titles_string'] .= '<li id="listItem_'.$i2.'"> <div id="titles_list_item"> <div id="titles_list_image_box" style="background-image: url(../../images/thumbs_test/'.$result_array[0].'); background-repeat: no-repeat; ">'.($i2+1).'</div> <div id="title_php_loader"></div> <div id="title_info_wrap"> <div id="title_current"><span class="title_current_grey" >current title: </span><br>'.$result_array[1].' </div> <div id="title_form_wrap"> <span class="title_current_grey" >new title: </span><br><input name="title_input_'.$i2.'" id="title_input_'.$i2.'" type="text" class="title_input"></input> <div id="title_send" class="title_send_'.$i2.'">GO</div> </div> </div> </div> </li>'; $i2++; } } 

Answer 5

Why can't you use the callback function to bind events and not add it to your php page?

There may be a way around this, but I would not do it in the first place, so you do not find others to do it. If you set the bindings in the callback, they will be attached at boot time.

Answer 6

This sucks, I know, but one thing you can do is write something like a loadable html, and then after using the .ajax or .load method in the callback, replace the line → html = html.replace (/ lscript / g , 'script');

something like that should pull the tag as an undamped tag.

hope that helps :)