I have a page showing log files which I want to give the user the ability to select and delete. The deletion is done through an AJAX request where the ID of each log-for-deletion is sent via the parameters.
The problem is that there are instances where there are hundreds of logs and in these cases the AJAX request seems to fail. I assume because there is just too much data sent via the parameters. I have tried breaking the AJAX request into parts, but only the first request is sent, afterwards all other requests are shown in Chorme as "cancelled". Following is my code:
var logFiles = [];
function deleteLogBatch() {
if (logFiles.length == 0)
return false;
if (logFiles.length > 10)
var elements = 10;
else
var elements = logFiles.length;
var params = 'action=deletelog';
for (var i = 0; i < elements; i++) {
params += '&lf' + i + '=' + escape(logFiles.shift());
}
$.ajax({
type: "POST",
url: './ajax/logs.php',
data: params,
success: function(response) {
checkResponse(response);
deleteLogBatch();
}
});
}
$('body').on('click', '#confirm-log-delete', function(event) {
event.preventDefault();
$('.select-log').each(function() {
if ($(this).is(":checked")) {
logFiles.push($(this).attr('id'));
}
});
deleteLogBatch();
}
Any help as to why this is happening and what is the proper way of doing this would be appreciated.
You should use async ajax calls
$.ajax({
type: "POST",
url: './ajax/logs.php',
async: true,
data: params,
success: function(response) {
checkResponse(response);
deleteLogBatch();
}
});
It will not wait to previous ajax call
Related
I am creating one small program in which Ι use two tabs in single page and call one ajax call to do operations dynamic.
Below is my code:
HTML Code below
OffyApp Agents
ListHub Agents
<div id="Home" class="tabcontent">
// Some code
</div>
<div id="News" class="tabcontent">
// Some code
</div>
Script Code Below
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
AJax call Below
$.ajax({
url: "sendInvite.php",
type: "POST",
data: {list: inviteEmails},
dataType: "JSON",
beforeSend: function() {
$("#loading-image").show();
},
success: function (data) {
//alert(data);
if (data.status == 200) {
alert("Invite Sent Successfully.");
location.reload(true);
}
},
error: function (msg) {
alert(msg);
}
});
If ajax call give me success then i want to redirect to my second tab like #News
success: function (data) {
if (data.status == 200) {
alert("Invite Sent Successfully.");
location.reload(true);
}}
data.status only will give you an error bacause neither data is JSON nor data have key status
Hence, your if statement is always false. data is the actual response as the plain text from the requested file. Therefore data have no such key like status.(eg.data is the request.responseText)
jQuery Ajax function has three variables:
success: function (a,b,c){}
Where:
a is the actual responseText
b is the textStatus &
c is xhr
Hence, you have to write success function as:
success: function (data,stxt,xhr){
if(xhr.status==200){
alert("Invite sent successfully!");
window.location.reload();
}
}
You could write a function
function activateTab(tab){
$('.tab-pane a[href="#' + tab + '"]').tab('show');
};
Then upon success of your ajax call you can activateTab('news');
But as #Ritesh said, that function will not run because data does not contain a key called success on it, it will just contain the data you get from the server. You need to pass all the parameters into your success callback in order to access the response code.
updated my question below
I made a script where a user can import large amounts of data. After the form is submitted and the data validated I add 2 background tasks: 1 is a script that imports all the data. This script also lets the databases know how many in total and how many he has done. The second is a script that reads how much is done from the database and displays it in a nice progress bar.
Code:
$.ajax({
type: "GET",
url: "import-process.php",
success: function(data) {}
});
var process = 0;
var checkPercentage = function() {
$.ajax({
type: "GET",
url: "get-process-status.php",
data: "importcode=123456",
success: function(data) {
if (!data.indexOf("ERROR") !== -1) {
process = data;
$("#process_balk").css('width', process + '%');
}
}
});
if (process != 100) {
setTimeout(checkPercentage, 1000);
} else {
window.location.href = "import-finished.php";
}
}
checkPercentage();
Both scripts, work fine. Except that the second script (getting the status of the process) isn't started after the first (importing the data) is finished. Which makes the complete thing kinda useless.
Any ideas how to solve this?
update:
I found out that the background process gets called only once. That's the problem. I'm just not sure how to fix it..
var checkPercentage = function() {
alert("Is this function getting called every second?");
$.ajax({
type: "GET",
async: true,
url: "required/get-process-status.php",
data: "importcode=123456",
success: function(data) {
alert(data);
}
});
setTimeout(checkPercentage, 1000);
}
The code above alerts "Is this function getting called every second?" every second. Like it should. However, the value 'data' is called only once. That's not what I expected.. Any ideas?
You mean like this?:
$.ajax({
type: "GET",
url: "import-process.php",
success: function(data) {
checkPercentage();
}
});
var process = 0;
var checkPercentage = function() {
$.ajax({
type: "GET",
url: "get-process-status.php",
data: "importcode=123456",
success: function(data) {
if (!data.indexOf("ERROR") !== -1) {
process = data;
$("#process_balk").css('width', process + '%');
}
}
});
if (process != 100) {
setTimeout(checkPercentage, 1000);
} else {
window.location.href = "import-finished.php";
}
}
I just moved checkPercantage function call from end of script to success function of first ajax. You can also move it to complete function if you wish to run it despite of errors.
Set your callback function to be:
success: function(data) {
if (!data.indexOf("ERROR") !== -1) {
process = data;
$("#process_balk").css('width', process + '%');
if (process != 100) {
setInterval(checkPercentage, 1000);
} else {
window.location.href = "import-finished.php";
}
}
}
Firstly, the if statement has to be in a callback function to work the way you want it. Secondly, you should use setInterval() instead of setTimeout() because it will recheck it every interval time.
Also, yabol is right saying that the top of your code should look like this:
$.ajax({
type: "GET",
url: "import-process.php",
success: function(data) {
checkPercentage();
}
});
This is my first day and first question here, hope you will forgive me if my question is very trivial for this platform.
I am trying to call ajax inside ajax, One ajax call is going to call one cotroller action in which it will insert a record in the database, The action for the 1st ajax call is
public function createAction(Request $request){
if ($request->isXmlHttpRequest()) {
$name = $request->get("gname");
$description = $request->get("desc");
$portfolio_id = $request->get("PID");
$portfolio = $this->getDoctrine()
->getRepository('MunichInnovationGroupPatentBundle:PmPortfolios')
->find($portfolio_id);
$portfolio_group = new PmPatentgroups();
$portfolio_group->setName($name);
$portfolio_group->setDescription($description);
$portfolio_group->setPortfolio($portfolio);
$portfolio_group->setOrder(1000000);
$portfolio_group->setIs_deleted(0);
$em = $this->getDoctrine()->getEntityManager();
$em->persist($portfolio_group);
$em->flush();
$msg = 'true';
}
echo $msg;
return new Response();
}
The 2nd ajax call is going to get the updated data that is inserted by the first ajax call, The action for this call is
public function getgroupsAction(Request $request){
if ($request->isXmlHttpRequest()) {
$id = $request->get("PID");
$em = $this->getDoctrine()->getEntityManager();
$portfolio_groups = $em->getRepository('MunichInnovationGroupPatentBundle:PmPatentgroups')
->getpatentgroups($id);
echo json_encode($portfolio_groups);
return new Response();
}
}
My JQuery is as follows
$.ajax({
type: 'POST',
url: url,
data: data,
success: function(data) {
if(data == "true") {
$("#new-group").fadeOut("fast", function(){
$(this).before("<strong>Success! Your Portfolio Group is created Successfully.</strong>");
setTimeout("$.fancybox.close()", 3000);
});
$.ajax({
type: 'POST',
url: getgroups,
data: data,
success: function(data)
{
var myArray = JSON.parse(data);
var options = $("#portfolio-groups");
for(var i = 0; i < myArray.length; i++)
{
options.append($("<option />").val(myArray[i].id).text(myArray[i].name));
}
}
});
}
}
});
I am calling the 2nd ajax inside the success of the 1st one to ensure that the first ajax is successfully completed, but the 2nd ajax call is not getting the updated data.
How can I ensure that the 2nd ajax will be called after the completion of the first one and I get the recently inserted data as well
Thanks
MY SOLUTION
Just using one ajax call
in the create action where an insertion is made , just after the insertion take all the groups for the portfolio, and return json_encode($portfolio_groups);
Inside the JQuery
$.ajax({
type: 'POST',
url: url,
data: data,
success: function(data) {
$("#new-group").fadeOut("fast", function(){
$(this).before("<strong>Success! Your Portfolio Group is created Successfully.</strong>");
setTimeout("$.fancybox.close()", 3000);
});
var myArray = JSON.parse(data);
var options = $("#portfolio-groups");
for(var i = 0; i < myArray.length; i++)
{
options.append($("<option />").val(myArray[i].id).text(myArray[i].name));
}
}
});
I think the problem may be that you've got lots of variables names ´data´. In the second ajax call, the data sent will always be "true", but I suspect you would like to send something else. I would give them unique names to make things clearer and see what happens.
Just using one ajax call
in the create action where an insertion is made , just after the insertion take all the groups for the portfolio, and return json_encode($portfolio_groups);
Inside the JQuery
$.ajax({
type: 'POST',
url: url,
data: data,
success: function(data) {
$("#new-group").fadeOut("fast", function(){
$(this).before("<strong>Success! Your Portfolio Group is created Successfully.</strong>");
setTimeout("$.fancybox.close()", 3000);
});
var myArray = JSON.parse(data);
var options = $("#portfolio-groups");
for(var i = 0; i < myArray.length; i++)
{
options.append($("<option />").val(myArray[i].id).text(myArray[i].name));
}
}
});
Ajax in side the success method of the first Ajax, as you did, should ensure you the second Ajax is called after the first one. The success method is triggered ONLY after results have returned.
For a test add console.log() inside the first Ajax req just before you call the second one. and another console.log() inside the second Ajax success method.
try to put a console.log on the first success->data variable and see what you get. If you have an error I will cause the second request to fail.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Kill Ajax requests using JavaScript using jQuery
Here is the simple code I am working with:
$("#friend_search").keyup(function() {
if($(this).val().length > 0) {
obtainFriendlist($(this).val());
} else {
obtainFriendlist("");
}
});
function obtainFriendlist(strseg) {
$.ajax({
type: "GET",
url: "getFriendlist.php",
data: "search="+strseg,
success: function(msg){
UIDisplayFriends(msg);
}
});
}
Essentially, if a keyup event is fired before the function obtainFriendlist returns a result (and triggers UIDisplayFriends(msg), I need to cancel the in-flight request. The issue I have been having is that they build up, and then suddenly the function UIDisplayFriends is fired repeatedly.
Thank you very much, and advice is helpful too
The return value of $.ajax is an XHR object that you can call actions on. To abort the function you would do something like:
var xhr = $.ajax(...)
...
xhr.abort()
It may be smart to add some debouncing as well to ease the load on the server. The following will only send an XHR call only after the user has stopped typing for 100ms.
var delay = 100,
handle = null;
$("#friend_search").keyup(function() {
var that = this;
clearTimeout(handle);
handle = setTimeout(function() {
if($(that).val().length > 0) {
obtainFriendlist($(that).val());
} else {
obtainFriendlist("");
}
}, delay);
});
A third thing that you should really be doing is filtering the XHR responses based on whether or not the request is still valid:
var lastXHR, lastStrseg;
function obtainFriendlist(strseg) {
// Kill the last XHR request if it still exists.
lastXHR && lastXHR.abort && lastXHR.abort();
lastStrseg = strseg;
lastXHR = $.ajax({
type: "GET",
url: "getFriendlist.php",
data: "search="+strseg,
success: function(msg){
// Only display friends if the search is the last search.
if(lastStrseg == strseg)
UIDisplayFriends(msg);
}
});
}
How about using a variable, say isLoading, that you set to true through using the beforeSend(jqXHR, settings) option for .ajax, and then using the complete setting to set the variable back to false. Then you just validate against that variable before you trigger another ajax call?
var isLoading = false;
$("#friend_search").keyup(function() {
if (!isLoading) {
if($(this).val().length > 0) {
obtainFriendlist($(this).val());
} else {
obtainFriendlist("");
}
}
});
function obtainFriendlist(strseg) {
$.ajax({
type: "GET",
url: "getFriendlist.php",
beforeSend: function () { isLoading = true; },
data: "search="+strseg,
success: function(msg){
UIDisplayFriends(msg);
},
complete: function() { isLoading = false; }
});
}
I'm kinda new to jQuery but understand it for the most part. My problem is that when my ajax call which refreshes the entire div is done, all my dynamically created forms don't work. If you try and submit them, the event doens't work properly and just tries to do a normal form submit. I have all the other items such as links bound using the .live() which seem to work great. Just the form dies.
How do I rebind the dynamically created forms after the ajax call? They all have id of formname_id. I tried to use bind but it doesn't work as below. Any help is appreciated.
Here is the code
jQuery(document).ready(function(){
jQuery("form[id^='commentform_']").each(function(){
var id = parseInt(this.id.replace("commentform_", ""));
jQuery(this).bind('submit', function(e) {
var action = jQuery('#action_' + id).attr('value');
var act_id = ('1');
jQuery.ajax({
type: "POST",
url: "ajax/modify.php",
data: "action="+ action +"& act_id="+ act_id,
success: function(response){
jQuery('#CommentsContainer_' + id).html(response);
jQuery('#commentform_' + id)[0].reset();
}
});
return false;
});
});
});
Try doing something like this:
jQuery("form[id^='commentform_']").live('submit',function(){
var id = parseInt(this.id.replace("commentform_", ""));
var action = jQuery('#action_' + id).attr('value');
var act_id = ('1');
jQuery.ajax({
type: "POST",
url: "ajax/modify.php",
data: {"action": action, "act_id": act_id},
success: function(response){
jQuery('#CommentsContainer_' + id).html(response);
jQuery('#commentform_' + id)[0].reset();
}
});
return false;
});
No need to loop over the forms to bind to them. If you can use delegate instead of live do so.
Why don't you over-ride the normal form submit:
function addNewitem() {
$('#new_item_form').submit(function() {
$.get("includes/ItemEdit.php", {
newItem: true
},
function(msg) {
isNewItem = true;
$("#new_item").hide();
$('#item_list').hide();
$("#item_edit").html( msg );
$("#item_edit").show();
editActiveEvent();
});
return false;
});
}
Don't forget to return false. or do a .preventDefault
I have gotten this to work adding the event in the function call and using event.preventDefault(); BUT of course only in FF. Doesn't work in IE7..
jQuery("form[id^='commentform_']").live('submit',function(event){
var id = parseInt(this.id.replace("commentform_", ""));
var action = jQuery('#action_' + id).attr('value');
var act_id = ('1');
jQuery.ajax({
type: "POST",
url: "ajax/modify.php",
data: {"action": action, "act_id": act_id},
success: function(response){
jQuery('#CommentsContainer_' + id).html(response);
jQuery('#commentform_' + id)[0].reset();
}
});
event.preventDefault();});
But IE7 still tries to sumbit the action. arrgggh.. Anything I'm doing wrong??