External page div load with jQuery element error
Question
If anybody that knows jQuery better than me (probably 99% here since this is my first week trying this code :) have some time left over here´sa question that I really need some answer to. Sorry for some incorrect english.
Some of you have probably read the other questions I asked about putting external page content into divs and UI select-slide elements that dosent load properly in such loaded divs, this is a continuation on that subject and now I hope to solve this and I make a new subject to gather the info here. The main question is Why UI-sliders (select elements) dont work when they are loaded (from div in another page) to divs via jQuery (in same homepage).
This is the code I am using to load content into the site:
load_script.js
$(document).ready(function(){
$('#div_that_will_receive_content').load('from_page.html #from_div');
});
Problem: The problem occurs in two different ways. 1: When only the DIV is loaded the slider dosent show, evrything els in the div shows and the div loads correct except from the slider. The slider shows up for 0.1 second at the loading moment then disapears. 2: When a entire site is loaded in (included ui sliders) the content loops and the site never stops loading, when checking in browser consol 25-30mb is loaded in seconds. Even in this case the slider shows for maybe 0.1 second exacly at load moment, and becuse the of the loop-loading of the site the slider flashes.
Page_1.html
<html>
<head>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script src="jquery-ui-1.9.2.js" type="text/javascript"></script>
<script src="load_script.js" type="text/javascript"></script>
<link href="jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="div_1">DIV 1 = This is where the content of div_2 should be</div>
</body>
</html>
Page_2.html
<html>
<head>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script src="jquery-ui-1.9.2.js" type="text/javascript"></script>
<script src="load_script.js" type="text/javascript"></script>
<link href="jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="div_2">DIV 2 = This div containing a slide-select-element will be loaded to to div_1</div>
</body>
</html>
load_script.js
<script>
$(document).ready(function(){
$('#div_1').load('Page_2 #div_2');
});
</script>
I am still having some problems with this. Now the problem is that if I load the entire Page2.html into the div in Page1.html it all goes well. But if I just load in selected divs from Page2.html the slide-elements dont show up, but the rest of the content does (text).
This work and the whole page get loaded in including the sliders:
<script>
$(document).ready(function(){
$('#div_1').load('Page_2');
});
</script>
This dont work and the sliders dont show up but the rest of the content does (text):
<script>
$(document).ready(function(){
$('#div_1').load('Page_2 #div_2');
});
</script>
Does anybody have a clue what this can depend on?
1 answers
solution1
1 ACCPTED 2012-12-18 19:18:56
Remove all your script imports on your second page - you only need them to load once - Also each time you load load_script.js - it is causing an endless loop since that's where your load function is. You can then use the callback function of .load() to initialize the slider.
$(document).ready(function(){
$('#div_that_will_receive_content').load('from_page.html #from_div',function(){
$( "#slider" ).slider();
});
});
That will break your page 2 if you are also using that page independently though. If that's the case then you just need to remove the following from page2
<script src="load_script.js" type="text/javascript"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.