JS files loaded everytime a page is fetched via Ajax

[gesposito]

I'm using jQM 1.0.1 and with this simple two pages syntax (stripped down to show this issue) I have Javascript Files loaded everytime a page is fetched via Ajax

http://dl.dropbox.com/u/50523635/jQM/home.html

Even with cache enabled in jQuery. The same issue doesn't happen with CSS files.
Am I missing something?

Thanks.

[toddparker]

If you are using 1.0.1, we only support jQuery 1.6.4. When I test that first link, I get a page not found error so I can't really test this. I do see that you have scripts inside the body of the second page - are those the ones being loaded? This is a bit hard to follow, sorry.

[gesposito]

Yep, I'm trying to load the second page with Ajax and therefore its javascript is inside the data-role="page"

Here is a bug reproduction
http://dl.dropbox.com/u/50523635/jQM/home.html

The embedded script stacks on every page load. It happens when navigating back and forth.

[gesposito]

I updated to jQ 1.71 and jQM 1.1.0 RC1 and this issue still exists.
Hope this was useful.

[jaspermdegroot]

@tilt2k - The test page is offline again. If the problem still excist, please provide a test page using JSBin or JSFiddle so it will stay online. Here is a template that you can use http://jsbin.com/otepum/edit#html

[toddparker]

@tilt2k - Please respond with a new test page as @uGoMobi requested within the next week or so or we'll have to close as cannot reproduce. Thanks!

[gesposito]

Hi guys,
thanks for your interest, sorry for the delay.

Here is a new test page
http://dl.dropbox.com/u/50523635/jQM/home.html

You can navigate back and forth and check the console to see external scripts being loaded more than once (on every ajax page load).

Here is a proposal for a fix I've been using lately. Haven't had a chance to pull it yet.

In jquery.mobile.navigation.js at line 819

                // Avoiding script duplicates on pageload
                page.find("script").each(function () {
                    // Skipping inline scripts and templates
                    if ( $(this).is('[src]') ) {
                        // Issue: a script won't be loaded if it has a duplicate name (local path), a solution can be using ID from page
                        var scriptSrc = $(this).attr("src");

                        // Testing if the script has been already loaded to avoid duplicates 
                        // then appending new one to the document's head
                        // $.append doesn't solve this issue
                        if (!$('script[src="'+ scriptSrc + '"]').length) {
                            var el = document.createElement('script');
                            el.type = 'text/javascript';
                            el.src = scriptSrc;
                            document.head.appendChild(el); 
                        }

                        // Removing script tags from raw html page
                        $(this).remove();
                    }
                });

[toddparker]

Thanks @tilt2k. I think it's working as design at the moment but I agree that being smarter would be a good idea. I'm going to flag this as a feature request and close it - mind linking this up from the feature request wiki page?

If you do test out your suggested tweak and want to submit a pull request, we'd be happy to give it a look.

[gesposito]

Sure, done.