Doing ajax with Jquery.

Question

I have been loading content with ajax and all works fine. Here is my code

$(document).ready(function() { 

//Load a-z.php
//Timestamp resolves IE caching issue
var tsTimeStamp= new Date().getTime();
$.post('../../includes/categories/a-z.php',
      {action: "post", time: tsTimeStamp},
      function(data){
        $('#moviescontainer').html(data).slideDown('slow');
      });
return true;                           

});

My data inside a-z.php requires Javascript for it's content and when I load a-z.php onto my page the javascript doesn't work.

I am quessing that I need to link the relevant files to a-z.php and then load it via ajax.

Doesn't this kind of defeat the object of ajax?? That means that I will be loading the js files on the main page and then loading them again when I ajax a-z.php

I hope I made some sense.

EDIT: The A-Z.php page references external javascript files that I have already included on my main page (example: the jquery library, That will mean i am loading it twice.

When I mean requires javascript for its content I have a few modal boxes etc that open when content is clicked. These use the Jquery library)

Answer 1

Your problem is most likely that you need to add the defer attribute to the script tag, which defers executing the script until the content is loaded.

see here

you should not have to load the scripts a second time.

Answer 2

EDIT: The A-Z.php page references external javascript files that I have already included on my main page (example: the jquery library, That will mean i am loading it twice.

Simply omit them from the a-z.php page then. If they're already included on the main page, they'll be available to the a-z.php script when it's loaded in via ajax. However, I suspect any onload or $(document).ready() calls won't work quite right. I'd try to remove as much JS as possible out of the a-z.php page.