I need a 5 seconds delay before setting success HTML to the div. I have tried below but it doesn't work. Any one has ideas?
$("#glyphicon-chevron-left-daily").click(function () {
var endDate = $("#DailyViewButtonOk1").data("date");
var previousButtonHtml = $(this).html();
$(this).html("<span class=\"glyphicon glyphicon-refresh\"></span>");
$(function () {
callAjax();
});
function callAjax() {
$.ajax({
url: loadUrl,
type: 'POST',
load: "<img src='img/load.gif' alt='loading...' />",
data: { startDate: startDate, endDate: endDate },
success: function (response) {
$("#_DailyViewResults").html(response);
$("#_DailyViewResults").show();
setTimeout(callAjax, 5000);
},
error: function () {
}
});
}
$(this).html(previousButtonHtml);
});
So the code below now works. The problem now id that the original span within button is not restored.
$("#glyphicon-chevron-left-daily").click(function () {
var endDate = $("#DailyViewButtonOk1").data("date");
var previousButtonHtml = $(this).html();
$(this).html("<span class=\"glyphicon glyphicon-refresh\"></span>");
$.ajax({
url: loadUrl,
type: 'POST',
data: { startDate: startDate, endDate: endDate },
success: function (response) {
setTimeout(function (response) {
$("#_DailyViewResults").html(response);
$("#_DailyViewResults").show();
$(this).html(previousButtonHtml);
}, 1000, response);
},
error: function () {
}
});
});
$("#glyphicon-chevron-left-daily").click(function () {
var endDate = $("#DailyViewButtonOk1").data("date");
var previousButtonHtml = $(this).html();
$(this).html("<span class=\"glyphicon glyphicon-refresh\"></span>");
var that = this;
$.ajax({
url: loadUrl,
type: 'POST',
load: "<img src='img/load.gif' alt='loading...' />",
data: { startDate: startDate, endDate: endDate },
success: function (response) {
var params = [];
params['response'] = response;
params['previousButtonHtml'] = previousButtonHtml;
params['that'] = that;
setTimeout(function(params) {
$("#_DailyViewResults").html(params['response']);
$("#_DailyViewResults").show();
$(params['that']).html(params['previousButtonHtml']);
}, 5000, params);
},
error: function () {
}
});
});
I think the case is ajax, which is executing success function, has no callAjax in it's context, therefore callAjax is exaluated to undefined.
success: function (response) {
$("#_DailyViewResults").html(response);
$("#_DailyViewResults").show();
console.log('callAjax=', callAjax);
setTimeout(callAjax, 5000);
},
You can easily check thing by logging to console value of callAjax from ajax's callback.
Solution is to preserve callAjax function within context, like that:
//in ajax call's properties object
success: (function(callAjax) { return function (response) {
$("#_DailyViewResults").html(response);
$("#_DailyViewResults").show();
setTimeout(callAjax, 5000);
}})(callAjax),
error: //...
Related
I want to delete a row from the table, but the success part of ajax does not execute.
function fn_delete() {
$("a.delete").click(function () {
idProduct = $(this).parents("tr").find("td").eq(1).html();
$.ajax({
type: "POST",
url: "DeleteProduct",
data: { idProduct },
success: function () {
$(this).parents("tr").fadeOut("normal", function () {
$(this).remove();
}
});
});
};
this inside your success callback will not be the same as this in the code that makes the ajax call, unless you explicitly set the context:
$.ajax({
context: this,
data: ...
});
I don't think this is giving the value that you're expecting.
Try this:
function fn_delete() {
$("a.delete").click(function () {
idProduct = $(this).parents("tr").find("td").eq(1).html();
var myRow = $(this).parents("tr");
$.ajax({
type: "POST",
url: "DeleteProduct",
data: { idProduct },
success: function () {
$(this).parents("tr").fadeOut("normal", function () {
myRow.remove();
});
}
});
});
Currently I have a javascript file structure which seems deprecated to me, inside this function there's an ajax call, and after the ajax call giving response I want to add ajax function, but if I have to define it 1 by 1 for every ajax response type, it will consume a lot of space so I need to make a function which will call this ajax function, but I don't know where to place this function that I will make. here's my code
return Component.extend({
defaults: {
template: 'Icube_Snap/payment/snap'
},
redirectAfterPlaceOrder: false,
afterPlaceOrder: function() {
$.getScript(js, function() {
$.ajax({
type: 'post',
url: url.build('snap/payment/redirect'),
cache: false,
success: function(data) {
var token = data;
var methods = [];
var methodSnap = $('input[name=snap-method]:checked').val();
snap.pay(token, {
enabledPayments: methods,
onSuccess: function(result) {
$.ajax({ // <-- this ajax needs to be inside function with parameter
type: 'post',
url: url.build('custom/message/post'),
cache: false,
param: {
id: resut.id,
message: result.message
}
success: function(data) {
}
});
},
onPending: function(result) {
$.ajax({ // <-- this ajax needs to be inside function with parameter
type: 'post',
url: url.build('custom/message/post'),
cache: false,
param: {
id: resut.id,
message: result.message
}
success: function(data) {
}
});
},
onError: function(result) {
$.ajax({ // <-- this ajax needs to be inside function with parameter
type: 'post',
url: url.build('custom/message/post'),
cache: false,
param: {
id: resut.id,
message: result.message
}
success: function(data) {
}
});
},
onClose: function() {
$.ajax({ // <-- this ajax needs to be inside function with parameter
type: 'post',
url: url.build('custom/message/post'),
cache: false,
param: {
id: resut.id,
message: result.message
}
success: function(data) {
}
});
}
});
}
});
});
}
});
I just added a successcallback and an errorcallback to the POST function. But if you want you can ignore those functions and implement the success and error functionality inside the function itself without using callbacks.
return Component.extend({
defaults: {
template: 'Icube_Snap/payment/snap'
},
redirectAfterPlaceOrder: false,
afterPlaceOrder: function() {
$.getScript(js, function() {
$.ajax({
type: 'post',
url: url.build('snap/payment/redirect'),
cache: false,
success: function(data) {
var token = data;
var methods = [];
var methodSnap = $('input[name=snap-method]:checked').val();
//Define a function to send the POST request here.
//////////////////////////////////////////////////
var sendPayment = function(param, successcallback, errorcallback) {
$.ajax({ // <-- this ajax needs to be inside function with parameter
type: 'post',
url: url.build('custom/message/post'),
cache: false,
param: {
id: param.id,
message: param.message
}
success: function(data) {
successcallback(data);
},
error: function(error) {
errorcallback(error);
}
});
};
snap.pay(token, {
enabledPayments: methods,
onSuccess: function(result) {
//Call sendPayment method and you can
//pass whatever you want.
sendPayment(result, function() {
//Call when success
}, function() {
//Call when error
});
},
onPending: function(result) {
sendPayment(result, function() {
//Call when success
}, function() {
//Call when error
});
},
onError: function(result) {
sendPayment(result, function() {
//Call when success
}, function() {
//Call when error
});
},
onClose: function() {
sendPayment(result, function() {
//Call when success
}, function() {
//Call when error
});
}
});
}
});
});
}
});
I have following jquery code in my Razor viewpage
$(document).ready(function () {
var grouplistvalues = #Html.Raw(Json.Encode(Session["grouplist"]));
$("#nsline").click(function () {
alert(grouplistvalues)
$.ajax({
type: "POST",
url: "SetupGroups",
data: { grouplist : grouplistvalues },
dataType: "html",
success: function (response)
{
grouplistvalues = null;
grouplistvalues = response;
alert(response)
},
error: function ()
{
}
});
});
$("#ewline").click(function () {
$.ajax({
type: "POST",
url: "SetupGroups",
data: { grouplist : grouplistvalues },
dataType: "html",
success: function (response)
{
grouplistvalues = null;
grouplistvalues = response;
},
error: function ()
{
}
});
});
in above grouplistvalues its taking session as html raw
when I alert it on #nsline click function I can see it,
in above function I'm calling to ajax function and above grouplistvalues value updating
once I alert it on #nsline click function success response I can see a alert like folllowing
since this(grouplistvalues value) 1,2,.. changing as [1,2..] I cannot call to other ajax function in #ewline click function since parameter difference,
this is the above common ajax call
[HttpPost]
public JsonResult SetupGroups(long[] grouplist)
{
Session["grouplist"] = null;
List<long> groupList = new List<long>();
foreach (var groupitem in grouplist)
{
groupList.Add(groupitem);
}
long[] grouparray = groupList.ToArray();
Session["grouplist"] = grouparray;
return Json(grouparray);
}
}
Though I have two click functions its work with only the first click(ewline or nsline only the first time)
How to solve this
It was the dataType in your ajax request. It should be json:
dataType: "json"
I have try for the following for a long time and i have no more idea now, anyone can help me please.
I just want to reload the current page after add items to the cart, I have try the stupid way by count, promise then and other else, but all fail.
The problem is... the page already reloaded before the item add to the cart...!
The following is my sample:-
$("#Button").click(function () {
var CurrentURL = window.location.href;
var SelectedProduct = $('.SelectedProduct').length;
$('.SelectedProduct').each(function () {
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { id: $(this).attr('id')},
datatype: "json"
});
--SelectedProduct
if (SelectedProduct === 0) {
window.location.href = CurrentURL;
$('#CartListContent').slideDown()
}
});
});
$("#Button").click(function () {
var CurrentURL = window.location.href;
var promise = $('.SelectedProduct').each(function () {
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { id: $(this).attr('id')},
datatype: "json"
});
promise.done(function () {
window.location.href = CurrentURL;
$('#CartListContent').slideDown()
});
});
});
}
});
I don't know how much control you have over the server side code, but you should let the API handle adding an array of products to cart, that would make it so much faster and simpler. http://jsfiddle.net/hqn3eufa/
$("#Button").on('click', function () {
var selected_products_ids = [];
$('.SelectedProduct').each(function () {
selected_products_ids.push(this.id);
});
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { ids: selected_products_ids },
datatype: "json",
success: function() {
window.location.reload();
}
});
});
You can make use of the success callback of ajax and the reload function:
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { id: $(this).attr('id')},
datatype: "json",
success:function(data){
window.location.reload();
}
});
your page reload before the add to cart completes.
use a callback to find out when the add to cart is completed:
$("#Button").click(function () {
var CurrentURL = window.location.href;
var promise = $('.SelectedProduct').each(function () {
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { id: $(this).attr('id')},
datatype: "json"
}).success(function () {
window.location.href = CurrentURL;
$('#CartListContent').slideDown()
});
});
});
}
});
Now i use the following way, it is stupid but work:-
Anyother suggestion..!?
var SelectedProduct = $('.SelectedProduct').length;
$('.SelectedProduct').each(function () {
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { id: $(this).attr('id')},
datatype: "json",
success: function (data) {
--SelectedProduct
if (SelectedProduct == 0) {
window.location.reload()
}
}
});
});
I am wondering how will I clear my ajax's setInterval if there are zero result found.
here is my code:
$(document).ready(function() {
var imageLoader = {}
imageLoader.render = function(event){
$.ajax({
url: UAI+'/useraccountimages/loadimage',
type: 'post',
data: {
id : UID,
},
success: function(data){
$("#available_images").html(data);
}
});
}
imageLoader.interval = setInterval(imageLoader.render,5000);
imageLoader.render();
});
I'm not sure with the code, just follow the "logic" !
$(document).ready(function() {
var imageLoader = {}
imageLoader.render = function(event){
$.ajax({
url: UAI+'/useraccountimages/loadimage',
type: 'post',
data: {
id : UID,
},
success: function(data){
if (data.is(':empty')) {
clearInterval(imageLoader.interval);
}
$("#available_images").html(data);
}
});
}
imageLoader.interval = setInterval(imageLoader.render,5000);
imageLoader.render();
});
With the function "clearInterval" to stop it. (stopInterval description)