Ajax async inside loop - php

I use dbase.dll in PHP to transfer information from dbase files to MySQL.
I have 150 files to transfer. Each file as a name between 1000 and 5000.
I use PHP to transfer the files. But the request is made in jquery:
var Files = [1544,1548,1548,..];
$.each(Files, function(i,val){
$.ajax({
async: false,
url: '../JC/Reaction.php?type=pes',
type: 'POST',
data: {SCADA: val},
success: function(data){
$('#Result').append(data);
}
});
});
});
I had to set async to false for this action to be done properly.
The url '../JC/Reaction.php' is gets the val and perform the transfer for each file and echoes:
echo $val.' - Done';
The problem is that my brower crashes or nothing happens. I need to show in the browser on the 'Result' div the 'data' from the php like:
:
1544 - Done
1548 - Done
...
Any help would be nice!

RESOLVED
var ajaxQueue = $({});
$.ajaxQueue = function(ajaxOpts) {
ajaxQueue.queue(function(next) {
ajaxOpts.complete = function() {
next();
};
$.ajax(ajaxOpts);
});
};
$.each(Files, function(i,val){
$.ajaxQueue({
async: true,
url: '../JC/Reaction.php?type=pes',
type: 'POST',
data: {SCADA: val},
success: function(data){
$('#Result').append(data);
}
});
});

Related

Div contents flickers between ajax calls

I have an ajax call that passes a parameter to a request for data. The data is based on a view from a web service that provides me with XML. The web service sometimes lags in returning the view and during that time the contents of the div flickers with the current and new data.
I've tried emptying/hiding the div and setting headers to not cache the php page but still the same.
Here is my code:
$('#getCourses').change(function() {
var courseGroup = $('#courseGroup:selected').val();
$('#showGroupCourses').html('<img src="images/loading.gif">Processing');
$.ajax({
cache: false,
type: 'POST',
url: 'getGroupCourses.php',
data: { passCourseGroup:courseGroup },
success: function(groupCourses) {
$('#showGroupCourses').html(groupCourses).show('fast').css({'height':'auto'});
}
})
});
Any thoughts on how to prevent this?
Thanks!
Try this:
$('#getCourses').change(function() {
var courseGroup = $('#courseGroup:selected').val();
$.ajax({
cache: false,
type: 'POST',
url: 'getGroupCourses.php',
data: { passCourseGroup:courseGroup },
beforeSend: function( xhr ) {
$('#showGroupCourses').html('');
$('#showGroupCourses').html('<img src="images/loading.gif">Processing');
}
})
.done(function(groupCourses) {
$('#showGroupCourses').html(groupCourses).show('fast').css({'height':'auto'});
});
});

uploading multiple images on ajax cross domain

