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)
Related
I want the html value of AJAX in outside of AJAX Call or in the $('#username').blur(function() function.. Is this possible ?
<script>
$(document).ready(function() {
$('#username').blur(function() {
var username = $(this).val();
availibilityCheck(username);
})
function availibilityCheck(username) {
var result = "";
$.ajax({
url: "action.php",
method: "POST",
data: {
action: "availibilityCheck",
data: username
},
dataType: "text",
success: function(html) {
$('#usernameresponse').html(html);
}
})
}
});
</script>
<script>
$(document).ready(function() {
$('#username').blur(function() {
var username = $(this).val();
availibilityCheck(username);
var return_first;
function callback(response) {
return_first = response;
//use return_first variable here
}
})
function availibilityCheck(username) {
var result = "";
$.ajax({
url: "action.php",
method: "POST",
data: {
action: "availibilityCheck",
data: username
},
dataType: "text",
success: function(html) {
callback(html);
$('#usernameresponse').html(html);
}
})
}
});
</script>
Wondering if it's possible to get multiple divs refreshed with the data pulled from one or more Ajax calls, called by the same button.
I'm getting the correct results, just having a difficult time showing more than one div being refreshed with the html result.
I've tried the following ways;
$(document).on('click', '#customButton', function(event) {
var rangeDate_from = document.getElementsByName("rangeDate_from")[0].value;
var rangeDate_to = document.getElementsByName("rangeDate_to")[0].value;
$.ajax({
url: "load1.php",
data: {'action' : 'search_prods', 'rangeDate_from' : rangeDate_from, 'rangeDate_to' : rangeDate_to},
type: 'post',
success: function(result) {
form_updated = true;
$('#dd_stocktake_details').html(result);
},
error: function() {}
});
});
$(document).on('click', '#customButton', function(event) {
var rangeDate_from = document.getElementsByName("rangeDate_from")[0].value;
var rangeDate_to = document.getElementsByName("rangeDate_to")[0].value;
$.ajax({
url: "load2.php",
data: {'action' : 'search_prods', 'rangeDate_from' : rangeDate_from, 'rangeDate_to' : rangeDate_to},
type: 'post',
success: function(result2) {
form_updated = true;
$('#dd_stocktake_details_2').html(result2);
},
error: function() {}
});
});
And
$(document).on('click', '#customButton', function(event) {
var rangeDate_from = document.getElementsByName("rangeDate_from")[0].value;
var rangeDate_to = document.getElementsByName("rangeDate_to")[0].value;
$.ajax({
url: "load1.php",
data: {'action' : 'search_prods', 'rangeDate_from' : rangeDate_from, 'rangeDate_to' : rangeDate_to},
type: 'post',
success: function(result) {
form_updated = true;
$('#dd_stocktake_details').html(result);
},
error: function() {}
});
$.ajax({
url: "load2.php",
data: {'action' : 'search_prods', 'rangeDate_from' : rangeDate_from, 'rangeDate_to' : rangeDate_to},
type: 'post',
success: function(result2) {
form_updated = true;
$('#dd_stocktake_details_2').html(result2);
alert(result2);
},
error: function() {}
});
});
Both these ways get me the results I want correctly, but both of these options only seem to display the first div each time.
If any more code needs to be seen, just ask!
Any ideas?
You can use Jquery When
ref: https://api.jquery.com/jQuery.when/
$(document).on('click', '#customButton', function (event) {
var result1;
var result2;
var rangeDate_from = document.getElementsByName("rangeDate_from")[0].value;
var rangeDate_to = document.getElementsByName("rangeDate_to")[0].value;
$.when(
$.ajax({
url: "load1.php",
data: { 'action': 'search_prods', 'rangeDate_from': rangeDate_from, 'rangeDate_to': rangeDate_to },
type: 'post',
success: function (result) {
form_updated = true;
result1 = result;
},
error: function () { }
});
$.ajax({
url: "load2.php",
data: { 'action': 'search_prods', 'rangeDate_from': rangeDate_from, 'rangeDate_to': rangeDate_to },
type: 'post',
success: function (result) {
form_updated = true;
result2 = result2
},
error: function () { }
});
).then(function () {
$('#dd_stocktake_details').html(result1);
$('#dd_stocktake_details_2').html(result2);
});
});
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()
}
}
});
});
This is a relatively novice question. I have the following jQuery function:
$(function ()
{
$.ajax({
url: 'testapi.php',
data: "query="+queryType,
dataType: 'json',
success: function(data)
{
var id = data[0];
$('#'+divID).html(id);
}
});
});
I'm looking to name and parameterize the function so that I can call it repeatedly (with the parameters queryType and divID which are already included in the code). I've tried unsuccessfully multiple times. Would anyone have any insight?
Just stick it in a function
function doAjax(queryType, divID) {
return $.ajax({
url: 'testapi.php',
data: {query : queryType},
dataType: 'json'
}).done(function(data) {
var id = data[0];
$('#'+divID).html(id);
});
}
and use it
$(function() {
element.on('click', function() {
var id = this.id
doAjax('get_content', id);
});
});
or
$(function() {
element.on('click', function() {
var id = this.id
doAjax('get_content', id).done(function(data) {
// do something more with the returned data
});
});
});
If you're just looking for a simple function to wrap the ajax call give this a try. Place this function above the document ready code.
function callAjax(queryType, divID) {
$.ajax({
url: 'testapi.php',
data: "query="+queryType,
dataType: 'json',
success: function(data) {
var id = data[0];
$('#'+divID).html(id);
}
});
}
To call the function do this:
callAjax('YourQueryHere', 'YourDivIdHere');
function myFunction(queryType, divID)
{
$.ajax({
url: 'testapi.php',
data: "query="+queryType,
dataType: 'json',
success: function(data)
{
var id = data[0];
$('#'+divID).html(id);
}
});
}
and to call it simply use
myFunction("someQueryType", "myDiv");
function doThis(queryType, divID)
{
$.ajax({
url: 'testapi.php',
data: "query="+queryType,
dataType: 'json',
success: function(data)
{
var id = data[0];
$('#'+divID).html(id);
}
});
}
$("#delete").click(function() {
deleterecord();
});
function deleterecord(){
var id = $("#iduser").val();
alert("aw"+id);
var id = $('#iduser').attr();
e.preventDefault();
pressed = "delete"
$.ajax({
type: "post",
url: "IngSave.php",
data: "&idshit="+ id,
data: "&gagawin="+ pressed,
success: function(){
alert("ATTENTION");
$("#usertbl").html(data);
}
});
return false;
}
I'm not getting the variables $_POST['idshit']; and $_POST['gagawin']; in IngSave.php file.
Try this:
$.ajax({
type: "post",
url: "IngSave.php",
data: {idshit:id,gagawin:pressed},
success: function(){
alert("bitch");
$("#usertbl").html(data);
}
});
You have two data params incorrectly in your ajax call, change it to
$.ajax({
type: "post",
url: "IngSave.php",
data: "idshit="+id+"&gagawin="+pressed, // or - { idshit:id,gagawin:pressed }
success: function(){
alert("bitch");
$("#usertbl").html(data);
}
});