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.
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.
Long story short:
We've had errors being logged concerning a JQuery/JQueryUI based system for some time. At it's core we're doing a pretty basic click link -> JQuery AJAX GET -> Open JQueryUI modal pattern.
The error we were getting appeared simple - "Object doesn't support property or method 'dialog'" - leading us to believe there was an error with JQueryUI. After expending a lot of time ruling out browser incompatibilities, bad code on JQuery's end, bad code on our end, angry code gods... we caught a lucky break. A 100% repro on one of the machines in the office.
Turns out the thing was riddled with adware - specifically [an older version of] easyinline - http://www.easyinline.com. When the user clicked any link a cascade of javascript files would be loaded, including reloading JQuery from Google's CDN.
For most links this isn't really a problem - they take you off the page anyway and everything reloads. But for our modals it meant that every modal link would stamp over our JQuery at the point the request was sent, resulting in the response trying to make use of the 'new' $ which would now be missing JQueryUI and any other plugins.
Initially we thought about making another global var ($$ or something) for 'our' JQuery and explicitly using that in our code instead of just $. The issue with that is that we were using a few other 3rd party tools which rely on $ and the adware-loaded $ is a different (older) version. So it's important that we preserve $ correctly.
Any ideas? I'm aware of JQuery's noConflict() method but after a cursory glance don't think it fits the bill.
Ultimately we've decided to re-establish our JQuery integrity when we receive any ajax responses (i.e. just before the open modal code is executed). All our ajax stuff is wrapped in our own handler so this was fairly easy to inject across the board.
Basically;
We have the original JQuery 'saved' - we've got it in-scope thanks to our handler but it could be easily put into a separate global (like $$) just after it is loaded. In our ajax response handler we've got a fairly straightforward check;
if (window.$ !== $$) {
window.$ = window.jquery = window.jQuery = $$;
}
This will reset the global jquery back to what it should be.
well this is just a work around and not a full fledged solution.
you can try multiple things here
1. if you have control over what the adware loads then just put in something like this if(!$) where they try to load the jquery
2. try loading your plugin at the end of the page
3.even if end of the page is not working. Try injecting the link(a script tag using document.write) to the plugins CDN in the Jquery document ready event. this would ensure that the plugins code would be loaded at the end when all the jquery is already loaded (not a preferred thing).
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...
If one uses remoteFunction or one of the the Grails Ajax capabilities, rendering a template to update a portion of a page, how does one see any additions made to the Javascript functions associated with the resulting page in Chrome or Firefox?
In Chrome, one is able to see the updated page/DOM via going to their Tools -> Developer Tools menu item, then selecting "Elements". There, I'm able to use the magnifying glass to select a portion of the updated page that I want to see. But, how do I also see the additional Javascript functions added to the page.
NOTE: Originally this question requested to see both html element content and Javascript content. Karthick AK's answer handles both.
In Chrome->Developer tool-> Network tab,
For each request being sent the response obtained can be seen in the Response tab. The rendered content can be seen in here.
Similiar option exists for firefox/firebug.
Another ajax gotcha i have experienced is, sometimes the ajax requests are cached and hence onclick the content is served from the cache and not an actual requests hits the server. This is more prominant in Old IE browsers
When I have a Vaadin application does it download all the gui widgets to the client or does it download them on demand. I ask because I have some clients that only use some widgets but not others.
The default loading method is eager (EagerWidgetMapGenerator). You have a few choices for loading the widgets. Here are some of them:
Lazy
You can choose to use the LazyWidgetMapGenerator by adding this to your widgetset (.gwt.xml):
<generate-with class="com.vaadin.terminal.gwt.widgetsetutils.LazyWidgetMapGenerator">
<when-type-is class="com.vaadin.terminal.gwt.client.WidgetMap" />
</generate-with>
This will load the widgets only when requested.
Widget-defined
Same as above, but replace LazyWidgetMapGenerator with WidgetMapGenerator. This will use the widgets' loading preference and I believe most of them are DEFERRED.
Custom #1
Create a custom widget map generator by subclassing CustomWidgetMapGenerator and defining it in your widgetset (same as above but replace LazyWidgetMapGenerator with your class).
Custom #2
Create a custom widget map generator by subclassing WidgetMapGenerator (mostly deferred, defined by widgets) or EagerWidgetMapGenerator (every widget loaded EAGERly), setting only some of the widgets LAZY (or DEFERRED, or EAGER) and defining it in your widgetset.
For more info, check the API doc and this out:
http://dev.vaadin.com/wiki/WidgetSet
You can choose which widgets are loaded on start and which on demand. Default is to load them all on start.
Vaadin 14
This page in the manual seems to say that, if marked as invisible, your component is represented only on the server-side (in Java) and is not included on the client-side, does not appear in the DOM in the web browser. That is true if the component has not yet been rendered.
Once made visible the component is created in the DOM on the client. If turned invisible, the component remains in the DOM.
In all cases, while invisible, traffic ceases for events regarding that component. So while invisible, network usage is efficient.