We Keep Coding

Code inside setTimeout is not firing in expected order

newby newb here...I don't think this specific issue has been addressed before on this site, I've searched and searched but can't find anything that works. I want to display a loading image. I am hiding it before my setTimeout and then showing right at the end of the setTimeout. Everything I've read said this should work but it doesn't. My image appears and then disappears right away before my script is finished running. Any ideas? Thanks!
function createHTML(data, listName) {
var arr = data.d.results;
$(".save").on("click",function(event){
// HERE IS WHERE I SHOW MY LOADING IMAGE INITIALLY
$('.logoImg').show();
// SET TIMEOUT FUNCTION
setTimeout(function() {
$("input.title").each(function(){
var title = $(this).val() ? $(this).val() : null;
var currentUserRequest = GetCurrentUser();
(function (userData) {
updateListItem(_spPageContextInfo.webAbsoluteUrl,'MyList',id,itemProperties,printInfo,logError);
function printInfo() {
console.log('Item has been UPDATED!');
}
function logError(error){
console.log(JSON.stringify(error));
}
});
});
// THIS IS FIRING BEFORE THE ABOVE EACH STATEMENT
$('.logoImg').hide();
}, 0);
});
}

The callback function passed to each will be called for each element that matches the selector.
It looks like you want to call hide() only after the callback has been called for all the elements.
To accomplish this, you need to call it after the last callback.
Something like this should works:
var titles = $("input.title");
var length = title.length;
titles.each(function(index, element) {
// Do what you need
if(index == (length-1)) {
// We are now on the last one
$('.logoImg').hide();
}
});

.change() only running once and not at click

I've got a JS file that's automatically run through an HTML script. A function putToggleCall() is supposed to run every time one of the many toggles is clicked but instead it only runs once, before the document is even ready(based on my other functions). I know this from the console.log() inside my function. The goal is to simplify the code so that all the bootstrap toggles can use one PUT call function on change (i.e. onclick).
var toggles = {
"#rando": "random/url",
etc..
};
function putToggleCall(toggle_id) {
var value = $(toggle_id).prop("checked") ? 1:0;
console.log(value)
$.ajax({
url: BASE_URL + toggles[toggle_id],
type: "PUT"
}).done(
).fail(function(data,textStatus,errorThrown) {
alert(errorThrown);
});
};
for (var i = 0; i < Object.keys(toggles).length;i++) {
var toggle_id = Object.keys(toggles)[i]
$(toggle_id).change(putToggleCall(toggle_id));
})

You're calling the function, not referencing it.
You either need a wrapping anonymous function
$(toggle_id).change(function() {
putToggleCall(toggle_id)
});
or just reference the function
$(toggle_id).change(putToggleCall);
and find another way to pass the data (hint: it's available as this.id, or even just this in the function)

How do I pass a parameter to this Google ReCaptcha function?

I am having an issue getting the count parameter to pass into the verifyCallback in the following piece of code:
var CaptchaCallback = function () {
console.log('CaptchaCallback run');
var count = 0;
$('.g-recaptcha').each(function (index, el) {
grecaptcha.render(el, {
'sitekey': 'xxx',
'callback': verifyCallback(count)
});
count++;
});
};
If I remove the parameter everything works as it should, only the parameter can't be passed for an essential part of the function.
If I add the parameter the function runs straight away without waiting for the ReCaptcha to be verified.
I want to be able to pass the parameter and then have the function run when the ReCaptcha is verified.
Here is the function that the parameter is passed to if it helps:
function verifyCallback(formNumber) {
//var formNumber = 1;
console.log('verifyCallback');
$('#submitBtn_' + formNumber).prop('disabled', false);
console.log('#submitBtn_' + formNumber);
}
Edit: When I use the parameter it doesn't bring the count through, it brings back the response from Google...
Thank-you

The issue is because you're calling the verifyCallback function immediately and assigning the returned value of that function to the callback property.
To fix this, wrap the function call in an anonymous function which is then provided as a reference to the callback. Also note that you can use the index value from the each() handler instead of manually maintaining the count variable. Using this method will also mean that you don't need to use a closure to keep the count value in scope of the current iteration. Try this:
var CaptchaCallback = function () {
console.log('CaptchaCallback run');
$('.g-recaptcha').each(function (index, el) {
grecaptcha.render(el, {
sitekey: 'xxx',
callback: function() {
verifyCallback(index)
});
});
count++;
});
};