I am uploading multiple images cross domain using Ajax and php.
I have set the loader before the Ajax call
Everything works good but when i select multiple images to upload the loader comes after big time delay.
Below is my code
$('#load-div').css('display', 'block');
var data = new FormData();
var c = 0;
var files = new Array();
$.each($('#file')[c].files, function(i, file) {
data.append('files'+i, file);
c++;
});
var other_data = $('#frmaddproperty').serializeArray();
$.each(other_data, function(key, input){
data.append(input.name, input.value);
});
$.ajax({
type: 'POST',
url: 'Coss domain url',
crossDomain: true,
async: false,
cache: false,
contentType: false,
processData: false,
data:data,
success: function(response){
console.log(response);
window.location = 'property_list.php?msg='+response;
},
error: function(){
//alert('Error while request..');
},
});
Above is my code i have set loader in Div id load-div.
it comes after very big delay of time when i upload multiple images.
Don't know what to do about it.
Thanks in Advance.
You can use "ajaxStart()".
https://api.jquery.com/ajaxStart/
It will start the loader when your call starts.
$( document ).ajaxStart(function() {
$('#load-div').css('display', 'block');
});
UPDATE
You can also use, "beforeSend".
$.ajax({
url: '',
beforeSend: function() {
$('#load-div').css('display', 'block');
},
Read more about your options:
http://api.jquery.com/jquery.ajax/
UPDATE
I guess it's this loop that is making the delay.
Try putting the loader inside of it.
Or else you need to give us more code, to figure out what's making the delay!
$.each($('#file')[c].files, function(i, file) {
$('#load-div').css('display', 'block');
data.append('files'+i, file);
c++;
});
async: false,
I have removed this line from my ajax call and loader is working fine.
what it is stands for i don't know

Stop previous ajax when new request is made

I have a script
$('#postinput').on('keyup',function(){
var txt=$(this).val();
$.ajax({
type: "POST",
url: "action.php",
data: 'txt='+txt,
cache: false,
context:this,
success: function(html)
{
alert(html);
}
});
});
Suppose someone types a ,ajax runs . Immediately he types b c and so on. Ajax runs everytime. Is there a way to stop previous request when new is made ?
You can use the abort() method of the xhr. Try this:
var currentXhr;
$('#postinput').on('keyup',function(){
currentXhr && currentXhr.readyState != 4 && currentXhr.abort(); // clear previous request
var txt = $(this).val();
var currentXhr = $.ajax({
type: "POST",
url: "action.php",
data: 'txt=' + txt,
cache: false,
context:this,
success: function(html) {
alert(html);
}
});
});
If you don't want to use a global variable, you could store the xhr in a data-* attribute of the #postinput element.
Another method is to only fire the AJAX request when the user has stopped typing:
var timer;
$('#postinput').on('keyup',function(){
clearTimeout(timer);
var txt = $(this).val();
var timer = setTimeout(function() {
$.ajax({
type: "POST",
url: "action.php",
data: 'txt=' + txt,
cache: false,
context:this,
success: function(html) {
alert(html);
}
});
}, 100); // sends request 100ms after typing stops.
});
You can do like this with Jquery-
jaxRequests = new Array();
queueRequest = function(whatever, you, want) {
if(ajaxRequests[ajaxRequests.length - 1]) {
ajaxRequests[ajaxRequests.length - 1].abort();
}
ajaxRequests[ajaxRequests.length] = //Insert New jQuery AJAX call here.
}

jquery .load not loading immediately after loading data

I was wondering if this was making an asynchronous request...write now Im using:
<script type='text/javascript'>
$(document).ready(function() {
var ktitle = $('.hiddentwo').text();
$('div#tab2').load('morefour.php?title=' + encodeURIComponent(ktitle));
});
</script>
what Im doing though is adding text in the first, into the database, on the current php file (addtext.php). Im passing the Id of the current document to the morefour.php and that is loading the added text on the second tab...the thing is, Im having to refresh to see the content again. Im running on localhost btw.
For more clarity, Im running another jquery script that on clicks, retrieves this data to send it to a php file to enter into a database
$(".button").click(function() {
var content = $(this).siblings().outerHTML();
$.ajax({
async: false,
type: "POST",
url: "tosqltwo.php",
data: {
content: content
}
});
});
$(function(){ //shorthand of $(document).ready
$('div#tab2').html($.ajax({
type: "GET", //if you are doin $_GET['title'] in morefour.php
url: "morefour.php",
data : {title:ktitle},
dataType: 'html', //i am not sure about this part
async: false
}).responseText)
});
or you can try
$(function(){
$.ajax({
url : 'morefour.php',
data : {title:ktitle},
type:'GET',
dataType:'html',
success: function(data) {
$('div#tab2').html(data);
}
});
});
you can use $.ajax function with async to false.
$.ajax({
async: false,
url : 'morefour.php',
data : 'title=' + encodeURIComponent(ktitle),
success: function(data) {
$('div#tab2').html(data);
}
});

Ajax passing data to php script

I am trying to send data to my PHP script to handle some stuff and generate some items.
$.ajax({
type: "POST",
url: "test.php",
data: "album="+ this.title,
success: function(response) {
content.html(response);
}
});
In my PHP file I try to retrieve the album name. Though when I validate it, I created an alert to show what the albumname is I get nothing, I try to get the album name by $albumname = $_GET['album'];
Though it will say undefined :/
You are sending a POST AJAX request so use $albumname = $_POST['album']; on your server to fetch the value. Also I would recommend you writing the request like this in order to ensure proper encoding:
$.ajax({
type: 'POST',
url: 'test.php',
data: { album: this.title },
success: function(response) {
content.html(response);
}
});
or in its shorter form:
$.post('test.php', { album: this.title }, function() {
content.html(response);
});
and if you wanted to use a GET request:
$.ajax({
type: 'GET',
url: 'test.php',
data: { album: this.title },
success: function(response) {
content.html(response);
}
});
or in its shorter form:
$.get('test.php', { album: this.title }, function() {
content.html(response);
});
and now on your server you wil be able to use $albumname = $_GET['album'];. Be careful though with AJAX GET requests as they might be cached by some browsers. To avoid caching them you could set the cache: false setting.
Try sending the data like this:
var data = {};
data.album = this.title;
Then you can access it like
$_POST['album']
Notice not a 'GET'
You can also use bellow code for pass data using ajax.
var dataString = "album" + title;
$.ajax({
type: 'POST',
url: 'test.php',
data: dataString,
success: function(response) {
content.html(response);
}
});
$.ajax({
type: 'POST',
url: 'test.php',
data: { album: this.title },
success: function(response) {
content.html(response);
}
});

Categories