As far as I know, if you want to load JavaScript or CSS files together with a specific page that is automatically loaded via ajax then you have to put the CSS/JavaScript references within the <div data-role="page"> container.

Example:

<div data-role="page" data-theme="e">
  <script type="text/javascript" src="/js/jquery/plugins/plugins.js"></script>

In general, this works fine. However, somewhere along the way, the script url gets modified:

/js/some_sepcial_script.js bees e.g. js/some_sepcial_script.js?_=1299308309681

Where 1299308309681 is the current Unix timestamp which changes on every request and thus prevents caching. I am pretty sure that this is intended behaviour but does anyone know how you can prevent the timestamp from being appended to the script/CSS urls if you want to make the file cacheable?

As far as I know, if you want to load JavaScript or CSS files together with a specific page that is automatically loaded via ajax then you have to put the CSS/JavaScript references within the <div data-role="page"> container.

Example:

<div data-role="page" data-theme="e">
  <script type="text/javascript" src="/js/jquery/plugins/plugins.js"></script>

In general, this works fine. However, somewhere along the way, the script url gets modified:

/js/some_sepcial_script.js bees e.g. js/some_sepcial_script.js?_=1299308309681

Where 1299308309681 is the current Unix timestamp which changes on every request and thus prevents caching. I am pretty sure that this is intended behaviour but does anyone know how you can prevent the timestamp from being appended to the script/CSS urls if you want to make the file cacheable?

• javascript
• jquery
• jquery-mobile

3 Answers 3

Have you tried:?

$.ajax ({
    // Disable caching of AJAX response */
    cache: false
});

It should globally change ajax requests. I'm just not sure about external scripts.

[EDIT]

This is the source code involved for jquery mobile 1.0a3:

var all = $("<div></div>");
                //workaround to allow scripts to execute when included in page divs
                all.get(0).innerHTML = html;
                to = all.find('[data-role="page"], [data-role="dialog"]').first();

                //rewrite src and href attrs to use a base url
                if( !$.support.dynamicBaseTag ){
                    var newPath = path.get( fileUrl );
                    to.find('[src],link[href]').each(function(){
                        var thisAttr = $(this).is('[href]') ? 'href' : 'src',
                            thisUrl = $(this).attr(thisAttr);

                        //if full path exists and is same, chop it - helps IE out
                        thisUrl.replace( location.protocol + '//' + location.host + location.pathname, '' );

                        if( !/^(\w+:|#|\/)/.test(thisUrl) ){
                            $(this).attr(thisAttr, newPath + thisUrl);
                        }
                    });
                }

Nothing on there adds a cache preventing param.

[EDIT 2]

I know this goes beyond troubleshooting to a work around but have you tried dynamically loading the js like explained here: http://www.javascriptkit./javatutors/loadjavascriptcss.shtml

(I know it can be done through jQuery but for testing purposes I'm trying to avoid jQuery)

if I include jQuery 1.4.3 instead of 1.5 everything works fine. That's a sufficient solution for me. Thanks again for your support.

Try running:

$.ajaxPrefilter("script", function (s) {
    if (s.cache === undefined) {
        s.cache = true;
    }
});

Does it change this behavior?