window.onload vs jQuery(document).ready - javascript

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
});

Related

Notification when function is registered on e.g. $(document).ready()

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

JavaScript Function on Injected Content

So something I'm curious about, how the YUI3 PJAX works. For instance, when used, even if you inject an anchor into the page with the yui3-pjax class and click it - that will run the AJAX function.
My question is does that use a Promise or what to determine if the anchor, including injected anchors, has the class?
I have a function for observing mutations for a site and I call it on the click event for the yui3-pjax anchors already existing in the page, but I also want to have it run on yui3-pjax anchors that I dynamically load into the page without having to recall the function.
Using jQuery for the ease of sample code, a similar solution can be written in vanilla Javascript as well.
You can use .on() with a selector parameter. For example:
$('body').on('click', '.class', function(e) {
e.stopPropagation(); //Stop multiple possible triggers from the same click
//TODO: Rest of code
});
The downside obviously being that every click on your highest common ancestor will get processed. The upside is however that since the click is caught there (not on the elements themselves) you don't have to worry about rebinding events.

jQuery selectors not working after ASP.NET postback (no UpdatePanels, not AJAX)

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/

Is there a way to extend a jQuery event handler that is already bound?

I've written a code that clears the form on every reset event like that:
$("form").on("reset", function(event) {
event.preventDefault();
$("form").clearForm();
$("#reportGenerated").empty();
});
This code is inside an external js loaded in every page so this handles the entire system.
In one specific form in my system I have three inputs that loads Ajax requests into another parts of the page, then when I try to reset and clear the form the information provided by the Ajax request isn't cleared.
So my question is, is there a way I can extend my functionality above without being forced to copy/paste what it already does?
I've read the jQuery Event Extension but does not seem to do what I need, plus, is quite "dangerous" to do it if you don't know exactly how every browser and its version handle JavaScript events.
You can easily add another click handler with will run along with this one(no need to do anything in the already existing handler).
$("form").on("reset", function(event) {
//do your custom stuff here
});

Binding jQuery ready and ajaxStop

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.

Categories

Resources