Dynamically loading JS and CSS resources - retrieving a resource without using a hash code

Nov 23, 2010 at 7:13 PM

Hi,

I'm using Combres in an ASP.NET MVC project and it's working great so far - with one exception:

The project I'm working on requires me to dynamically load JavaScript (and possibly CSS) resources AFTER the initial page load.  This is easy enough to do with jQuery:

 

$.ajax({
  url: '/combres.axd/jsResourceName/',
  dataType: 'script',
  success: function() {
    // call methods from dynamically loaded script here
  }
});

 

The problem is, without the hash code after the resource name, I get a 404 page.

I suppose I could generate all the urls up front when I first load my page using:

 

<%= WebExtensions.CombresUrl("jsResourceName") %>



And throw them all into a javascript variable, but that doesn't seem optimal.  Is there any way to retrieve a resource without providing a hash code?

 

Thanks in advance for the help,

Phil

Nov 24, 2010 at 8:05 AM
Edited Nov 24, 2010 at 8:09 AM

Just add something at the end of your url:

/combres.axd/jsResourceName/1234


Combress will return the ResourceSet just fine. Note that because you are using a fixed hashcode, the resource will never be updated in the browsercache.

Nov 24, 2010 at 2:45 PM
richardversluis wrote:

Just add something at the end of your url:

/combres.axd/jsResourceName/1234


Combress will return the ResourceSet just fine. Note that because you are using a fixed hashcode, the resource will never be updated in the browsercache.

This works as far as retrieving the file, but I need somthing more robust.  I don't want to have to remember to manually invalidate the cache every time I release new code by changing the fixed hash code.

The best way I can think of to do this is by generating all the urls at page load time for the scripts I'm going to need to load dynamically later on:

<script>
  var Urls = {
    jsResourceName: '<%= WebExtensions.CombresUrl( "jsResourceName" ) %>',
    jsResourceName2: '<%= WebExtensions.CombresUrl( "jsResourceName2" ) %>',
    . . .
  };
</script>

Then pulling the url I need to load dynamically out of this Urls object:

$.ajax({
url: Urls.jsResourceName,
dataType: 'script',
success: function() {
// call methods from dynamically loaded script here
}
});

 

Not a perfect solution, but it does the job.

 

Coordinator
Nov 30, 2010 at 10:07 AM
Edited Nov 30, 2010 at 10:08 AM

I've checked in a more generic solution, based on your idea.  If you add the following line anywhere in an ASPX page:

<%= WebExtensions.EnableClientUrls() %>

Then you can access to resource sets' URLs in JavaScript using this syntax: 

alert(Combres.Urls.setName);

EnableClientUrls() also allows specify the resource sets whose URLs are to be generated Combres.Urls object.

Nov 30, 2010 at 2:38 PM

Thanks, this is great!

If you don't mind I have an idea that might make this even better:  It would be nice if we could include the Combres.Urls object in a resource set. This would allow the urls object to be bundled, cached, and minified in production like the rest of the scripts.

Perhaps this could be achieved through a method that just returned the Urls JSON object without actually adding it to a script tag:

<%= WebExtensions.GetClientUrlsJSON() %>

Then you could create an aspx page with just that call in it and  include that aspx page in a resource set in combres.xml. 

Is this possible, or would you end up in a infinite loop?  -- since calling the aspx page from combres.xml would trigger a call to CombresUrl() which seems to parse combres.xml again, which calls the aspx page ... and around and around we go?

Coordinator
Dec 6, 2010 at 7:51 AM

Interesting idea.  I didn't think about reentrance when designing Combres, so infinite loop could be an issue.  I've added a tracking ticket to remind me working on it later.