I am loading a file in JQueryUI tabs, when I include the jquery file in the called file i am getting errors while switching tabs, I thought its due to conflict of the jquery as it is included in both calling and called files, the problem was solved when I removed the link from the called file. Now the file is loaded in tab, well I have something like few jquery operations to be done in that tab, as the jquery is not included I am unable to perform any stuff in that tab, what is the solution, how did they design those tabs so that a user cant include the main jquery file in all the ajax called files. Is there a solution or this is a bug or shall i give up using jqueryUI tabs?
Thanks
The content of the tab is part of the main page, which has jQuery in it. So you can select elements from the tab and call jQuery methods on them as if they were part of the main page. In fact, by the time you are able to call jQuery methods on anything on the page, i.e. after document.ready, it is part of the main page.
If you couldn't use jQuery with jQuery UI, you wouldn't be able to use jQuery UI, because that itself uses jQuery...
Related
I've got a website that I'm converting into an app using JQM. I've read about Pages and how the DOM loads but I'm still uncertain how to architect the site.
The main page of the application is based on the Google Maps API which uses JS to load. There are 150+ target pages so I don't want them to load until the user taps the link. All of the target pages also require JS to initialize. When they return to the main page the cached state should be the default but I also need the option to run JS if the query string changes. Content doesn't change often so my preference would be to cache data once loaded but there would need to be some way to flush the cache.
I converted the site to JQM. The target page JS didn't run so I added rel='external' to the links. The JS now runs on the target but when I link back to the main page it reloads the page without running initializing the JS. The obvious solution would be to add rel="external" but then I'd be defeating all performance value. Any recommendations on how I should structure it?
Using rel=external your links will not be loaded with Ajax and you will lose animated page transitions. If you want to run some script when a page displays, use this page event:
$(document).on("pageshow", "#selector", function(event, ui) { /* your code */ });
This and other useful events are described in jQuery Mobile API Documentation.
For example, pagecreate (the now deprecated pageinit) is called once when the page initializes.
About getting query string parameters, see this answer.
I included an external javascript file on a jquery mobile page. The javascript file modifies some html and css snippet generated at the server. I've tried putting the jquery code that modifies the markup in the following jquery mobile events -
pageinit, pagecreate, pageshow, pagebeforecreate
But the script doesn't modify the loaded markup on page load, but on page refresh, it works perfectly. So I'm trying to find a way to make the modification take place before the page renders.
Any suggested will be gratefully valued.
I've solved my problem. I included all the external javascript and css files on the index page, and it worked well.
This is because jquery mobile loads subsequent pages through ajax, after loading the first page.
I want to use just the slide transitions / AJAX navigation component of jQuery Mobile. On jQuery Mobile's website they have a "Custom Builder Tool" which lets you select just the "AJAX Navigation System" (and it auto-selects associated stuff like transitions).
http://jquerymobile.com/download-builder/
This yields some custom JavaScript and CSS files. For the life of me, I can't get this to work on a webpage. If I include these custom files, then add data-transition="slide" to an anchor element, nothing happens. If I include the full jQuery Mobile library it works perfectly (but screws up the styling of my mobile site). How can I make this work? Maybe one needs to initialize the custom jQuery Mobile manually? I can't find anything in the docs about this. Help!
Here's how I got this to work:
I included the latest jQuery Mobile js but used the stripped down css from my custom JQM build (using the Custom Builder tool).
data-role="page" was added to page content containers. Some scripts called in needed to be moved to now load from within the content containers. Now transitions work as expected.
I hope this helps somebody.
I have a set of jqueryui tabs that, when clicked, load in their content dynamically. It works great, except that one of the pages uses a jquery plugin itself. This results in two issues:
The main page that holds the tabs throws an error when loaded because there is js that refers to elements that haven't loaded yet (those elements are in the external file that contains the code that relies on the plugin).
If I embed the js that triggers the plugin functionality into the external file, it is outside of the document.ready function from the main page and therefore isn't usable.
Basically I am looking for a technique that allows me to ajax load an external html file into the DOM while not crapping out the main page itself because JS that is already there is expecting HTML which is not yet there.
Thanks.
I haven't used it yet, but I think that this is what you are looking for
Listen
This plugin brings a clean, light solution, to websites with dynamic loaded content, or full of event bindings.
Intead of bound, handlers for events, are registered along with matching selectors.
And they'll still work for new added content.
This is achieved, using Event delegation, so the plugin will only work for events that bubble
You need to encapsulate your jquery code inside of the $(document).ready() function. If you're saying the code that's waiting to load via AJAX may or may not be loading at the same time as the parent page (i.e. a user has to click the tab to load it, vs. it being the default load) then you're design is bad and you'll have to rethink the approach. Basically you can't have code in your parent page referencing DOM elements that don't yet exist, and may not exist until your user clicks a tab.
Does anyone use jQueryUI (such as the CSS framework part) without the jQuery component? If you were catering for users who don't have javascript or who have it disabled etc
A particular scenario would be the dialogs which are so brilliant and simple...without javascript its just a div though...would a potential solution be to have the dialog div with a class that positions it absolutely and above other elements and then to remove that class when jQueryUI sets up the dialog...so that if javascript cannot run the dialog still has the class?
or would you use the css framework to create the dialog manually perhaps...
I have used jQuery UI's classes to style things 'consistently' when JavaScript is turned off. You just use the classes that jQuery UI applies to elements, and include the jQuery UI stylesheet and resources.
For example, if you had
This is a button
And you ran the jQuery UI JavaScript:
$("#abutton").button();
It would alter the markup to:
<a href="#" id="abutton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
<span class="ui-button-text">This is a button</span>
</a>
Giving you a nice jQuery UI button. But only once the JavaScript has run will this be applied. If a user doesn't have/allow JavaScript, then you'll get an ugly link being used. Instead, you should use the jQuery UI classes at the start:
This is a button
It will have the basic jQuery UI styling before the JavaScript runs (the structure is different though - the span isn't there, and if you had the span initially it adds another one anyway, which IMHO is a bug). The thing is that you want the JavaScript to run still, because it adds other things, such as mouseover effects (and the span mentioned earler), so that users that DO have JavaScript get the full experience, but you also want to use jQuery UI classes by default because you want some consistent theme (even if it's not 100% perfect).
For more info about their CSS framework, check out http://jqueryui.com/docs/Theming/API.
If you want to have it to NOT use JavaScript, you'd have to have:
Initial page, does a post back
Server decides a popup needs to be done, renders the view with a dialog containing all the relevant dialog classes set.
User clicks button on popup, performing another post back.
Server renders view without the popup.
It is ugly, but you can't do dynamic HTML without scripting, right...
I use the CSS all the time outside of jQueryUI; I find it provides a much more consistent look-and-feel.
As for the rest of the question...whatt?!
and then to remove that class when jQueryUI sets up the dialog
How do you plan on having jQueryUI run ("set up the dialog") without JavaScript being enabled? If you put the dialog up without JavaScript, it won't be able to move or close; you'll be stuck with a giant div in the middle of the screen.