Multiple AJAX scripts/functions in one page only runs last function

I've got a page with 3 divs that I need filled using AJAX.  So I've got 3 js functions to accomodate that.  This is how I've got the section of the page:

<div id="Sect1"></div>
<script type="text/javascript">loadSect1();</script>

<div id="Sect2"></div>
<script type="text/javascript">loadSect2();</script>

div id="Sect3"></div>
<script type="text/javascript">loadSect3();</script>

The problem I'm having is that only the last javascript function seems to be executing.  If I re-order the divs with say, Sect1 being last, then that function runs fine, but none of the other 2.  I've included an onclick event on each of the divs and that works but I don't want users to have to click each section to load the data.

What am I missing here?

I thank you in advance.
Who is Participating?
ahoffmannConnect With a Mentor Commented:
do you functions (loadSect1-3) all use the same function to to make the XmlHttpRequest? Then you most likely have one object which gets overwritten with each call.
You either need to make instanzes of each (xmlhttprequest-)object, or wait 'til the request finished ith a response.
leadwaveAuthor Commented:
Thank you.  I knew I was missing something.  I simply created a new instance of the object and everything works great.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.