Why jQuery is working when directly opened as file on firefox but not working in XAMPP server?
Question
I am having some issues on jQuery. I have some load() scripts in my html which load some other fragment html parts as below:
<div id="container">
...Some html data here....
</div>
$(document).ready(function() {
$( "#container" ).load( "newpage.html")
});
In addition, inside newpage.html, I have some jQuery load() functions as well.
So, my problem is that when I run the webpage directly on firefox browser it work fine. But, when I run it on localhost, at first it will load newpage.html without error but the jquery inside newpage.html will not work. I tried using alert on some line of js code and I found It is not executing. It will execute if I open it directly in firefox though (but not work in chrome or IE). In addition, using firebug, I have found that the newpage.html is successfully loaded as response. Importantly, I try with removing the jquery-1.11.3.min.js import from the page and I still found that jQuery code are running in localhost but it will not work when directly opened as file on firefox. Maybe, this might seem to be some cache problem. Can anyone please help me to identify my issue? Thanks!!!
code snipset (Only work correctly on firefox when directly opened but will not work on localhost. Here, when executing example.html in localhost, it will get the tab1.html. So, I am assure that jquery import is working fine. But, after it import the tab1.html, when I click on the tab list, I am unable to navigate. Note: all actions are working fine when directly executed in firefox browser.)
Update: Working now. example.html
<html>
<h2>Main page header </h2>
<div id="container" style="height:auto;width:auto"> </div>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {
$( "#container" ).load( "tab1.html");
});
</script>
</html>
tab1.html
<html>
<div>
<ul>
<li><a id="t1" href="#">tab1</a></li>
<li><a id="t2" href="#">tab2</a></li>
<li><a id="t3" href="#">tab3</a></li>
</ul>
<h2>this is tab1 </h2>
</div>
<script>
$(document).ready(function() {
$("#t1").click(function(){
$( "#container" ).load( "tab1.html" );
});
});
$(document).ready(function() {
$("#t2").click(function(){
$( "#container" ).load( "tab2.html" );
});
});
$(document).ready(function() {
$("#t3").click(function(){
$( "#container" ).load( "tab3.html" );
});
});
</script>
</html>
tab2.html
<html>
<div>
<ul>
<li><a id="t1" href="#">tab1</a></li>
<li><a id="t2" href="#">tab2</a></li>
<li><a id="t3" href="#">tab3</a></li>
</ul>
<h2>this is tab2 </h2>
</div>
<script>
$(document).ready(function() {
$("#t1").click(function(){
$( "#container" ).load( "tab1.html" );
});
});
$(document).ready(function() {
$("#t2").click(function(){
$( "#container" ).load( "tab2.html" );
});
});
$(document).ready(function() {
$("#t3").click(function(){
$( "#container" ).load( "tab3.html" );
});
});
</script>
</html>
tab3.html
<html>
<div>
<ul>
<li><a id="t1" href="#">tab1</a></li>
<li><a id="t2" href="#">tab2</a></li>
<li><a id="t3" href="#">tab3</a></li>
</ul>
<h2>this is tab3 </h2>
</div>
<script>
$(document).ready(function() {
$("#t1").click(function(){
$( "#container" ).load( "tab1.html" );
});
});
$(document).ready(function() {
$("#t2").click(function(){
$( "#container" ).load( "tab2.html" );
});
});
$(document).ready(function() {
$("#t3").click(function(){
$( "#container" ).load( "tab3.html" );
});
});
</script>
</html>
1 answers
solution1
1 ACCPTED 2015-10-17 12:31:06
It is important to note that document.ready has already occurred in the main page.
Any script inside the newly loaded pages that relies on document.ready will fire immediately.
If that script is placed before the elements that it targets , the elements won't be found. Moving the script to the end of the newPage.html so it runs after those elements exist will make it work.
Example of newPage.html that will fail once it is loaded:
<script>
$(document).ready(function(){
// will run before the element below exists
$('#test').text('Some new text');
})
</script>
<div id="test"></div>
But reversing the order will make it work:
<div id="test"></div>
<script>
$(document).ready(function(){
// element above exists so text will be changed in it
$('#test').text('Some new text');
})
</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.