The problem is that when I'm trying to show progress bar(just .gif) I don't see it. When execute step by step using chrome dev tools. I see it. When run without breakpoints I don't. It seems like it didn't manage to draw gif before start request but I don't understand why. the code is the following:
startLoadingAnimation();
var bill = model.save(data);
stopLoadingAnimation();
where startLoadingAnimation(); is:
function startLoadingAnimation()
{
var imgObj = $("#loadImg");
imgObj.show();
var centerY = $(window).scrollTop() + ($(window).height() + imgObj.height())/2;
var centerX = $(window).scrollLeft() + ($(window).width() + imgObj.width())/2;
imgObj.offset({top:centerY, left:centerX});
}
and stopLoadingAnimation() is:
function stopLoadingAnimation()
{
$("#loadImg").hide();
}
and model.save(data) finally goes to
SOAPClient._sendSoapRequest(url, method, parameters, async, callback, wsdl, forseArray);
Your best bet is to probably have your save method take a callback function as a second option ... that then gets passed down in to your _sendSoapRequest callback parameter and then you can take advantage of your stopLoadingAnimation function.
Pseudo-code
var bill = model.save(data, { callback: function() { stopLoadingAnimation(); } });
You'll need to modify your existing .save() function to handle that second parameter of options (if it doesn't already accept something).
Related
im totally new to node.js and i couldn't find a similar question for my problem. I'm sure it's easy to solve for one of u guys... at least i guess.
I'm trying to get a special paragraph of a wikipage using the npm mediawiki module for node.js! I get the paragraph using the pre-defined function as following:
bot.page(title).complete(function (title, text, date) {
//extract section '== Check ==' from wikipage&clean string
var result = S(text).between('== Check ==', '==').s;
});
Thats working. What i want is: to use "result" outside of that code block in other functions. I think it has something to do with callbacks but im not sure how to handle it as this is a pre-defined function from the mediawiki module.
The example function of the module to get a wikipage looks as following:
/**
* Request the content of page by title
* #param title the title of the page
* #param isPriority (optional) should the request be added to the top of the request queue (defualt: false)
*/
Bot.prototype.page = function (title, isPriority) {
return _page.call(this, { titles: title }, isPriority);
};
which uses the following function of the module:
function _page(query, isPriority) {
var promise = new Promise();
query.action = "query";
query.prop = "revisions";
query.rvprop = "timestamp|content";
this.get(query, isPriority).complete(function (data) {
var pages = Object.getOwnPropertyNames(data.query.pages);
var _this = this;
pages.forEach(function (id) {
var page = data.query.pages[id];
promise._onComplete.call(_this, page.title, page.revisions[0]["*"], new Date(page.revisions[0].timestamp));
});
}).error(function (err) {
promise._onError.call(this, err);
});
return promise;
}
There's also a complete callback function and i dont know how to use it:
/**
* Sets the complete callback
* #param callback a Function to call on complete
*/
Promise.prototype.complete = function(callback){
this._onComplete = callback;
return this;
};
How can i access the "result" variable by using callbacks outside the function of the module? I don't know how to handle the callback as it is a pre-defined function of a module...
What i want is: to use "result" outside of that code block in other functions.
You can't. You need to use the result inside that code block (that code block is called a callback function btw.). You can still pass them to other functions, you just need to do it inside that callback function:
bot.page(title).complete(function (title, text, date) {
//extract section '== Check ==' from wikipage&clean string
var result = S(text).between('== Check ==', '==').s;
other_function(result); // <------------- this is how you use it
});
I'm running a script on Facebook that requires me to get the IDs of people in my "friends" window (this might not be the most efficient way to accomplish this specific task, but since I'd like to know how to do this in general it's a good example).
This means that if I have more than a small number of friends I have to scroll down for Facebook to add them to the page.
I've added logic that scrolls the page down to the footer, but I don't know how to force my function that grabs the IDs to run after the content loads.
For now, I've resorted to using setTimeout for a few seconds - obviously, this isn't guaranteed to at the appropriate time, so I'd like to know how to do this properly:
var k;
function doit(){
k = document.getElementsByClassName("_698");
var g= Array.prototype.slice.call(k);
confirm(g.length);
// the confirm is just to make sure it's working
// (if i don't use setTimeout it'll return a smaller number
// since not all the friends were included)
}
window.addEventListener("load", function(){
document.getElementById( "pageFooter" )
.scrollIntoView();setTimeout(doit,3000);
});
Crayon Violent details how to accomplish this in his answer to JavaScript detect an AJAX event. The trick is to hook the underlying XMLHttpRequest object in order to detect when a request is sent.
I've re-written the logic there a bit to make it more suitable for your needs:
//
// Hooks XMLHttpRequest to log all AJAX requests.
// Override ajaxHook.requestCompleted() to do something specific
// in response to a given request.
//
var ajaxHook = (function()
{
// we're using a self-executing function here to avoid polluting the global
// namespace. The hook object is returned to expose just the properties
// needed by client code.
var hook = {
// by default, just logs all requests to the console.
// Can be overridden to do something more interesting.
requestCompleted: function(xmlHttp, url, method) { console.log(url); }
};
// hook open() to store URL and method
var oldOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url)
{
this.hook_method = method;
this.hook_url = url;
oldOpen.apply(this, arguments);
}
// hook send() to allow hooking onreadystatechange
var oldSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function()
{
var xmlhttp = this;
//hook onreadystatechange event to allow processing results
var oldReadyStateChange = xmlhttp.onreadystatechange;
xmlhttp.onreadystatechange = function()
{
oldReadyStateChange.apply(xmlhttp, arguments);
if ( this.readyState === 4 ) // completed
{
hook.requestCompleted(xmlhttp,
xmlhttp.hook_url, xmlhttp.hook_method);
}
};
oldSend.apply(this, arguments);
};
return hook;
})();
With this bit of code loaded in your userscript, you can then implement your logic as follows:
var k;
function doit()
{
k = document.getElementsByClassName("_698");
var g= Array.prototype.slice.call(k);
confirm(g.length);
}
window.addEventListener("load", function()
{
ajaxHook.requestCompleted = function(xmlhttp, url, method)
{
// is this the request we're interested in?
// (Facebook appears to load friends from a URL that contains this string)
if ( /AllFriendsAppCollectionPagelet/.test(url) )
{
// Facebook defers rendering the results here,
// so we just queue up scraping them until afterwards
setTimeout(doit, 0);
}
};
// trigger loading of more friends by scrolling the bottom into view
document.getElementById( "pageFooter" )
.scrollIntoView();
});
I am using d3.js to draw several bars. After the drawing is done, I want to change the color of selected bars, but it always fails. It seems drawBars() and updateColor() are called at the same time.
function redraw(data){
drawBars(data);
updateColor();
}
How can I ensure drawBars() is done before the updateColor() is called?
At first, I added the update function code at the end of drawBar, it didn't work. Later, I moved it to end of the redraw function, it didn't work either.
This is specific code:
function drawBar(drawData){
var w = 1060,h = 600;
d3.selectAll("svg").remove();
var svg = d3.select("#chart").append("svg").attr("width",w).attr("height",h);
uni.forEach(function(element,index,array){
$('.uni').css("top",function(index){
return (index + 1) * 18 + 28;
});
});
$(".rankingheader").css("display","block");
$("#switch input").prop("checked", false);
starData = drawData;
revCountData = drawData;
sentData = drawData;
bizCountData = drawData;
drawAxis(drawData);
drawStar(starData);
drawRev(revCountData);
drawSent(sentData);
drawBiz(bizCountData);
drawLineA(starData);
drawLineB(starData,revCountData);
drawLineC(revCountData,sentData);
drawLineD(sentData,bizCountData);
// cart is a list which stored the id selected by user
if(cart.length > 0){
cart.forEach(function(element,index,array){
d3.select("#starHoverLine" + element).attr("visibility","visible");
d3.select("#starHintText" + element).attr("visibility","visible");
d3.select("#revHoverLine" + element).attr("visibility","visible");
d3.select("#revHintText" + element).attr("visibility","visible");
d3.select("#sentHoverLine" + element).attr("visibility","visible");
d3.select("#sentHintText" + element).attr("visibility","visible");
d3.select("#bizHoverLine" + element).attr("visibility","visible");
d3.select("#bizHintText" + element).attr("visibility","visible");
d3.select("#lineA" + element).style("stroke","red");
d3.select("#lineB" + element).style("stroke","red");
d3.select("#lineC" + element).style("stroke","red");
d3.select("#lineD" + element).style("stroke","red");
d3.select("#starBar" + element).attr("fill","red");
d3.select("#revBar" + element).attr("fill","red");
d3.select("#sentBar" + element).attr("fill","red");
d3.select("#bizBar" + element).attr("fill","red");
});
}
}
Your two functions are not called simultaneously; they're called one after another. If it appears that they're being called simultaneously, one of two things is happening:
drawBars is starting something that finishes asynchronously (like an ajax request or an animation), or
drawBars is making changes that aren't shown by the browser immediately and you want to yield back to the browser briefly to allow it to show (render) those changes before calling updateColor.
If it's #1, then you'll need to look at the documentation for the asynchronous operation that drawBars is starting to find out how to know when it finishes. Usually this is a callback or a promise. Depending on which it is, you'll either need to pass updateColors into drawBars as an argument (so you can then call it from the asynchronous callback), or have drawBars return the promise and use the promise's then method to add updateColors to the queue of functions to call when the promise is fulfilled.
If it's #2, that's much simpler:
setTimeout(updateColors, 100); // Wait 100ms (1/10th second) and call `updateColors`
I'm writing a titanium app but I'm having an issue with the execution order of my javascript.
I have an event listener on a button. It's a reload button that clears a table, uses HTTPClient to GET a JSON array of 'appointments', saves each appointment, and refreshes a table list. The problem is I am executing the table delete first which should clear the table, then I get the appointments but when the app refreshes the datatable it's like it's doing it too soon and the new appointments haven't been saved yet because I'm getting an empty list. Now if I comment out the db.deleteAll line, each time I click reload the list is refreshed with the new (and existing) appointment data.
I need to make sure everything is done in order and only when the previous task is dfinished. So appointments.download() has to be executed AFTER db.DeleteAll and the list refresh has to be executed AFTER var allAppointments = db.All();
I think the problem is that the appointments.download() function has to make a HTTP GET call and then save the results and the other functions are not waiting until it's finished.
Here is the code:
btnReload.addEventListener('click', function(e){
var affected = db.deleteAll();
appointments.download();
var allAppointments = db.all();
Ti.API.info(allAppointments);
appointmentList.setData(allAppointments);
});
Here are the functions that are being called:
db.deleteAll():
api.deleteAll = function(){
conn.execute('DELETE FROM appointments');
return conn.rowsAffected;
}
appointments.download():
var appointments = (function() {
var api = {};
api.download = function(){
var xhr = Titanium.Network.createHTTPClient();
xhr.onload = function()
{
var data = JSON.parse(this.responseText);
var dl = (data.length);
for(i=0; i<dl;i++)
{
//p = addRow(data,i); // returns the **arr array
//Ti.API.info('Saving : '+data[i].first_name);
var contact_name = data[i].first_name + ' ' + data[i].last_name;
var start_date = data[i].start_date;
var reference = data[i].reference;
var comment = data[i].comment;
var appointment_id = data[i].quote_id;
var lastid = db.create(appointment_id, start_date, reference, contact_name, comment);
//Ti.API.info(lastid);
}
};
xhr.open('GET','http://********.co.uk/appointments/download/');
xhr.send();
return;
}
Any help most appreciated!
Billy
Synchronous calls give you coordination (code won't execute until any computation it depends on finishes) for free. With asynchronous calls, you have to take care of coordination. This generally means passing the dependent code as a function to the asynchronous code. The passed code is known as a "continuation", which means "the rest of the calculation, from a given point forward". Passing continuations around is known as (unsurprisingly) "continuation passing style".
To rewrite code in CPS, identify the point(s) where you need to coordinate the code (the call to appointments.download), then wrap the rest of the code in a function.
btnReload.addEventListener('click', function(e){
var affected = db.deleteAll();
appointments.download();
function () {
var allAppointments = db.all();
Ti.API.info(allAppointments);
appointmentList.setData(allAppointments);
}
});
In the general case, the return value becomes the argument to the continuation. Here, no return value for appointments.download is used, so the continuation takes no arguments.
Next, rewrite the asynchronous function to take the continuation and pass the continuation in the call.
btnReload.addEventListener('click', function(e){
var affected = db.deleteAll();
appointments.download(
function () {
var allAppointments = db.all();
Ti.API.info(allAppointments);
appointmentList.setData(allAppointments);
});
});
...
api.download = function(_return){
var xhr = Titanium.Network.createHTTPClient();
xhr.onload = function() {
var data = JSON.parse(this.responseText);
var dl = (data.length);
for (i=0; i<dl;i++) {
//p = addRow(data,i); // returns the **arr array
//Ti.API.info('Saving : '+data[i].first_name);
var contact_name = data[i].first_name + ' ' + data[i].last_name;
var start_date = data[i].start_date;
var reference = data[i].reference;
var comment = data[i].comment;
var appointment_id = data[i].quote_id;
var lastid = db.create(appointment_id, start_date, reference, contact_name, comment);
//Ti.API.info(lastid);
}
_return();
};
xhr.open('GET','http://********.co.uk/appointments/download/');
xhr.send();
return;
}
The continuation is named _return because the return statement can be modeled as a continuation (the default continuation). Calling _return in the asynchronous version would have the same affect as calling return in the synchronous version.
Currently you are making requests asynchronously which means you make a request and return from the function immediately, you don't wait for an answer. You should make your calls synchronous, I don't know what your conn and xhr really are but they might provide ways to make the execute() and send() methods synchronous. For example if you set the third argument of JavaScript's own XMLHttpRequest's open() method to false then send() method will not return until a response is received from the server, your connection classes might have the same option.
Move the call to delete the current appointments into the onload handler. That way you will delete the old and immediately add the new data.
i create in a javascript function a prototype window. in the window i load a site where the user has to select something. i want the javascript function to wait until the user selected something and then return the value of the what the user selected.
function showTargetDirectoryChooser(){
var win = new Window( 'dirchooser_' + new Date().getTime() , {className: 'alphacube', width: 320, height: 470, url: '/directories/choose', maximizable: false});
win.showCenter();
win.setDestroyOnClose();
// WAIT_UNTIL( win.content.contentWindow.Directory != null )
return win.content.contentWindow.Directory
}
i found here something i could maybe use - but i dont understand how to...
This is an asynchronous process; it’s probably better to handle this with a callback.
For example, couldn’t you use a closeCallback?
function showTargetDirectoryChooser(done){
var win = new Window( 'dirchooser_' + new Date().getTime() , {className: 'alphacube', width: 320, height: 470, url: '/directories/choose', maximizable: false});
win.showCenter();
win.setDestroyOnClose();
// This will ensure
win.setCloseCallback(function () {
done(win.content.contentWindow.Directory);
return true; // or return false if you don't want the window to be closed
});
return true;
}
With this, you would change
var chosenDir = showTargetDirectoryChooser();
// do something with chosen directory
into
var chosenDir;
showTargetDirectoryChooser(function (directory) {
chosenDir = directory;
// do something with the chosen directory
});
One option would be to use an event handler. When Directory is set via click or perhaps a change event, if that is fired, attach a handler which takes that event and passes it back to a function in your main window. This will require making your code asynchronous - so that you have a caller that calls showTargetDirectoryChooser() and a callback that takes the result of the directory as separate functions. It shouldn't be too complicated to re-architect your code there and break it up to the caller and the callback, though.
You can also use setTimeout and poll the contents of win.content.contentWindow.Directory like so:
function showTargetDirectoryChooser(){
var win = new Window( 'dirchooser_' + new Date().getTime() , {className: 'alphacube', width: 320, height: 470, url: '/directories/choose', maximizable: false});
win.showCenter();
win.setDestroyOnClose();
setTimeout("pollDirectory()", 500); // poll in a half second
}
function pollDirectory() {
if(win.content.contentWindow.Directory != null) {
callback(win.content.contentWindow.Directory); // you will need an asynch callback
} else {
setTimeout("pollDirectory()", 500); // poll in a half second
}
}
Doing it this way also requires that your code be asynchronous.
Another option is to look into jquery wait, but that is a timeout as opposed to waiting on a condition. Or there is a set of reactive extensions to JS, but that looks to be overkill for what you are doing. The concept of an observable may be something you want to look into, though.