Combining Jquery and Javascript function - javascript

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);
}
});
}

Related

Return Value From AJAX Outside AJAX Call

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>

delete table row using jQuery within ajax statement

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();
});
}
});
});

How to fire anothing action before a each loop (with ajax) complete

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()
}
}
});
});

JSP AJAX return NULL

i using JQuery Ajax to call REST api in jsp but it return null no matter how i call but it can work in html. is there any way to solve this problem. Cant seem to find a solution in the net.
$(document).ready(function () {
alert('ready');
var accessKey = 'xkg8VRu6Ol+gMH+SUamkRIEB7fKzhwMvfMo/2U8UJcFhdvR4yN1GutmUIA3A6r3LDhot215OVVkZvNRzjl28TNUZgYFSswOi';
var thisUrl = 'http://www.onemap.sg/API/services.svc/getToken?accessKEY=' + accessKey;
$.ajax({
type: "GET",
url: thisUrl,
dataType: 'application/json',
success: function (data) {
alert('data is:' + data.GetToken[0].NewToken);
}
});
alert(thisUrl);
});
dataType should be jsonp
$(document).ready(function () {
var thisUrl = 'http://www.onemap.sg/API/services.svc/getToken?accessKEY=' + accessKey;
$.ajax({
type: "GET",
url: thisUrl,
dataType: 'jsonp',
success: function (data) {
console.log(data)
alert('data is:' + data.GetToken[0].NewToken);
}
});
});
Refer to this article:
http://www.isgoodstuff.com/2012/07/22/cross-domain-xml-using-jquery/
You only need "jquery.xdomainajax.js" that is there in the sample source-code to make it work.
$.ajax({
url: 'https://asdf/asdf',
dataType: "xml",
type: 'GET',
success: function(res) {
var myXML = res.responseText;
alert(myXML);
}
});

AJAX: How to clear interval if there is no more result

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)

Categories

Resources