# Loading multiple load functions?

**URL:** https://forum.kirupa.com/t/loading-multiple-load-functions/329657
**Category:** web dev
**Created:** [September 28, 2012, 1:16am UTC](https://forum.kirupa.com/t/loading-multiple-load-functions/329657 "2012-09-28T01:16:08Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Eddie\_E](https://avatars.discourse-cdn.com/v4/letter/e/2acd7d/32.png) [@Eddie\_E](https://forum.kirupa.com/u/Eddie_E)
#### Post date: [September 28, 2012, 1:16am UTC](https://forum.kirupa.com/t/loading-multiple-load-functions/329657/1 "2012-09-28T01:16:08Z")

</div>

Hi I’m trying to load 2 external web pages into 1 index page… as shown below:

```auto
<script type="text/javascript"> $(document).ready(function() {
            $('#loadExternalWebPage').load('web.html');
        });    
    </script>

<script type="text/javascript">
        $(document).ready(function() {
            $('#loadExternalWebPageAnimation').load('animation.html');
        });    

    </script> 

```

Then I’m calling them in 2 different locations on the same page…

```
  &lt;div id="item1" class="item"&gt;
        
        &lt;a name="item1"&gt;&lt;/a&gt;
      &lt;div class="content1"&gt;                
            &lt;a id="web-home" href="#item1" class="panel"&gt;&lt;span&gt;Home / Web&lt;/span&gt;&lt;/a&gt; 
            &lt;a id="animation-home" href="#item2" class="panel"&gt;&lt;span&gt;Animation&lt;/span&gt;&lt;/a&gt; 
            &lt;a id="print-home" href="#item3" class="panel"&gt;&lt;span&gt;Print&lt;/span&gt;&lt;/a&gt;
            &lt;a id="contact-home" href="#item4" class="panel"&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt; &lt;br&gt;                
           &lt;div id="loadExternalWebPage"&gt;&lt;/div&gt;            
        &lt;/div&gt;  
    &lt;/div&gt;
    
    &lt;div id="item2" class="item"&gt;
        &lt;a name="item2"&gt;&lt;/a&gt;    

```

\<div class=“content2”\>  
\<a id=“web-home2” href="#item1" class=“panel”\>\<span\>Home / Web\</span\>\</a\>  
\<a id=“animation-home2” href="#item2" class=“panel”\>\<span\>Animation\</span\>\</a\>  
\<a id=“print-home2” href="#item3" class=“panel”\>\<span\>Print\</span\>\</a\>  
\<a id=“contact-home2” href="#item4" class=“panel”\>\<span\>Contact\</span\>\</a\> \<br\>  
\<div id=“loadExternalWebPageAnimation”\>\</div\>  
\</div\>  
\</div\>

At the moment they both work individually then cancel themselves out when together… how can I alter this to make it work?

Thanks

Eddie