Jump to content
Sign in to follow this  
duncan_cowan

Javascript Block Caching

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Edited by thescientist

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...