How to set status with HTML5 Web Database api - javascript

I'm using the HTML5 Web Database API and I have a function that checks to see if the app needs to go and perform it's setup phase :
this.setupRequired = function() {
var status;
try {
this.db.transaction(function(tx) {
tx.executeSql("SELECT * FROM settings", [], function (tx,result) {
if (result.rows.length == 0) {
status = true;
} else {
status = false;
}
}, function(tx) {
status = true;
})
});
} catch (e) {
return true;
}
return status
}
I'd like to return true or false based on whether there is data in the settings table or not (or if the settings table doesn't exist). The status var isn't getting set, I'm guessing this is due to scope issues and the anonymous callback functions. I'm pretty sure I need to use a closure here to correct the issue but can't quite get it right.

I'd like to return true or false based on whether there is data in the settings table or not
You can't. It is not known whether there is data in the settings table at the time the setupRequired() method has to return. This will only be known when the SQL database has performed the query and invoked the callback function. That happens only after setupRequired() and the functions that led to it being called have all exited, returning control to the browser.
That's the whole point of the callback function being passed to executeSql(). The function is not executed right away, so status will not have been touched by the time return status is reached. What's more, any exceptions that occur inside the callback functions will not cause the catch(e) block to be executed, because the try...catch block will long have been exited by the time the function that was defined inside it is actually called. So this try...catch is effectively useless.
This is ‘asynchronous’ coding. Just because some code is below a function, doesn't mean the function's going to execute first.

You could probably set status as a property of the object or another object of your own making.
You could also check at each stage what 'this' is or what value status has using firebug.

Hmm, I don't have any experience using this API but it appears that you are trying to set a value in a callback function and then return that value from the outer function. Assuming the callback is asynchronous, this will not work. I think your best bet is to change your code to something like:
this.setupRequired = function() {
try {
this.db.transaction(function(tx) {
tx.executeSql("SELECT * FROM settings", [], function (tx,result) {
if (result.rows.length == 0) {
doYourSetupFunction();
} else {
//don't;
}
}, function(tx) {
doYourSetupFunction();
})
});
} catch (e) {
doYourSetupFunction();
}
}
So that the setupRequired function is reponsible for checking and triggering the setup.

Related

function that returns a value from webservice

