0

I found the below script here but wanted to know if it is posible to preload multiple pages with the same script. The reason is I want to preload some forms that will be hold in fancybox and it takes too long to load. Using this script help load the form much faster (it works) but I don't know how to make it work for multiple pages.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
  jQuery().ready(function () {
    $.get('index2.html', function(data) {
     jQuery("#index2content").html(data);
    });
  });
</script>

<div id="index2content"></div>
Community
  • 1
  • 1
Jan
  • 27
  • 1
  • 6

2 Answers2

0

This script loads the page "index2.html" and puts its content into the div#index2content when the DOM is ready.

So, if you want to load multiple pages, you can do the following:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
  jQuery().ready(function () {
    $.get('index2.html', function(data) {
     jQuery("#index2content").html(data);
    });

    $.get('index3.html', function(data) {
     jQuery("#index3content").html(data);
    });

    $.get('index4.html', function(data) {
     jQuery("#index4content").html(data);
    });
  });
</script>

<div id="index2content"></div>
<div id="index3content"></div>
<div id="index4content"></div>
Anthony Garcia-Labiad
  • 3,531
  • 1
  • 26
  • 30
  • Why not `$(selector).load(url)`? – Satpal May 18 '14 at 17:29
  • Yes it's a good idea, I would have done the same but I wanted to keep the OP structure – Anthony Garcia-Labiad May 18 '14 at 17:34
  • Anthony: I tried this but it make the page where I have the preload script blank in IE so it doesn't really work. Also, I just noticed that this script doesn't really work for my purpose. It make my send button in the form as a direct link to the 'action' page instead of bypassing it if the form is filled in correctly. – Jan May 18 '14 at 20:16
  • jQuery is supposed to work fine with IE 6 and more, so I'm surprised it does not work. Maybe could you put a more consistent sample of what you are trying to do on [jsfiddle](http://jsfiddle.net)? – Anthony Garcia-Labiad May 18 '14 at 20:58
0

Three options:

a) Setup an API that would serve the whole html, then just get the data using $.AJAX, witch would be a bad practice because of overload

b) 

<script>
     var html = '<?php echo $html_file;?>'; 
     jQuery("#index2content").html(html);
</script>

c) 

<iframe id="data" style="display:none" src="your document">
</iframe>

<script>
$("#data").load(function(){
    $("#index2content").html($("#data").contents().find("body").html());
    $("#data").remove();/detach the iframe
});
</script>
Ben
  • 3,989
  • 9
  • 48
  • 84