Javascript Block Caching

[duncan_cowan]

Hi, I am currently rewriting the user interface of my site in JQuery and making the pages dynamic so that no page loads are required as the content is loaded using HttpRequests through JQuery's .load() function. This is working well, however often the content will contain some javascript code blocks relevant to that specific page. Everytime the content is loaded through JQuery, the blocks are added to the cache, even if the content has already been loaded. Therefore after navigating around the site for a while, the javascript processing gets slower and slower, presumably due to the increase in the amount of script loaded. Is there any way around this problem? Such as by clearing the script cache? Or naming my script blocks so the page knows that it has already been loaded? Thanks for reading.Duncan

[thescientist]

do you have a link or code example for us to examine to see your implementation? one thing that I can think of is that if your app is calling loading data for your pages, you can always check to see if that data has been loaded before making the load call. So if you load some content, check to see if content exists and then decide what to do.

var homePageContent = null; if(!homePageContent){  //make load call and assign data to homePageContent};

for the next time, (if the call was successful) homePageContent won't (shouldn't) evaluate to false, and so the call won't need to be made. However, this all dependent on your implementation, in which case better advice might offered.

[duncan_cowan]

To be honest there's way too much code for me to post it all, however:The bit that loads the content:

$("#mid_content").load(link,parameters);

And this may load a page that includes this script:

<script type="text/javascript">$("#<?php echo $row_unit['id'];  ?>_tbody").children().hover(function() {    $("#<?php echo $row_unit['id'];  ?>_details").stop().animate({height:35});}, function() {  $("#<?php echo $row_unit['id'];  ?>_details").stop().animate({height:0});});</script>

Which works fine the first time, however changing the content overwrites the previous content. And after loading many different pages of content the page gets slower and slower, and if I look in the browser javascript diagnostics it shows numerous blocks of script that seem to have built up. One method I think would work would be to allow the loaded content to be cached, however any changes wouldn't be shown until a page refresh which isn't good for a dynamic site! Thanks.

[justsomeguy]

If the problem is that the event handlers for the tbody elements get built up, then you'll need to remove those event handlers before you load new content or add more event handlers. It seems that if you remove those elements then the event handlers will also be removed though, so I'm not sure that's actually what your problem is. You may want to use Firebug to profile the Javascript to see what's running the most.

[duncan_cowan]

Thanks, I think it may work if I just prevent javascript from being reloaded. Or I may just use http requests to reload content that will change, such as the contents of the table, as opposed to the whole content. Thanks very much for the help