I am a bit of a noob at Javascript and am writing an "autoresult" script that automatically gets the results of an as the user is typing. However, because the PHP backend is slow, I want the script to check and see if it has been 1 second since the last keyup. That way, the PHP backend won't be called unless the user is done typing. My idea was to use setTimeout and clearTimeout to handle this. However, my script doesn't work. Here is the input that calls the script:
<input type="text" id="inputbox" onkeyup="lookup_input(this.value,0);" />
"0" is a flag used to check whether a Timeout has been set. Here is the script:
var timeOut1;
function showQuery(input_myinput2) {
$.post("mybackendfile.php", {queryString: input_myinput2}, function(data){
if(data.length >0) {
$('#mydiv').html(data); //php backend stuff, don't worry about this
}
});
}
function lookup_input(input_myinput,flag) {
if(input_myinput.length == 0) {
$('#mydiv').hide(); //check to see if there is an input, and if not, hide the div that displays autoresults
}
else {
//the flag checks to see if the Timeout has been set
if(!flag) {
timeOut1 = setTimeout(function(){showQuery(input_myinput)}, 1000);
//change the flag to "1" so that if another key is pressed it will throw the else statement, and if the key is pressed soon enough, it will clear the Timeout
$('#inputbox').onkeyup('lookup_input(this.value,1)');
$('#mydiv').show();
$('#mydiv').html('Searching... ');
}
else { //if timeout has been set then and next key has been pressed
clearTimeout(timeOut1);
$('#mydiv').html('Searching... ');
timeOut1 = setTimeout(function(){showQuery(input_myinput)}, 1000);
}
}
}
any suggestions on how to access the showQuery function correctly and how to get this script to work? also, any suggestions on another way to do the autoresult stall besides using setTimeout/clearTimeout? thanks!
Underscore.js provides a neat debounce function that abstracts away this (often needed) feature.
Take a peek at the annotated source code on how it is implemented.
You really don't need the flag. The event handler should always clear the timeout and start a new one.
The way you've got it now, you're adding another, redundant event handler for the input element.
I also think you should move that code that shows the "Searching..." message to inside the timeout code, because it'd be a little misleading to show it 1 second before you actually do start searching.
Related
Working on a platform, to enable auto-ticketing functionality. For which a REST API request is used for ticket creation. Unfortunately, there are 2 requests popping simultaneously, which results in creating duplicated tickets.
How to handle such case and send only one of these requests?
Tried adding the 2nd request in the response callback of the first, though this does not seem to work.
if (flag == 1){
logger.debug("Node-down alarm-Request raised - +sitn_id);
clearTimeout(mouseoverTimer);
mouseoverTimer = setTimeout(function(){
logger.debug("Inside Call back function - ");
//function call for ticket creation
incidentRequest(sitn_id,confUtil.config.mule_url);
}, 10);
You really should show more of the code that makes the request, though it seems as if you are doing some ajax inside your 'incidentRequest', so I will presume that (if that isn't what you are doing, then please, show your code....) - and since you tags say javascript and jquery - well, here goes...
To stop the 'double send' in an AJAX call, it is simple:
function incidentRequest(sitn_id,confUtil.config.mule_url){
// stop the double by clearing the cache
$.ajaxSetup({cache: false});
// continue on with the AJAX call
// presuming the url you want is confUtil.config.mule_url
// and the data you want to send is sitn_id
$.post(confUtil.config.mule_url, 'sitn_id=' + sitn_id, function (data) {
// do cool stuff
});
}
Hopefully that will help you get moving. If not, then we will need more code of what is going on around all this.
I have the code and it is not working on first click, but on the second click it is working.
$("#btnCopiar").on("click",function(){
var clipBoardObj = new ZeroClipboard($("#btnCopiar"), {
moviePath: "../thirdparty/ZeroClipboard.swf"
});;
// Create your data here to copy to the clipboard and assign to a variable name data
var data = "DATA IS COMING FROM SERVER OT TEXT INPUT";
clipBoardObj.on("copy", function (event) {
var clipboard = event.clipboardData;
clipboard.setData( "text/plain", data );
});
});
<button id="btnCopiar">Copiar</button>
Even if I have initialized the clipboard outside the click event, it is not working
I wonder if this has to with the synchronous way you have written the code.
Your line var data = ... implies that the variable data is receiving its information from a call to the server that only happens right at that moment. (I'm making some assumptions about code you have deleted in order to make the question more concise and understandable, though I could be wrong about that.) That data is going to take a little while to arrive. However, immediately after that line you are using the data variable in the clipBoardObj.on("copy", function(event) {... function. The first time you run that function, the data will not yet have arrived. However, some time will elapse before the user clicks the button a second time. When that happens, there may have been enough time for the first call to the server to have returned, and data will have some data. Note, however, that the second time you run that function, it will only be using the data from the first call to the server, which may or may not be acceptable.
I am triggering a change event in my casperJS script which triggers an AJAX request like such:
casper.evaluate(function(i) {
$("form:eq(2) select option:eq(" + i + ")").attr("selected", "selected").change();
},i);
How can I make casperJS wait until the underlying AJAX request has been finished? Already tried to look at the docs but I am more or less stuck. Can anyone guide me into the right direction?
You can always do this in a static way using casper.wait.
casper.thenEvaluate(function(i) {
// change()
},i).wait(5000).then(function(){
// further processing
});
And hope that the request is done in 5 seconds, but maybe you lose some time waiting when the request is done much sooner than 5 seconds. The problem is that as soon as the request is finished doesn't mean that the page is ready/changed.
Another possibility would be to wait for the request to finish, but for this to work you will need to register for the success event of the request somehow. Most of the time you don't have access to this from the global scope. If you do then you can use
casper.thenEvaluate(function(i) {
window._someUniqueVariable = false;
registerSuccessEvent(function(data){
window._someUniqueVariable = true;
});
},i).waitFor(function check(){
return this.evaluate(function(){
window._someUniqueVariable = true;
});
}, function(){
// further processing
});
A more Casper-way of doing that would be to use casper.waitForResource, but then you would need to know the url beforehand or at least able to deduce it from the page.
In the general case, when the request comes back it does something to your page. So you should be able to waitForSelector with a new element or waitForSelectorTextChange or waitUntilVisible etc.
you probably missed waitForResource
from the docs: http://casperjs.readthedocs.org/en/latest/modules/casper.html#waitforresource
casper.waitForResource("you url here", function()
{
// place your code here
});
I have the following kludgey code;
HTML
<input type="search" id="search_box" />
<div id="search_results"></div>
JS
var search_timeout,
search_xhr;
$("#search_box").bind("textchange", function(){
clearTimeout(search_timeout); search_xhr.abort();
search_term = $(this).val();
search_results = $("#search_results");
if(search_term == "") {
if(search_results.is(":visible"))
search_results.stop().hide("blind", 200);
} else {
if(search_results.is(":hidden"))
search_results.stop().show("blind", 200);
}
search_timeout = setTimeout(function () {
search_xhr = $.post("search.php", {
q: search_term
}, function(data){
search_results.html(data);
});
}, 100);
});
(uses the textchange plugin by Zurb)
The problem I had with my original more simple code was that it was horribly unresponsive. Results would appear seconds later, especially when typed slower, or when Backspace was used, etc.
I made all this, and the situation isn't much better. Requests pile up.
My original intention is to use .abort() to cancel out whatever previous request is still running as the textchange event is fired again (as per 446594). This doesn't work, as I get repeated errors like this in console;
Uncaught TypeError: Cannot call method 'abort' of undefined
How can I make .abort() work in my case?
Furthermore, is this approach the best way to fetch 'realtime' search results? Much like Facebook's search bar, which gives results as the user types, and seems to be very quick on its feet.
You'd do well to put a small delay in before sending the request. If the user hits another key within 100ms (or some other time of your choosing) of the last there is no need to send the request in the first place.
When actually sending the request you should check to see if one is already if active. If it is, cancel it.
e.g.
if (search_xhr) {
search_xhr.abort();
}
don't forget to reset that var on a successful retrieval. e.g. delete search_xhr;
I have looked in lots of places for this, and I'm probably being an idiot because this is done a lot, but here's my situation.
I am trying to display a checkbox next to an e-mail field on my website iff the e-mail has not been used to register already.
What I have is something like this:
$('[name=reg_email]').change( function() {
if(!emailUsed()) {
//Update image to be a green checkmark
} else {
//Update image to be a huge red X
}
}
And my "emailUsed" function should be returning a Javascript boolean variable depending on whether or not the e-mail address is in the database. To facilitate this, I've created a script which will determine if it's there or not. So the emailUsed() function just needs to call the script and return, but I need to wait until readystate == 4 before I return, and all of the methods I have found for waiting for readystate to equal 4 prevent me from returning a value at all:
function emailUsed() {
var req = $.get('scripts/email_used.php?email='+$('[name=reg_email]').val());
//Wait for req.readystate to be 4
return req.responseText == 'True';
}
But nowhere can I find something that explains how to do this and still return a value. Everything seems to use callback functions and this and that, but I can't get THIS method to return a value.
Help, please!
Doing a busy wait for req.readyState === 4 is considered bad design practice. You're tying up the UI thread and preventing the browser from updating. If the server is slow enough to respond, the user will get prompted whether to cancel further processing.
If you take a look at $.get(), it takes a completion function as one of its arguments. You should perform your success/failure logic in this function. You can do this by disabling your Submit button until you get back a success message.
You're missing the point of asynchronous methods. The main point is that there is some calculation to be done, and you don't want to tie up the current thread waiting for that calculation. Therefore, long running methods should not return a value, but instead they should provide a callback that will be passed the status of the call, without making the entire app wait.
I would suggest the following
function emailUsed (callback) {
var req = $.get('scripts/email_used.php?email='+$('[name=reg_email]').val(),
function(data) {
callback(data == 'True');
}
);
}
$('[name=reg_email]').change( function() {
emailUsed(function(isUsed){
if (isUsed) {
//Update image to be a green checkmark
} else {
//Update image to be a huge red X
}
});
}