Prashant
Prashant

Reputation: 923

Dynamically loading external HTML in a div using Java Script

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

Upvotes: 1

Views: 3381

Answers (2)

Starx
Starx

Reputation: 78991

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

Upvotes: 2

edl
edl

Reputation: 3214

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"

Upvotes: 0

Related Questions