Closing showWaitScreenWithNoClose in SharePoint CSOM

I am creating a list using REST APIs. In my JavaScript code I have written something like this:
// If I declare 'waitDialog' then it is not get closed by
// calling 'waitDialog.close()'. Without any declaration it works.
var waitDialog;
function createList() {
// Show wait dialog
waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose("Please wait...", "Please wait...", 100, 300);
jQuery.ajax({
// List data
},
success: doSuccess,
error: doError
});
}
function doSuccess(data) {
waitDialog.close(); // Close wait dialog
}
function doError(data, errorCode, errorMessage) {
waitDialog.close(); // Close wait dialog
}
If I declare waitDialog with statement var waitDialog; then it does not work by calling waitDialog.close(). Without any declaration it works and the dialog is closed. I found this question which elaborates on the difference between using var, but nothing which would clarify this case.
Any idea why does it work without declaration and not with declaration?

I could not recreate your declaration issue.
One thing I noticed... I believe you need to pass the SP.UI.DialogResult enumerable to the close method
waitDialog.close(SP.UI.DialogResult.OK);

//show and hide waiting on it javascript
function waitMessage() {
window.parent.eval("window.waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose('Processing...', '', 90, 300);");
}
function closeMessage() {
if (window.frameElement != null) {
if (window.parent.waitDialog != null) {
window.parent.waitDialog.close();
}
}
}

Phonegap wait for database transaction to complete

I'm creating a Phonegap application that will perform differently on first run. The way that I am detecting the first run is by seeing of one of the database tables exists. As you can probably tell from the code below, I am checking for the error that is (probably) indicating that the table already exists, thus proving that this is not the application's first run.
function databaseExists(){
var exists;
database.transaction(function(tx){
tx.executeSql('CREATE TABLE GLOBAL (uid, property, value)');
}, function(err){
exists = true;
}, function(){
exists = false;
});
return exists;
}
My problem, however, is that the asynchronous execution of the Javascript code means that the function returns its value before the success (or error) function has set it's value.
This function is called in the initialising stage of the application:
if (databaseExists()){
// Do Something
}
And therefore must return the value rather than execute the function in the success callback of the transaction.
Is there a way to force the execution to wait until the database transaction is complete or return the value through the database.transaction object?
Thanks in advance,
Jon

You need to write it in callback form:
var dataBaseExists(yep, nope) {
database.transaction(function(tx) {
tx.executeSql('CREATE TABLE GLOBAL (uid, property, value)');
}, function(){
if (yep) {
yep.apply(this, arguments);
}
}, function(){
if (nope) {
nope.apply(this, arguments);
}
});
};
var itDoes = function() {
console.log("great");
};
var itDoesNot = function() {
console.log("what a pity");
};
databaseExists(itDoes, itDoesNot);

You need callbacks, but if don't need checking existment of your tables, you can do that easily with localStorage.
e.g.
if(localStorage.getItem('init') === null){
//init
localStorage.setItem('init', true);
}
You will avoid dealing with database.
and maybe this gonna be helpful "CREATE TABLE IF NOT EXISTS..."

I know there's gonna be programmers don't like my solution, but I love it!
var myfEspereti=false;
function Espereti(pStatus)
{
if (pStatus==="wait")
{
myfEspereti = true;
while(myfEspereti)
{
}
}
else if (pStatus==="go")
{
myfEspereti=false;
}
}
and then call Espereti ("wait") when you want to wait for an async call. Inside the async call, when it's finish, call Espereti ("go") and that's it!