Develop Reference

Can I make Javascript always call a method after JQuery Load?

We have started using jquery load in our site to load contents into a div rather than re-loading whole page. However in the complete function we have a method that re-applies various bindings. Is it possible to provide load method with a default complete function? So developers don't have to specify it in the jquery load complete function.
As we currently are providing a lot of duplicate complete functions
E.g.
$('#Target').load(callBackRedirect, function () {
ApplyBindings('#Target');
});
These bindings can't be applied using on and need to be re-applied on page loads. We also do some other work that we want to do on every page load.

The answer is no.
You need the callback because that's what the method calls when the request is done.
This works with on method to, you might be doing something wrong out there in the code.
You could create a helper function for this.
function loadSomething(targetElement, uri,callback) {
targetElement.load(uri, callback);
}
loadSomething(
$('myElement'),
'mylink.com/content',
function() {
applyBindings($(this));
}
)

Yes. Check out the list of Global AJAX Event Handlers.
e.g.
$(document).ajaxComplete(function() {
alert('Triggered ajaxComplete handler.');
});
That said, you shouldn't need to reapply your bindings after an AJAX call. If you need to do this, you're probably doing something wrong. Check out jQuery.on, which explains how to bind to content which is added dynamically.

Try $.ajaxSetup:
$.ajaxSetup({
complete: function() {
ApplyBindings('#target');
}
});
EDIT
You could also make a named function like:
var ajaxApplyBindings = function() {
ApplyBindings('#Target');
// anything else...
};
And then pass it to load:
$('#Target').load(callBackRedirect, ajaxApplyBindings);

How to invoke code after an event is completed in Jquery

Simple question. I want to run a piece of code when an Event completes. How do I do that in JQuery
Example
$('#optNo').change(function(){
if ($('input[id="optNo"]:checked').val() == 'No'){
//do stuff
}
});
function QuickCal(){
//do some simple page specific logic
}
I want to run QuickCal() when the change is completed. I have seen this technique used on Ajax functionality. ie( AjaxCall(stuff).done(stuffaftercall))

Since you are not making an asynchronous call you can simply use mouseup event:
$("#optNo").mouseup(function() {
QuickCal();
});
or just:
$("#optNo").mouseup(QuickCal);

How to remove a callback function from jQuery widget

I have a widget that I am assigning a callback function to for a specific event.
The following code works and triggers my callback just fine.
$(selector).MyFancyWidget('option', 'onComplete', this._onComplete);
My issue is after the event fires I want to remove the callback from inside the _onComplete method.
onComplete is an event that gets fired in the widget using the _trigger method and works fine.
Doing something like
$(selector).MyFancyWidget('option', 'onComplete', $.noop);
Does not detach the callback ( i assume it is just adding another listener.
For clarity here is the code inside the widget that will trigger the event.
instance._trigger('onComplete', e, {currentTarget: instance});
So my question here is how do I remove that callback?
It's not that I don't want to fire the event anymore I just don't want to listen to it anymore.

The most straightforward way of doing this would be to make the callback only do something once. So wherever you define your _oncomplete function:
var completeRan = false;
this._onComplete = function(e, args) {
if (completeRan) {
return;
}
// Rest of your code.
completeRan = true;
return this;
}

Java script function to hold until save evenet execution is completed

I have a javascript function. In thi function i am calling a button event like below.
$("#btnSave").trigger("click");
My query is , Is there any way to keep the control here on this line until the saving is done?
I have some code written underneath this line and it is being overridden.
Any suggestions?

It would have helped if you've posted some code.
You can do it in 2 ways:
1.) Use polling. After the trigger call use a loop to check for a flag that you must set when the save is complete. A timeout is needed for saving CPU from intensive js processing.
2.) Put the code to be executed after the trigger call inside a function. Pass this function as a callback to the onClick function.
function onSaveClick(e) {
//do my save stuff
e.data.callback();
}
No. 2 is recommended.
//attach onclick event
$("#btnSave").click(onSaveClick);
//you onclick function
function onSaveClick(event, callback) {
//save data
callback();
}
//trigger
$("#btnSave").trigger("click", afterSave);
//after save stuff
function afterSave(){
//do more stuff
}

Use a callback.
Get the lines under the trigger line and pass to your save function as callback when the event has success.

jQuery ordered actions

Does anybody know how to make a jQery function that has more than one action and every action will be fired only after its precedent is complete like:
$('#myelement').addClass('loading').load(loadUrl).removeClass('loading');
here the first action which is adding the class name is ok, the second is also ok, but the problem comes with the last action which is supposed to remove the class after the load is finished, but here it will be fired even before the loading is finished and will cancel the first action so that it will look like none of the first nor the third action are present.
Thanks.

Here you go:
$('#myelement').addClass('loading').load(loadUrl, function() {
$(this).removeClass('loading');
});
This assigns an anonymous function as a callback for the load method, which will be invoked when the load operation is completed.

Try this instead:
$('#myelement').addClass('loading').load(loadUrl, function() { ($(this).removeClass('loading'); });
The .load() function takes a completion function.