Ajax - Jquery and Javascript not loading when ajax content is loaded

Question

I am loading an external HTML file with ajax. This content needs Javascript and Jquery to run. When the content loads it is not running correctly. Everything works fine if the content is all on the page without loading.

Here is my Jquery/Ajax that loads content.

The script is not placed in the head, i placed it above my the div that needs to load content.

 <script language="javascript">
function example_ajax_request() {
  $('#bottom_content').html('<p><img src="ajax-loader.gif" width="32" height="32" /></p>');
  setTimeout('example_ajax_request_go()', 2000);
}
function example_ajax_request_go() {
    $("#bottom_content")
        .hide()
        .load('bottom.html', function(){
        alert($(this).find('script').length)
            $(this)
                .fadeIn(2000)
                .find('script').appendTo('head');
        });
}
$(document).ready(function() {
   example_ajax_request();
});

</script>
  <div style="position:absolute; left: 44%; margin-left: -450px; top: -100px; background-image:url(images/AG_V4_bottom_section_back.png); width: 1126px; height: 296px; z-index: 5000;">
   <div id="bottom_content" style="width:1125px; height: 296px;"></div>
  </div>

Here is the jquery.

It is loading into a div id called bottom_content.

I tried looking at getscript, .live, .on, ajaxcomplete but I just can't seem to put it all together.

Any help would be welcome.

Guzz

---

bottom.html code

<div style="width: 370px; height: 45px; padding-left: 30px; float:left;">NEWS</div>
  <div style="width: 340px; height: 45px; padding-left: 30px; float:left;">FEATURED PROJECT</div>
  <div style="width: 310px; height: 45px; padding-left: 30px; float:left;">FEATURED PROJECT</div>
  <div class="percentagewrap" style="width: 400px; float:left; margin-right: 2px;">
    <div id='mycustomscroll2' class='flexcroll'>
      <div style="width: 325px; margin: auto; text-align:left;" class="white_text01"> <strong>6-27-12</strong><br />
        I made some changes to the site. I changes the backgrounds of each page. I hope you like them! <br />
        <br />
        <strong>3-20-12</strong> <br />
        I would like to welcome you to the launch of AndrewGuzman.com version 3. I have redesigned everything from scratch and I have included some of my 3D work. I am currently upgrading my 3D skills so stay tuned to the site for more 3D content. And of course, I have my Web, Logo and Print sections as well. I would love to hear what you think about my site so send me your thoughts on my contact page. Thanks and Enjoy. <br />
        <br />
        <strong>10-10-11</strong> <br />
        3D Animation Content is coming soon I have been very hard at work on some intensive 3Ds Max training. Will have some 3D designs for the site around the X-mas holiday. I am very excited to show everyone what I have been doing. <br />
        <br />
      </div>
    </div>
  </div>
  <div style="float: left; width: 365px; height: 210px;"><div style="width: 293px; margin: auto;"><img src="images/featured_image.jpg" width="293" height="184" vspace="4" border="0" />
  <div style="height: 30px; width: 100%;"><div class="white_text01" style="margin: auto; width: 250px;">David-Alan-Hughes.com   | View Project</div></div>
  </div>
  </div>

  <div style="float: left; width: 340px; height: 210px;">
<div id="contact_form">
  <form name="contact" method="post" action="">
    <fieldset>
      <label for="name" id="name_label">Name</label>
      <input type="text" name="name" id="name" size="30" value="" class="text-input" />
      <label class="error" for="name" id="name_error">This field is required.</label>

      <label for="email" id="email_label">Return Email</label>
      <input type="text" name="email" id="email" size="30" value="" class="text-input" />
      <label class="error" for="email" id="email_error">This field is required.</label>

      <label for="phone" id="phone_label">Return Phone</label>
      <input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
      <label class="error" for="phone" id="phone_error">This field is required.</label>

        <br />
      <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
    </fieldset>
  </form>
</div>

  </div>

---

Scripts in head

<!-- news scroller-->
    <link href="css/tutorsty.css" rel="stylesheet" type="text/css" />
<link href="css/flexcrollstyles.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="js/flexcroll.js"></script>


<!-- slider-->
<script src="js/modernizr-2.6.1.min.js"></script>
    <script src="js/jquery-1.2.3.pack.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>


<script type="text/javascript">
jQuery.noConflict();
</script>
    <script src="js/lean-slider.js"></script>

  <link rel="stylesheet" href="css/lean-slider.css" type="text/css" />
    <link rel="stylesheet" href="css/sample-styles.css" type="text/css" />

<!-- ajax jquery contact form-->



<script src="js/runonload.js"></script>
<script src="js/tutorial.js"></script>
<link href="css/tutorial.css" media="all" type="text/css" rel="stylesheet">

Answer 1

The problem is most likely that there is code in runonload.js and/or tutorial.js that is run before your ajax call is completed and the corresponding div is updated with the new contents.

I think you simply need to either delay whatever code is in there or re-run it once the div is populated.

Since I don't know what happens in those included js files, I'm still only guessing though.

function example_ajax_request_go() {
    $("#bottom_content")
        .hide()
        .load('bottom.html', function(){
            //Here you need to add calls to initialize the contents
            $(this).fadeIn(2000);
    });

}