I am just playing around with jquery & query mobile…
I have added query.js and test to see if it loads
All okay.
I then test with $("#text1").toggle(2000);
And it works.
I now need to add Jquery mobile (so my lists are a mobile list)
I add the query mobile list js & css files and test as follows:
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
if ( $.mobile ) {
alert ('jq mobile loaded');
} else {
alert ('jq mobile not loaded');
}
Both alerts show they have loaded.
But I get this error in the console:
3361Unexpected CSS token: : jquery.mobile-1.4.5.css:3361Unexpected CSS token: :
I have tried loading the 3 files in different orders.
Any ideas what I am doing wrong here.
"When the user clicks a link in a jQuery Mobile-driven site, the default behavior of the navigation system is to use that link's href to formulate an AJAX request (instead of allowing the browser's default link behavior of requesting that href with full page load)"
You may find that jQuery mobile is using an AJAX request thus ignoring the head info ultimately not calling the CSS. Could be the problem, or not.
I think I tried it last night using a webserver and I got the same issue. If I load one of their demos fully into a widget It works.
I have had similar issues with jquery plugins before. The last time was a combination of making sure that the correct .js and css load in the correct order and not using the default built css and js but using the plugins builder to build a complete set.
Although I did try some of this last night I did not have enough time to dig deep into it.
One tip though is read the documentation on which .css and .js should be loaded first. This is important when using these type of plugins as they are normally linked and need to refer to one and other. If the wrong one is loaded first then it may try and speak to one that is not loaded yet.
In Hype I would put the plugins into the resources.
Then go to the head file and select and copy the links Hype has put in there.
Go back to the resources and select each plugin and uncheck include in head.
Go back to Head Paste the list back manually. and arrange them in the right order.
If I add the the necessary code into the header and use:
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
if ( $.mobile ) {
alert ('jq mobile loaded');
} else {
alert ('jq mobile not loaded');
}
I get that they are installed but the normal list (on the right) doesn’t get the jQuery mobile effect if I add all the script into the list ( on the left ) it shows.
I presume there but be a way to tell the list to use jQuery mobile.