What is the best way to use ready and ajaxStop together in jQuery? Currently I am using:
jQuery(document).ready(function($) {
$(document).bind('ready ajaxStop', function() {
$('[rel=tooltip], [data-toggle="tooltip"]').tooltip({
html: true
});
});
});
To me it seems redundant to use ready inside ready. It was the only think I could think of without duplicating code. Is there another event I should be calling with ajaxStop instead of ready? Or is there a better way to initialize my tooltip, along with a few other plugins and custom JS, which needs to be loaded on ready as well as when my page is reloaded via Ajax.
You can also solve this by firing a custom event every time page is reloaded with ajax or otherwise when the page content changes.
Also you don't need to handle ready again. Abstract the tooltip initialization code in another function, call the function directly or trigger the custom event.
Related
is there a way to be notified when a function is registered via the jQuery $(document)ready() functionality and get a reference to that?
The background:
Im using a parent theme on a wordpress site, which uses ajax page transitions and document ready is only called on the first load. Now i want a reference to each function previously registered to call them again if my page changes.
The goal: is to restore the functionality of $(document).ready() as not only me, but many other plugins out there are using it and i obviously dont want to rewrite them all.
Yes, i could call MY registered function with no efford but this feels kind of lackluster while destroying the underlying functionality. By the way: it is the parent themes transitions, so overriding this wouldn't be the best solution either.
What i want is to provide an addition, that intercepts every registration and calls the registered functions again manually after the transition. Is that a good idea?
(notice calling ready() manually doesn't work if it was called already automatically on the initial page load)
why dont you wrap them all in a onPageChanged function and call that on document ready, and in the success handler from ajax calls
I need to make a change to an old page as quickly as possible, and the effort to AJAX-ify it in order to obviate postbacks would take too long (making a more correct version of it will have to come later, this new functionality needs to be in place ASAP). The javscript changes required are too complicated to attempt entirely in the plain JS the page currently uses for everything (it's enough of a mess as is), so I decided to implement the new functionality quickly using jQuery.
Everything works fine until there's a postback, after which the document ready function still runs, but the selectors no longer find anything. I'm not using ASP.NET AJAX, so there's no UpdatePanels or partial postbacks.
What's happening and how can I fix it in the simplest, fastest possible way?
While $(document).ready() is ideal for one-time initialization routines, it leaves you hanging if you have code that needs to be re-run after every partial postback. Of course there are ways to get around this. But can you try using .NET franeworks pageLoad() and bind your events there and see if selectors still work after postback.
<script type="text/javascript">
function pageLoad() {
$("#Button1").on('click', function () {
...
});
}
</script>
If you have a a trigger attached to the DOM, and that element in the DOM gets replaced, the trigger will be lost. Such a trigger might look like $('#mydiv').on('click', function(){});.
Instead, you have the attach the trigger to a DOM element that wont be replaced. The easy way is to attach this to the document, but you'd be recommended to narrow the search.
Such a selector would look like
$('document').on('click', '#mydiv', function() {});
This means that if the element #mydiv gets recreated, then the trigger is not lost.
You can read more about delegated events at http://api.jquery.com/on/
Whenever we go to a website, the browser enters a "loading" state (spinner in place of favicon) till the site is loaded.
Which jquery event is fired when browser comes out of the "loading state"?
$(document).ready(function() {
// put all your jQuery goodness in here.
});
you can try anyone of :
window.onload or document.ready
It would definitely help if you explained what you were trying to do. But since you asked for an jQuery event that fires when the browser has loaded the page, I would suggest you use the jQuery ready handler.
All three of the following syntaxes are equivalent:
$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)
The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.
EDIT: Since we need an event when the browser has completed loading the page and all its resources, the jQuery .load() method would be more suitable.
The load event is sent to an element when it and all sub-elements have been completely loaded. It is a shortcut for .bind('load', handler).
I am developing a jQuery Mobile and PhoneGap app. I am using this code:
$('#contact').live('pageinit', function() {
//$.mobile.loading('show');
theme();
getData('contact/list',contactList);
//$.mobile.loading('hide');
});
When accessing page for the first time, it works good. In second attempt event is firing multiple times. I tried using bind but it doesn't work.
I think it is connected with live event. It is binded each time I initialize the page, which makes it multiple. Problem is solved when linking that way: window.location.href-it recreates DOM. Unfortunately I can't use it.
Is there any way to handle pageinit in another way?
I tried to find it earlier but with no success. Also looked at: click() firing multiple times
In theory, any event that can be bound by 'live' can be bound directly. The benefit of binding directly is that it will (iirc) overwrite the previous bound handler. As such, you would only have one handler, so it wouldn't get triggered multiple times on subsequent loading.
try something like:
$("#contact").pageInit(function() {
theme();
getData('contact/list', contactList);
});
I usually use the on() method instead of live() (which is now deprecated). I give each of my page containers an id, so on the index page it might be index, then I can bind to the event like:
$(document).on("pageinit", "#index", function() {
//do stuff here
});
Works same way for page show also.
When binding events in jquery mobile, you have to be very cautious as to ensure that they will not be bound multiple times. Navigating to a new page in jquery mobile will not "reset" the bound events as it would in more traditional navigation.
The issue your facing is most probably due to the function being bound to the event every time you access the page, meaning that the more you access the page, the more times you will get that function to be executed when you do.
In order to ensure the event is only bound once, I would recommend binding in the header of your initial page. This way, the event is bound once and for all, and the function will be run whenever this page is initiated.
You can try adding data-ajax="false" to any forms you are submitting that may be creating multiple versions of the page (firing events multiple times).
I was wondering if there are any repercussions I can expect when changing from
$(document).ready(function() {...})
to
window.onload = function() {...}
The reason being I am making a widget and do not want to enforce a jQuery include in case the user already has it included in their app, nor do I want them to have to modify the widget code -- so I am dynamically determining if I should include it.
However, in order to dynamically include it, I do not have access to jQuery before the window.onload, which brings me to my scepticism.
My main worry is that this will disrupt the functionality of the user's app. So... will it?
Thanks in advance.
Your function will actually fire in a different point in the page lifecycle. onload is called early in the lifecycle before all the page elements are necesarily loaded, whereas the ready event fires later. If you want to attach to the event without using jQuery, you can easily do that too:
document.addEventListener('DOMContentReady', function()
{
// Stuff
});