Dynamically loading external HTML in a div using Java Script

Question

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

Starx · Accepted Answer · 2010-05-31 15:28:09Z

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

Thanks Starx, It's working. One thing I have noticed that when you click "Load HTML", data of changelog.html is loaded in expanded format then it collapsed. This happens in a fraction of a second but clearly visible. Instead if you move call to src="js/animatedcollapse.js" into index.html, then data is loaded in collapsed form. I don't know why it's like that?
thats because you are trying to load a different file, and that different file has a plugin which has to first load and then initiate. This is a common thing dont worry about it. Why dont you check out the jquery accordion, it will solve this problem

edl · Accepted Answer · 2010-05-31 14:48:08Z

0

Try an onLoad event handler on your body tag in changelog and see if that helps the issue. IE

function init() {
    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();
}

<body onload="init()">.... etc

that or add init() to:

 onclick="jQuery('#content').load('changelog.html #container');init();return false"

edited May 31, 2010 at 14:48

answered May 31, 2010 at 14:40

edl

3,22424 silver badges23 bronze badges

4 Comments

Prashant Over a year ago

No it doesn't. I also tried using: jQuery("#content").load(' changelog.html #container', function(){ init(); alert("Content loaded."); }); init is getting called, changelog data is loaded but no functionality

edl Over a year ago

Have you read this part?:

Note that the document retrieved cannot be a full HTML document; that is, it cannot include (for example) <html>, <title>, or <head> elements. jQuery uses the browser's innerHTML  property on a <div> element to parse the document, and most browsers will not allow non-body elements to be parsed in this way.

a callback should work. Unless the script doesn't like that it's a full html page.

Prashant Over a year ago

Yes, Ok let me try removing html/title/head. There is question? is <script> tag is permitted? I mean as mentioned above to write init() function in "changelog.html".

edl Over a year ago

Collectives™ on Stack Overflow

Dynamically loading external HTML in a div using Java Script

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related