Dynamically loading external HTML in a div using Java Script
Question by user354051
I have prepared some demo examples for the topic.
There is page name “changelog.html” here:
http://pantheon-studios.in/test/jquery/changelog.html
This is working fine if loaded directly.
I am trying to load this page dynamically into:
http://pantheon-studios.in/test/jquery/index.html
Here changelog.html doesn’t behaving as expected.
I think the init script on changelog.html is not getting executed or something else is happening when loading it dynamically.
Like wise I do have couple of other pages using various jQuery and other java scripts plugins. Some of those needs initialization like animatedcollapse.js in the above example, and couple of them doesn’t need initialization, you can directly call the script and go.
I also gave a try using:
jQuery.getScript("anim.js")
after dynamically loading “changelog.html” but doesn’t work.
The “anim.js” contains
animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets,hide=1');
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,hide=1');
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1');
animatedcollapse.init();
I would really appreciate is some one point me out the right direction. I am completely new to web programming so please have some patience with me.
Thanks
Answer by Starx
I solved your problem
your index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Java Scripts -->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
$("#clickme").click(function() {
$("#content").load("changelog.html");
});
});
</script>
</head>
<body>
<a href="javascript:void(0)" id="clickme">Load HTML</a>
<div>
<div id="content"></div>
</div>
</body>
</html>
Your changelog.html
<script type="text/javascript" src="js/animatedcollapse.js"></script>
<script type="text/javascript">
animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets,hide=1');
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,hide=1');
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1');
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
};
animatedcollapse.init();
</script>
<!-- CSS Stylesheet -->
<style type="text/css">
.topicdetail{
text-align:justify;
width:650px;
padding-left:10px;
padding-right:10px;
/*background: #BDF381;*/
font-size: 13px;
}
</style>
<div id="container">
<ul>
<li>Compilation command in preferences is more simplified.<a href="javascript:animatedcollapse.toggle('cat')">?</a>
<div id="cat" class='topicdetail'>
<br/>
<p>
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines,
is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship
and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.
A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple
commands.
</p>
<br/>
</div>
</li>
<li>Compilation command in preferences is more simplified.<a href="javascript:animatedcollapse.toggle('dog')">?</a>
<div id="dog" class='topicdetail'>
<br/>
<p>
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines,
is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship
and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.
A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple
commands.
</p>
<br/>
</div>
</li>
<li>Compilation command in preferences is more simplified.<a href="javascript:animatedcollapse.toggle('rabbit')">?
</a>
<div id="rabbit" class='topicdetail'>
<br/>
<p>
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines,
is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship
and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.
A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple
commands.
</p>
<br/>
</div>
</li>
</ul>
</div>
Just copy and paste the html
