Java script function to hold until save evenet execution is completed - javascript

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.

Related

JavaScript calling a function without parenthesis

A few weeks ago I was painfully able to dynamically add buttons to an HTML DOM object that has its own .on('click'.. handler, and use e.stopPropgation to stop these new child elements from firing the event.
The weird thing I did was call a function without any parenthesis. I have no idea why I did this or why it works, or why it does not work when I do attach parenthesis. I want to know if I am doing something by fluke and not design (and now I will add comments to it).
It goes as such:
//Container is the parent element
// var buttons stores the buttons with class 'buttons'
$('.container').on('click', function(){
$(buttons).appendTo($(this)).fadeIn(500).find('.buttons').click(tableButton);
});
function tableButton(e){
e.stopPropagation();
//do stuff
}
I can't figure out why I wrote the call to tableButton with no arguements or why it works perfectly. I tried to change the syntax to
.find('.buttons').on('click', function(e){
tableButton(e);
});
but then it no longer works.
Any help appreciated!
It works because you're passing a function to the click handler rather than calling the function yourself (the ()) An example of that:
var testFunction = function(msg) {
alert(msg);
}
var functionCaller = function(functionToCall) {
functionToCall('hello!');
}
functionCaller(testFunction);
functionCaller passes the message argument to testFunction(), but we only pass testFunction to functionCaller (without arguments)
For the part which doesn't work, isn't the function name tableButton() instead of tableButtons()?
See http://jsfiddle.net/g2PAn/
You don't actually call it, you just declare it and the arguments it accepts. The click callback is called with an argument indeed, but not by you.
The problem probably comes from the fact that jQuery calls your function with the element clicked bound as this, you could call table button like this:
.find('.buttons').on('click', function(e){
tableButton.call(this, e);
});

How to set order of events in javascript?

I have html-link, and I want to add event listener to <a> tag, so javascript function is called and after that brouser opens a link. I tried to use document.getElementById('link').addEventListener("click", myfunc);, but it works chaotically, sometimes myfunc is called, and after that link is opened, sometimes link is opened, so myfunc isn't called. How to set order of these events?
Code paths :
HTML :
LogOut
Javascript :
function LogOutWithoutReload(e) {
VK.Auth.logout(function () { });}
document.getElementById('logoutlink').addEventListener("click", LogOutWithoutReload);
What is your function doing? Is it some kind of aysnchronous event? If so then you would need to perform the default action in the success callback of the asynchronous task.
An example of this would be the jQuery .load function.
If your mufunc function were to call the jQuery load function it would return straight away, it will not wait for the data it self to be loaded. What you must do is use the second parameter in the load function as a callback for when the data has finished loading. This is the place you would then have your default action for the link.
This may be the issue you are experiencing with some other asynchronous task.
After you edited your code you have this line
VK.Auth.logout(function () { });
This looks like the logout function is indeed some kind of asynchronous call and has a callback function. I may be wrong and it may be doing something else you would need to check the docs, but to me you should be doing anything you need to do in that callback function (for example the redirect).
The event handler will always be called before the browser navigates away. My guess is that your function does not work sometimes, causing a exception and not stopping the default action. Have you tried debugging it? There should be some messages in your (error) console.
set the link's href attribute after your script is executed.
the link
<a href='#'>LogOut</a>
the code
document.getElementById("link").onclick = function(event) {
//your script here, if there is an ajax request,
// change location in your callback function
location.href = '<%= Url.Action("LogOut", "Account") %>'
}
To prevent opening of the link try:
document.getElementById("link").onclick = function(event) {
event.preventDefault();
myFunc();
}

javascript function is calling more than once

In my javascript code ( which is too long , so i can`t put it here ), functions are calling more than once , like suppose :
$("#button").bind({ click : Call }); // bind the Call with button click event
function Call()
{
alert("This message shows me more than once when i clicked the button");
}
if this alert message shows me more than once it means function Call() is calling more than once. Can anybody guess or tell me what's going on in my code? (Please don't ask me for code)
Works for me: http://jsfiddle.net/aC8Bm/
I'm guessing that you are binding more than once somewhere.
Also, I'd recommend either returning false from the Call function, or stopping event propagation.
One more thing: avoid naming functions with an uppercase -- that's reserved for constructor functions by convention.
You're hooking the event handler to the button the number of times 'Call' is being called. Do you have this code in something like a template or partial file?
Instead of doing this inside any function:
$("#button").bind({ click : Call });
Place the following somewhere outside:
$("#button").live("click", Call);
It will bind once for all existing and ever added #button

jQuery ajaxComplete called every time?

I have a question regarding .ajaxComplete().
Lets say I do this:
// Register an ajaxComplete (pseudo code ish)
$('#someId').ajaxComplete(function () {
if (ajaxCompleted == isAjaxImWaitingForToComplete) {
// something something
}
});
Then this will be called every time an ajax task finishes. Is there a way to make it only be called once, then unregister?
Could I add $('#someId').unbind(); at the bottom of the function inside the ajaxComplete?
The .ajaxComplete() function binds a handler for the ajaxComplete AJAX event, so calling .unbind('ajaxComplete'); should work.

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.

Categories

Resources