jQuery Ajax and setInterval Chrome Issues - javascript

I'm trying to a return the value of a given URL periodically using jQuery and setInterval. My code looks like:
$("form").submit(function() {
setInterval(function(){
$('#upload_progress').load('/upload_progress');
}, 5000);
});
This works perfectly in Firefox, but in chrome, the load() function never runs. I've treid using the $.ajax function as well with the same result.
Any ideas why this is only affecting Chrome (v11.0)?
Any help would be much appreciated!

For one, you are actually submitting the form. I'm pretty sure this places the browser in a state of "hey, i'm waiting on a redirect from the server." If you really want to poll and update the page, you probably need to do
$("form").submit(function(e) {
e.preventDefault();
// ...
}
Just as a start. In this context, it works for me. Here, I even made you a pretty little JSFiddle of it working: http://jsfiddle.net/plukevdh/sRe4k/. If you need redirection once complete, you might add more data to the callback (json or something) so that you can check to see if {status: 0-100 [percent], completed: true|false} and if completed or status >= 100, just change the window.location.

Is your code wrapped in a document ready check?
$(document).ready(function(){
// your code
});
If not, that may be why.

Related

How to handle multiple requests being sent in JavaScript?

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.

Getting jQuery autocomplete to run on change

I'm trying to get jQuery autocomplete to work, but I can never get the source callback to run.
$(function() {
$('#function_name').autocomplete({
source: function(request, response) {
$.getJSON('/autocomplete', {
search: request
}, function(data) {
response(data.comp);
});
}
});
});
This is the code I currently have, but the callback for source is never run. What needs to happen to make it run? How can I get it to run every time the text box is updated?
EDIT: I updated jQuery and it now makes the requests correctly. However, now the $.getJSON callback is not being called. so it never runs
function(data) {
response(data.comp);
}
Any reason why is might be doing this?
The reason seems to be that flask (which I'm running my site off of) doesn't return a response when requested by this ajax, but does if you just visit the page. I don't really know what's going on with that, but I guess the code is correct.

jQuery .live() on JS function - What event to use?

I'm trying to have a setInterval function to use .live() to get information from dynamic content loaded with AJAX. Here's what I have.
var auto_refresh = setInterval(
function () {
var msgid = $(".msgid:last").attr("id");
alert (msgid);
}, 5000);
Obviously this does not work on content that is loaded with AJAX. I can't seem to find any event that could be used for the live() function in this case. All I need is to fetch the last msgid that is loaded on the page every 5 seconds.
Any advice?
Thank you in advance.
As the guys mentioned as comments, your code seems to work, so I can only assume that you want a different way to handle it, perhaps something a little more 'jquery-esque'?
If all your requests are similar, and you know how to parse the response, you could try having a global handler...
$('body').ajaxSuccess(function(e,x,o) {
console.log(e);
console.log(x);
console.log(o);
})
as seen on the jquery website

arguments.callee question

I know it's possible to call the calling function, but is it possible to call the function calling that function. Ok ... that sounds a little confusing. Let me demonstrate:
pop.share(msg, function(response) {
if(response) response = true;
else response = false;
});
Basically a box pops up to ask the user to share. If the response is false I want to call pop.share ... thus displaying the popup modal forcing them to share. Ok, this is probably not good logic or practice for a live site.
I was just lying in bed and I got a though "can that actually be done". I was trying and trying with some test code and couldn't figure it out.
Edit: A do while would not work if it was a modal as it's not waiting for the users response, thus creating an infinite loop.
Try obsolete arguments.caller? But since it is obsolete, it is not useful for live site.
https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Functions_and_function_scope/arguments/caller
Try not obsolete arguments.callee.caller

Wtf IE7 - AJAX calls using setTimeout

I have tested this on Firefox, Opera and Seamonkey. It works fine. When it comes to Internet Explorer 7. It works but upto a certain point. I am making an AJAX call to a PHP script every few seconds. In IE7 it makes the first AJAX call and it retrieves the data but it doesn't do it again ever. Even though i have a setTimeout function in the else block. WHY? :(
startTime = setTimeout('getStatus()', 5000);
}//function convertNow
function getStatus()
{
$.ajax({
type: "GET",
url: "fileReader.php",
data: 'textFile=' + fileNameTxt,
success: function(respomse){
textFileResponse = respomse.split(" ");
$("#done").html("Downloading & Converting Video...<b style='font-size:17px;color:green;'>" + textFileResponse[0] + "</b><br /><b>" + properFileName + '</b>');
}
});//ajax
if(textFileResponse[0]=='100.0%'){
}
else{
continueTime = setTimeout('getStatus();', 3000);
alert('call end');
}
}
Apologies if any frustration comes through this question. I've been running around like a headless chicken for the past 3 hours.
Thank you for any help.
EDIT 2
I have added the full function. The setTimeout seems to be working correctly. It must be the AJAX call, am just checking what is being returned. Even stranger! It keeps returning the same value from the AJAX request and its not getting any newer values!! I think Answer 2 might have something.It may be due with cache but how do you over come that?
Are you requesting the ajax call via HTTP GET as opposed to HTTP POST? IE tends to use cached results of ajax calls unless you use POST instead of GET.
EDIT: Since you've updated your question, I can see that you are indeed using the GET verb. Change it to POST and I bet your issue will be resolved.
You could still use the GET request and simply add
cache: false
to the $.ajax request.
Not at all sure on this but are you missing the ;?
from:
setTimeout('getStatus()', 3000);
to:
setTimeout('getStatus();', 3000);
I noticed that textFileResponse is set in the function declaration of the success handler for the AJAX call yet referenced as an array immediately after making the AJAX call. Perhaps in IE 7 the success handler hasn't completed before the array reference which would throw a java script error, thus the setTimeout would never run.

Categories

Resources