0

I would like to implement an AJAX-based navigation which falls back gracefully when JS is not available and want to do it on top of existing pages. In order to attain this I will ad a 'container' div which:

  • marks the part of the page which need to be replaced
  • contains all the scripts that need to be inserted into the page

What I want to do is basically use AJAX to:

  • replace the content of div#main
  • execute all the script contained within div#main after replacing the div
  • do NOT execute other scripts contained in the page download using AJAX

Basically something like this:

<html>
   ... menu, navigation, borders, social etc...
   ... come scripts which must NOT be executed when using AJAX page load ...
   <div id="main">
      ... main HTML which needs to be replaced in page ...
      <script> ... scripts which need to be executed ... </script>
   </div>
   ... footer, copyright, links etc...
</html>

I know from the manual that the following will NOT work:

$('#main a').click(function() {
    $('#main').load( $(this).attr('href')+' #main' );
})

because the CSS selector will cause filtering out all the scripts. So I tried using $.ajax and processing the code below.

$.ajax( $(this).attr('href') ).done( function(data) {
  $('#main').replaceWith( $(data).find('#main') );  // .1
  $(data).find('#main').filter("script").each(function() {
    eval( $(this).text() );   // .2
    alert( $(this).text() );  // .2
  });
 })

which does NOT work either.

  • .1 will insert the main DIV but will not insert any SCRIPT
  • .2 will never be executed

to my best understanding $(data) should not filter out scripts but the trial of facts shows this does not work

So far my only solution (or perhaps should we call it workaround?) is to use regex-based parsing of the 'data' string but I don't really like that and would like a more robust and standard based solution.

P.S.: the existing environment is using JQuery 1.7 but I believe we can easily upgrade

P.P.S.: I understand that the above works only for links and not for forms but this is enough for my use case

Simone Avogadro
  • 789
  • 8
  • 23
  • what will happen if you load a script that already is on the page? – madalinivascu Mar 24 '16 at 08:38
  • @madalinivascu I understand the implications and don't want that to happen. That's why we've placed all the script which need to be run within the same div#main – Simone Avogadro Mar 24 '16 at 08:41
  • aren't your pages head the same? – madalinivascu Mar 24 '16 at 08:44
  • @madalinivascu everything outside div#main is always the same, that's why I want to just replace the div#main and spare all the page re-rendering and external scripts re-execution – Simone Avogadro Mar 24 '16 at 08:50
  • Read this 3 times and didn't get what you're trying to achieve. Do you want to load a bunch of scripts dynamically and execute them? If that's the case, you could use ```jQuery.getScript()```, https://api.jquery.com/jquery.getscript/ or use an approach of creating the ``` – dekkard Mar 24 '16 at 08:53
  • @dekkard I've added a clarifying header, I want to replace a DIV with a DIV downloaded with AJAX + execute only the scripts contained inside that DIV – Simone Avogadro Mar 24 '16 at 09:07

0 Answers0