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
Related
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);
}
});
});
I am working on building some AJAX video upload functionaliyy on my CMS, and ended up implementing the solution which was awarded the bounty here as it best suited my purposes (cross browser compatibility isn't an issue as I will only ever be managing my site via Chrome).
I've been experiencing some extremely strange behavior when I submit my form, when I var dump - the contents of my $_FILES array only includes the name parameter
The jQuery I use to submit to my upload file is as follows:
$('#confirm').click(function(){
var file = new FormData($('form')[0]);
$.ajax({
url: './app/core/commands/upload.php',
type: 'POST',
xhr: function() { // Custom XMLHttpRequest
var myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // Check if upload property exists
myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
}
return myXhr;
},
//Ajax events
success: function(data) {
console.log(data);
},
error: function(data) {
console.log(data);
},
// Form data
data: file,
//Options to tell jQuery not to process data or worry about content-type.
cache: false,
contentType: false,
processData: false
});
});
Any ideas as to why my $_FILE array is empty?? I am baffled.
I have a page with 2 divs..each div have to call an ajax function on load. However, after I open either one of the divs, the ajax of the other div will not work.
*#div_remove lets the user delete a user from the system and display the existing ones in another div within #div_remove thru ajax.
#div_logs displays all transactions done in the system and displays them on another div within #div_logs through ajax.*
Here is the jQuery code:
$("#remove_admin").on("click",function(){
$("#light").fadeIn("slow");
$("#div_remove").slideDown("slow");
showtable();
event.preventDefault();
$("#btnRemove").click(function(){
var text = $.ajax ({
type: "GET",
url: "delUserProcess.php?keyword="+$("#txtRemove").val()+"&table=users&field=username",
async: false,
}).responseText;
alert(text);
showtable();
event.preventDefault();
});
});
//VIEW USER LOGS
$("#logs").on("click",function(){
$("#light").fadeIn("slow");
$("#div_logs").slideDown("slow");
showLogs();
event.preventDefault();
});
$("#txtUser").on("keyup",function(){
showLogs();
event.preventDefault();
});
$(".date").on("change",function(){
showLogs();
event.preventDefault();
});
});
function showtable(){
$.ajaxSetup ({
cache: false
});
$.ajax({
type: "GET",
url: "showAdmin.php",
async: false,
success:function(text){
$("#tblUsers").html(text);
}
});
}
function showLogs(){
$.ajaxSetup ({
cache: false
});
var cBy = $("#txtUser").val();
var sDate = $("#startDate").val();
var eDate = $("#endDate").val();
$.ajax({
type: "GET",
url: "showLogs.php?sDate="+sDate+"&eDate="+eDate+"&createdBy="+cBy,
async: false,
success: function(text){
$("#tblHistory").html(text);
}
});
}`
the original code used .click(), .keyup() and .change().. I already tried using .live() and .on() but it is still not working. please help.
You need to bind the events under the showLogs file.
Because whenever you call the delete or other events, it replace the html with the updated one. and the events lots it existance. So you need to call them in the showLogs file.
I created a simple voting system (+ and -) on Ajax for users comments. One page have 50 posted comments and you can vote for each "plus" or "minus". This data sent through the PHP script to the database. However, if a user votes, the PHP script is called 50 times - it is visible in Chrome developer tool. There are errors - more value than expected. Here is my code (two DIV buttons and the script).
Tell me please how to change the code to the script (up_vote.php or down_vote.php) is called only once.
<script type="text/javascript" src="raitings/jquery.js"></script>
<script type="text/javascript">$(function() {$(".vote").click(function() {
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if(name=='down')
{
$(this).fadeIn(200).html('<img src="raitings/dot.gif" align="absmiddle">');
$.ajax({type: "POST", url: "raitings/down_vote.php", data: dataString, dataType : "html", cache: false, success: function(html)
{ parent.html(html);}
});
}
else
{
$(this).fadeIn(200).html('<img src="raitings/dot.gif" align="absmiddle">');
$.ajax({type: "POST", url: "raitings/up_vote.php", data: dataString, dataType : "html", cache: false, success: function(html)
{ parent.html(html);
} });
}
return false;
});
});
</script>
//php code below;
echo "<div class=\"box1\"><div class=\"up\">".$up."</div>"
."<div class=\"down\">".$down."</div></div>\n";
Using jQuery, it's important to know that events are stackable, even if the event is exactly the same. For example:
$(".vote").click(function() { alert("hi"); });
$(".vote").click(function() { alert("hi"); });
$(".vote").click(function() { alert("hi"); });
If we ran these three lines verbatim, we'll have 3 different events attached. That is, we would get 3 alerts one after the other by clicking in an element with the vote class.
In addition, oftentimes it happens that pages being loaded through ajax carry the same <script></script> block of the parent page, and when this is the case, the code is inadvertently being processed again and again with every ajax call.
While I was not able to pinpoint exactly how is this happening by the code you provided, it seems this is the most likely scenario: your click handler event is being loaded several times, and as a result one click triggers several ajax calls.
The quick and dirty solution when this presents as I mentioned in the comments is replacing:
$(".vote").click(function()
By:
$(".vote").unbind("click").click(function()
Which thanks to the unbind function forces it to discard previously attached events every time a new one is attached, thus preventing it from having more than one event attached no matter how many times the code is processed.
While this will work, the better solution is, of course, to locate where is the js code being loaded multiple times and make sure it is loaded just once.
$(".vote").each(function () { $(this).click( clickHandler .... etc should solve your problem.
I don't fully understand how your version works but I would do it similar to this:
+
-
Where 200 would be the unique id of the comment.
Then have a vote_up() and vote_down() function defined in a JavaScript and add your ajax requests there.
That way it should not call the script more than once when +/- button is clicked.
You can disabled button before send you ajax request.
// Sample:
$(function() {
$(".vote").click(function() {
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
parent.fadeIn(200).html('<img src="raitings/dot.gif" align="absmiddle">');
if(name=='down')
{
$.ajax({
type: "POST",
url: "raitings/down_vote.php",
data: dataString,
dataType : "html",
cache: false,
beforeSend: function() {
parent.attr("disabled", true);
},
success: function(html) {
parent.html(html);
}
});
} else {
$.ajax({
type: "POST",
url: "raitings/up_vote.php",
data: dataString,
dataType : "html",
cache: false,
beforeSend: function() {
parent.attr("disabled", true);
},
success: function(html) {
parent.html(html);
}
});
}
return false;
});
});
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);
}
});