I know this is a highly answered topic, but reading tons of posts I can't figure if my dilema has a solution as I want.
I want to write a simple function that returns the User Name passing the UserId. It will be used everywhere to multiple purposes.
function getUserName(userId) {
//...some code to retrieve the Name from a REST webservice like $.ajax or $.getJSON or anything else that helps me achieve my need
return name;
}
$('#txtUserName').val(getUserName(sessionStorage.userId));
//...
if (getUserName(sessionStorage.userId) == getUserName($('#inputUser').val())) {
alert('Error: User typed with the same name as '+ sessionStorage.userID);
}
I know that can rewrite it all to put callback's or whatever, but I want to know if there's any implementation that makes possible to write this simple function that returns a value from a PHP webService.
I imagine a function like this:
function getUserName(userId) {
var users ={
'me': 'Seak Oink'
, 'you': 'Who knows'
, 'jd': 'John doe'
};
return users[userId];
}
...but instead of having the fixed users object, i retrieve it from my php webService that gets it from a DB.
Using a callback, makes impossible to handle values. For example (if I'd use callback and assuming calling getUserName(userId, callback) handles the function call):
$('#txtUserName').val('');
getUserName(sessionStorage.userId, function(userName) {
$('#txtUserName').val(userName);
});
if ($('#txtUserName').val() == '') {
alert('user '+ sessionStorage.userId +' doesn't exist');
}
Instead, you could answer me to put it into the callback, but if need to call again my function, I must nest it to a callback again and again... I think it's a bad programming practice:
$('#txtUserName').val('');
getUserName(sessionStorage.userId, function(userName) {
$('#txtUserName').val(userName);
getUserName($('#inputUser').val(), function (userName2) {
if (userName2 == userName) {
alert('Error: User typed with the same name as '+ sessionStorage.userID);
}
//....here I must continue the code flow instead of continuing to caller's flow.
//...nesting, and more nesting... impossible to read code?¿¿?:
userpermission(userId, function(bAllowed) {
if (bAllowed) {
saveRecord(userId, sKey, sSomeText, function () {
alert('record saved -or not-');
// ...and continue nesting
});
} else {
alert('forbidden');
}
});
});
});
... instead of this simple code flow logic:
var lOk = false;
$('#txtUserName').val('');
$('#txtUserName').val(getUserName(sessionStorage.userId);
if ($('#inputUser').val() == getUserName($('#inputUser').val())) {
alert('Error: User typed with the same name as '+ sessionStorage.userID);
}
if (userpermission(userId)) {
lOk = saveRecord(userId, sKey, sSomeText);
} else {
alert('forbidden');
}
if (lOk) {
alert('record saved');
}
// ...continue the validation process or whatever
I understand the simple example of retrieving a value with a callback, but don't using it in code logic.
I've been read How do I return the response from an asynchronous call? and much more like that and understood, but I can't uderstand how to use retrieved values from different sources and apply the necessary logic. Basicly, how to order the chaos?
Looks like you're experiencing callback hell.
That happens when you have several asynchronous functions and you need to handle all their errors and success.
That's exactly for that case that promises have been invented.
If you don't have ES6, have a look on jquery promises, otherwise they are built-in : ES6 promise
They allow more readable, synchronous like code.
For example, you can do code like that:
$.when( // waits for two promises to be resolved
getUserName(userId)
.then(function(name) { // once name resolved, fetch profile (new promise)
return getUserProfile(name);
}),
getUserPoints(userId) // another independent promise
).done(function(userProfile, userPoints) { // the two above are done, I can move on and update the DOM
$("#profile").doSomething(userProfile);
$("#points").doOtherThing(userPoints);
});

Leadfoot's pollUntil() Not Triggering on Variable Value Change?

I currently am writing functional tests in Intern and have run across a small issue.
During the before portion of my test suite, I make an ajax call to an API to retrieve a variable's value. This variable being set is critical to the next step in the functional test, and therefore I want to halt the test until the variable is returned from the ajax call.
I read about Leadfoot's pollUntil() function and it sounded like it did what I needed to do. I wrote the following code:
var valueThatChanges = 0;
// ... (some functional test setup stuff)
//Ajax call that sets value of valueThatChanges
.then(function() {
return ajaxCall(valueThatChanges);
})
//valueThatChanges is initially 0 before/during ajax call
//Is set to a randomly generated value that is non-zero after response recieved
.then(pollUntil(function(valueThatChanges) {
return valueThatChanges !== 0 ? true : null;
},[valueThatChanges], 30000, 100))
.then(function() { //On success
console.log('Value is no longer zero.')
}, function(error) { //On failure/timeout
console.log(error)
})
});
However this does not work as the function enters the success callback instantly despite the value of valueThatChanges still being 0.
I understand that pollUntil() may not designed to handle situations like this (since I am not directly dealing with DOM elements in the pollUntil), but I am not sure why it does not work for this specific scenario.
It seems as though pollUntil() is not passing the updated variable on each call of it's polling function.
Can pollUntil() handle triggering an event on a change of variable value?
The general use case for pollUntil is a situation where you need to wait for something to happen in the remote browser. For example, pollUntil is often used to wait for a functional test page to fully initialize:
// ---------------------
// functional test (in Node.js)
this.remote.get('testpage.html')
.then(pollUntil('return window.pageIsReady ? true : null'))
// rest of test
// ---------------------
// remote test page (in the browser)
<script>
var pageIsReady = false;
require( ..., function ( ... ) {
// do setup stuff
pageIsReady = true;
});
</script>
If you're doing some bit of async stuff in your test setup that doesn't involve the browser, return a Promise from the before function in your test suite that will resolve when the async action is complete.
var valueThatChanges;
registerSuite({
before: function () {
return new Promise(function (resolve) {
// Assuming ajaxCall calls a callback when it's finished:
ajaxCall(function (newValue) {
valueThatChanges = newValue;
resolve();
});
});
},
test1: function () {
return this.remote
// rest of test
},
// ...
});

Alternative to throwing/catching errors with async code?

I'm used to throwing an instance of some error class and having them be caught somewhere down the line in the app, to account for user error.
An example might be validating the username:
function validateUsername (username) {
if (!/^[a-z0-9_-]{3,15}$/.test(username)) {
throw new ValidationError('Please enter 3-15 letters, digits, -, and/or _.');
}
}
$('#username').blur(function () {
try {
validateUsername($(this).val());
} catch (x) {
$('<p></p>').addClass('error').text(x).insertAfter(this);
}
});
But now I'm realizing that I can't use these same practices for asynchronous calls. For example:
function checkUsernameAvailability (username) {
$.get('/users/' + username).done(function () {
// Done = user returned; therefore, username is unavailable
// But I can't catch this error without resorting to something gross
// like window.onerror
throw new ValidationError('The username you entered is already in use.');
});
}
I could make checkUsernameAvailability accept a callback and/or return a promise and have it execute said callback with the availability of the username.
$('#username').blur(function () {
checkUsernameAvailability(username, function (available) {
!available && alert('The username you entered is already in use.');
});
});
But part of what makes exceptions so powerful is that they can bubble up the stack until they get caught, whereas if I had another function that called another function that called checkUsernameAvailability, I'd need to pass the result of this callback manually all the way until I get to the place where I want to handle it.
What are some of the alternative methods for passing errors up the stack? I can think of some of these, but none of them are as clean as native exceptions:
Passing a flag, or the ValidationError instance, to a callback (Node.js approach could work too, passing an error or null as the first argument, and the data as the second); but then, if I don't want to handle it at that point in the stack, I need to pass the error up manually
Or passing 2 callbacks to the checkUsernameAvailability function, a success callback and an error callback; this seems to have the same drawbacks as the previous point
Triggering a "ValidationError" event so I can listen anywhere, but make sure to return false; in the handler so it doesn't execute higher in the stack; however, this pollutes the event namespace and could make it unclear as to which event listener will be executed first; plus, it's difficult to trace an event to its origin using the console
in principal it is like this
function Exception (errcode) {
this.code = errcode;
}
...
try {
...
throw new Exception('alpha');
...
} catch (e) {
if (e.code === {something}) {
}
}
If it helps, I recently took the first release of the Rogue game written for UNIX in C and rewrote it for javascript to work in a browser. I used a technic called continuation to be able to wait for key entry by the user because in javascript the are no interrupts.
So I would have a piece of code like this:
void function f() {
// ... first part
ch = getchar();
// ... second part
}
that would be transformed in
function f() {
// ... first part
var ch = getchar(f_cont1);
return;
// the execution stops here
function f_cont1 () {
// ... second part
}
}
the continuation is then stored to be reuse on a keypressed event. With closures everything would be restarted where it stoped.

is there anyway to detect recursive method in javascript/jQuery?

I am working on small part of calculation code. I need to identify whenever recursive occur in javascript/jQuery and i need to terminate that recursive.
Is there any api to support this in javascript/jQuery?
You could implement your own recursive protection. There is nothing built into jQuery that would natively support preventing recursion.
function myFunc(arg) {
// if this function already executing and this is recursive call
// then just return (don't allow recursive call)
if (myFunc.in) {
return;
}
// set flag that we're in this function
myFunc.in = true;
// put your function's code here
// clear flag that we're in this function
myFunc.in = false;
}
myFunc.in = false;
You could also turn the boolean into a counter and allow recursion only up to a certain number of levels.
FYI, because JS is single threaded, this should only be an issue that might need protection if your function takes some sort of callback from code that isn't yours. If it's all your own code, then you should just make sure your own code won't cause this sort of problem.
Here's a little more foolproof version that protects the counter in a closure so it can't be manipulated outside the function:
var myFunc = (function() {
var inCntr = 0;
return function(args) {
// protect against recursion
if (inCntr !== 0) {
return;
}
++inCntr;
try {
// put your function's code here
} finally {
--inCntr;
}
}
})();
Note: this uses a try/finally block so even if your code or any code you call throws an exception the counter is still cleared (so it never gets stuck).
Another dodgy trick. If you use something like .bind(this) for recursion or if you use arrow function, it won't work.
boom();
function boom () {
if(arguments.callee === arguments.callee.caller) {
console.log('no recursion will happen');
return;
}
boom();
}
Simple solution could be a flag in a parameter
boom2();
function boom2 (calledRecursively) {
if(calledRecursively) {
console.log('no recursion will happen');
return;
}
boom2(true);
}

How can I make node wait? or perhaps a different solution?

I am using https://github.com/gpittarelli/node-ssq to query of a bunch of TF2 game servers to find out if they are on, and if so, how many players are inside.
Once I find a server that is on and has less than 6 players in it, I want to use that server's Database ID to insert into somewhere else.
Code looks like this:
for (var i = 0;i < servers.length;i++) {
ssq.info(""+servers[i].ip, servers[i].port, function (err, data) {
serverData = deepCopy(data);
serverError = deepCopy(err);
});
if (!serverError) {
if (serverData.numplayers < 6){
//its ok
currentServer = servers[i].id;
i = 99999;
}
}
else {
if (i == servers.length-1){
currentServer = 666;
}
}
}
And then right after I insert into database with https://github.com/felixge/node-mysql .
If I put a console.log(serverData) in there, the info will show up in the console AFTER it inserted into the DB and did a couple other stuff.
So how do I "stop" node, or should I be looking at this / doing this differently?
Update:
A simple solution here is to just move your if statements inside the callback function:
for (var i = 0;i < servers.length;i++) {
ssq.info(""+servers[i].ip, servers[i].port, function (err, data) {
serverData = deepCopy(data);
serverError = deepCopy(err);
// moving inside the function, so we have access to defined serverData and serverError
if (!serverError) {
if (serverData.numplayers < 6){
//its ok
currentServer = servers[i].id;
i = 99999;
/* add an additional function here, if necessary */
}
}
else {
if (i == servers.length-1){
currentServer = 666;
/* add an additional function here, if necessary */
}
}
});
// serverData and serverError are undefined outside of the function
// because node executes these lines without waiting to see if ``ssq.info``
// has finished.
}
Any additional functions within the callback to ssq.info will have access to variables defined within that function. Do be careful with nesting too many anonymous functions.
Original (nodesque) Answer
If ssq.info is an Asynchronous function (which it seem it is), Node is going to immediately execute it and move on, only dealing with the callback function (which you passed as a last parameter) when ssq.info has finished. That is why your console.log statement is going to execute immediately. This is the beauty/terror of node's asynchronous nature : )
You can use setTimeout to make Node wait, but that will hold up every other process on your server.
The better solution, in my opinion, would be to make use of Node's Event Emiters, to:
watch for an event (in this case, when a player leaves a server)
Check if the number of players is less than 6
If so, execute your query function (using a callback)
A good primer on this is: Mixu's Node Book - Control Flow. Also, see this SO post.
You should use a callback,
connection.query('INSERT INTO table', function(err, rows, fields) {
if (err) throw err;
//entry should be inserted here.
});
also the http://www.sequelizejs.com/ library is a bit more matrue, it could be an implementation problem with node-mysql

Categories