All geek questions in one place

A jquery function that loads html code into a div and then loads other content into a div inside the html is loaded

I would like to know how to load an html page (page1.html) into a div on the active web page (index.html) and then load another html page (page2.html) into a div that will be inside the loaded page (page1. html). I mean.

index.html

<div id="content"></div> <a class="link" href="#">load</a>

script

 $(document).ready(function() { $('a.link').live('click', function() { $('#content').load('page1.html', function(){ $('#content2').load('page2.html'); }); }); });

page1.html

 <div id="content2"></div>

It works fine just 1 click, the second time it loads page2.html for 0.5 seconds, and then loads page1.html.

What a problem ???

thanks

+4
source share
11 answers

The approach you took is wrong. If you have no choice but to fill the page using this multiple ajax request approach, try explicitly populating the contents of the div with the data from page 1 before moving on to filling the content2. This will mean that you cannot use the .load selector, and you will need to execute a regular ajax request, for example:

 $(document).ready(function() { $('a.link').live('click', function() { $.ajax({ url : 'page1.html', success: function(data){ $('#content').html(data); $('#content2').load('page2.html'); } }); }); });
+1
source

Using your code samples, I cannot reproduce the error - or should I call it an “error”? - Using jQuery 1.6.4 in Chrome, Firefox and even IE8.

I noticed that this is an unexpected behavior when the browser cache is turned on. The original changes made on Page1.html , if not selected from the server after the very first click on the link. I would recommend that you disable browser cache using Firebug or the Chrome developer tools and repeat the tests.

Also, try an updated version of jQuery or at least the same version that I am using from http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js .

Does any of the above work, try setting a delay to retrieve page2.html .

 $(document).ready(function() { $('a.link').live('click', function() { $('#content').load('page1.html', function(){ setTimeout("$('#content2').load('page2.html')", 250); // try diff. values }); }); });

If this does not solve the problem, it will help to see the full source of page1.html and page2.html.

+1
source

Try it.

 <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#link').live('click', function() { $.ajax({ url : 'ajax_info.txt', dataType : 'text', success: function(data){ var $response1 = $('<div />').html(data); $.ajax({ url : 'ajax_info.txt', dataType : 'text', success: function(data){ responseCombined = $response1.find('p:last').html(data).end().html(); $('#content').html(responseCombined); } }); } }); }); }); </script> </head> <body> <div id="content"></div> <div id='link'>load</div> </body> </html>

In a successful callback of the first request, I tried loading responseHTML into temp <div> and in the callback of the second request, I looked for the p:last element (in your case it will be # content2) and put the response of the second ajax request in it. Finally, put the merged data in #content .

For a demonstration, go to http://w3schools.com/ajax/tryit.asp?filename=tryajax_first and run the code above.

+1
source

html homepage

 <body> <a href="#" class="link">i load your page</a> <div id="container-page1"> </div> </body>

your page1 html

 <div> <p>i'm important text</p> <div id="container-page2"></div> </div>

jquery> version 1.7

I used the event because it keeps your javascript flat. Otherwise, you can get some deeply embedded code if you need 3 or 4 ajax calls deeper later!

if your jQuery is <1.7 then let me know and I can put together .delegate /. liquid equivalents.

 $(document).ready(function() { $('body').on({'click': function(evt) { $(evt.data.containerSelector).load(evt.data.page1Url, function(data, status, jqxhr){ $(this).trigger(evt.data.loadPage2Event); }); },'a.link',{page1Url:'page1.html', loadPage2Event:'loadPage2', containerSelector:'#container-page1'}); $("#container-page1",'body').on({'loadPage2':function(evt){ $(this).load(evt.data.page2Url); }},'#container-page2',{page2Url:'page2.html'}); });
+1
source

With the latest jQuery and working in Chrome, Firefox and IE 9, everything works fine:

index.html

 <html> <head> <title>Index</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('a.link').live('click', function() { $('#content').load('link1.html', function(){ $('#content2').load('link2.html'); }); }); }); </script> </head> <body> <div id="content"></div> <a class="link" href="#">load</a> </body> </html>

link1.html

 <html> <head> <title>Page 1</title> </head> <body> <p>This is page 1</p> <div id="content2"></div> </body> </html>

link2.html

 <html> <head> <title>Page 2</title> </head> <body> <p>This is page 2</p> </body> </html>

So, I would say that it fades, you do not have the latest version of jQuery, or that the problem is something else inside page1 or page2.html

+1
source

If I am right, you are trying to load the second second container, after loading the first container

Add a simple class to your markup

 <div id="content" class="toload"></div>

&

 <div id="content2" class="toload"></div>

Now here is the magical jQuery you need

 $(document).ready(function() { $('a.link').live('click', function() { $('.toload').load('page1.html', function(){ $(this).removeClass('toload'); //Remove the class so that next time it does not get affected }); }); });
+1
source

your answer works on my chrome, but try empty content to make sure you don't have double #content elements

 $(document).ready(function() { $('a.link').live('click', function() { $('#content:first').empty().load('page1.html', function(){ $('#content2').load('page2.html'); }); }); });
+1
source

You tried to clear #content first before assigning new content to it.

 $(document).ready(function() { $('a.link').live('click', function() { $('#content').empty(); $('#content').load('page1.html', function(){ ...
0
source

Try the following:

 $('a.link').live('click', function(e) { e.preventDefault(); $('#content').load('page1.html', function(){ $('#content2').load('page2.html'); }); });
0
source

You need to make sure that your page1.html has a DOM element that can be specified as a selector in your index.html jQuery. So, here is a layout you can use for page1.html:

 <div id="content2">//id name changed Content </div>

In your index.html use this jQuery:

 $(function(){ $('a.link').live('click',function(){ $('#content').load('1.html', function(){ $('#content2').load('2.html'); }); }); });

If it still flickers and removes 2.html inside # content2, see if you click the link more than once. Also, use the FireBug tool or Chrome Inspect Element to check all network transfers to see what is loading and what is not.

0
source

So how would I solve this problem ...

  $(document).ready(function() { $("a.link").click(function() { $.ajax({ url:'page1.html', success:function(data) { $("#page1").html(data); }, complete:function() { $.ajax({ url:'page2.html', success:function(data) { $("#page2").html(data); } }); } }); }); });

A bit more code, but using successful and complete callback functions should give a little more control when populating these divs. In my example, index.html has page1.html and has a tag - it seems to work fine, not without me ...

0
source

Source: https://habr.com/ru/post/1397787/

More articles:


All Articles