We Keep Coding

Loader works only on the first ajax call

I want the loader to stay until the complete execution is complete and statement $("#xyzDiv").html(data) has been executed. Currently the loader gets hidden after the first ajax call. Even if i add "beforeSend: function () { $("#loader").show(); }" to GetDataList(), the loader is not staying.
$.ajax
({
type: "POST",
url: ajaxUrl,
data: dataObj,
beforeSend: function () { $("#loader").show(); },
success: function (data)
{
if (data.result)
{
GetDataList();
toastr.success(data.strMsg);
}
else
{
toastr.error(data.strMsg);
}
},
error: function (jqXHR, textStatus)
{
var msg = HandleAjaxErrorMessage(jqXHR, textStatus);
console.log(msg);
toastr.error('An error occurred. Please try again');
},
complete: function () { $("#loader").hide(); }
});
function GetDataList()
{
$.ajax
({
type: "Get",
url: ajaxUrl,
data: dataObj,
success: function (data)
{
$("#xyzDiv").html(data);
},
error: function (jqXHR, textStatus)
{
var msg = HandleAjaxErrorMessage(jqXHR, textStatus);
console.log(msg);
toastr.error('An error occurred. Please try again');
}
});
}

Double ajax request response

I'm using ajax successives requests and I need do a callback when all the successives requests are done
function doAjaxRequest(data, id) {
// Get payment Token
return $.ajax({
type: "POST",
url: 'exemple1.php',
data: data
success: function(msg){
$.ajax({
type: "POST",
url: 'exemple2.php',
data: msg,
success: function(msgr) {
document.getElementById(id).value=msgr;
},
error:function (xhr, status, error) {
//Do something
}
});
},
error:function (xhr, status, error) {
//Do something
}
});
}
$.when(
doAjaxRequest(data, "input-1"),
doAjaxRequest(otherData, "input-2")
).done(function(a1, a2){
//Need do something when both second ajax requests (example2.php) are finished
}
With this code, the done function is call before my calls to "exemple2.php" are succeeded.
How can I wait for that?
Thanks for answering!

function doAjaxRequest(data, id) {
// Get payment Token
return new Promise(function(resolve,reject){
$.ajax({
type: "POST",
url: 'exemple1.php',
data: data
success: function(msg){
$.ajax({
type: "POST",
url: 'exemple2.php',
data: msg,
success: function(msgr) {
document.getElementById(id).value=msgr;
resolve();
},
error:function (xhr, status, error) {
//Do something
reject();
}
});
},
error:function (xhr, status, error) {
//Do something
reject();
}
});
});
}
Promise.all([
doAjaxRequest(data, "input-1"),
doAjaxRequest(otherData, "input-2")])
.then(function(values){
//Need do something when both second ajax requests (example2.php) are finished
}

Your sub ajax request is independant of the first ajax result, then the call to example2 is completely separated from the $.when() promise.abort
Just try to use the fact that jquery $.ajax return promise like object
Here my code from plnkr
// Code goes here
function doAjaxRequest(data, id) {
// Get payment Token
return $.ajax({
type: "GET",
url: 'example1.json',
data: data
}).then(function(msg, status, jqXhr) {
return $.ajax({
type: "GET",
url: 'example2.json',
data: msg
});
}).done(function(msgr) {
console.log(msgr);
return msgr;
});
}
var data = {foo:'bar'};
var otherData = {foo2:'bar2'};
$.when(
doAjaxRequest(data, "input-1"),
doAjaxRequest(otherData, "input-2")
).done(function(a1, a2) {
console.log(a1, a2);
//Need do something when both second ajax requests (example2.php) are finished
});
Attention, I replace POST by GET and use exampleX.json files for my tests on plnkr
You can test it here : https://plnkr.co/edit/5TcPMUhWJqFkxbZNCboz

Return a custom deferred object, e.g:
function doAjaxRequest(data, id) {
var d = new $.Deferred();
// Get payment Token
$.ajax({
type: "POST",
url: 'exemple1.php',
data: data
success: function(msg){
$.ajax({
type: "POST",
url: 'exemple2.php',
data: msg,
success: function(msgr) {
document.getElementById(id).value=msgr;
d.resolveWith(null, [msgr]); // or maybe d.resolveWith(null, [msg]);
},
error:function (xhr, status, error) {
//Do something
d.reject();
}
});
},
error:function (xhr, status, error) {
//Do something
d.reject();
}
});
return d;
}
Now, i'm not sure what is your expected datas passed to $.when().done() callback.

JSON Post to API

I am trying to make a JSON Post to the Simpleconsign API, and I keep receiving a 0 error from the browser. Here is my code:
<script type="text/javascript">
JSONTest = function() {
var resultDiv = $("#resultDivContainer");
$.ajax({
type: 'POST',
key: "apikey,
url: 'https://user.traxia.com/app/api/inventory',
contentType: "application/json",
success: function(result){
switch (result) {
case true:
processResponse(result);
break;
default:
resultDiv.html(result);
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
};
</script>
I am a beginner at posting to the REST API's, so any help would be much appreciated. Thank you!

I don't see any data in your Ajax POST? This code should have work
var postData = {
"key": "Your API Key Here",
"query": "some query",
"consignorId": "123456",
"includeItemsWithQuantityZero": "false"
};
JSONTest = function() {
var resultDiv = $("#resultDivContainer");
$.ajax({
type: 'POST',
data: postData,
url: 'https://user.traxia.com/app/api/inventory',
contentType: "application/json",
success: function(result) {
switch (result) {
case true:
processResponse(result);
break;
default:
resultDiv.html(result);
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
};
http://wiki.traxia.com/display/guide/List+and+Search+Inventory

JQuery - Dynamic elements not recognized

JQuery not recognizing the dynamically added data of the table. The first two button below the sample label function well, which i declared as a static markup just to test and it works, but the button with the same class in the table not function. Im so nuts with this problem.
<a class='btnView' href='#viewModal' data-toggle'modal' =value='FA-0000000'><i class='icon-eye'></i></a>
loadTable.js
var base_url = window.location.origin;
$(document).ready(function(){
url = base_url+"/codeigniter/index.php/AssistanceMonitoringModule/assistanceMonitoring/loadTbodyHome";
alert("loadtable.js");
$.ajax(
{
type: "GET",
url: url,
success: function(data){
$("#loadTbodyHome").html(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert("XHR:"+xhr.status+"Error:"+thrownError);
}
});
$('#searchFromHomeTable').keyup(function(){
url = base_url+"/codeigniter/index.php/AssistanceMonitoringModule/assistanceMonitoring/loadTbodyHomeSearch";
//alert('pumasok');
search = $("#searchFromHomeTable").val();
$.ajax(
{
type: "GET",
url: url,
data: "toSearch="+search,
success: function(data){
//alert(data);
$("#loadTbodyHome").html('');
$("#loadTbodyHome").html(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert("XHR:"+xhr.status+"Error:"+thrownError);
}
});
});
});
dataModal.js
var base_url = window.location.origin;
$(document).ready(function(){
alert("datamodal.js");
$(".btnView").click(function(){
alert($(this).attr('value'));
url = base_url+"/codeigniter/index.php/AssistanceMonitoringModule/assistanceMonitoring/viewInfo";
$.ajax(
{
type: "GET",
url: url,
data: "ID="+$(this).attr('value'),
success: function(data){
//alert(data);
//alert(data);
$("#viewModalBody").html('');
$("#viewModalBody").html(data);
$("#viewModal").attr('aria-hidden',false);
$("#viewModal").fadeIn();
},
error: function (xhr, ajaxOptions, thrownError) {
alert("XHR:"+xhr.status+"Error:"+thrownError);
}
});
});
});
Is the jquery functions not recognizing the newly added markup if its already declared?
Thanks.

You need to use event delegation for dynamically loaded elements:
$(document).on('click','.btnView',function(){
// Your code here
});
Please note that your HTML for the button is also invalid, you need to remove = before value attribute and I'd suggest you to use data-* attribute instead:
<a class='btnView' href='#viewModal' data-toggle'modal' data-value='FA-0000000'><i class='icon-eye'></i></a>

If string is something then value is null

In javascript how can I write a function that if string is 'Select client' then address and contact number fields should be null or blank. I have already this function that if client name is selected then address and contact number fields are entered automatically using the populator gem of rails.
$('#client_id').change(function(){
$.ajax({
url: "/fetch_client",
type: "POST",
data: "id="+$(this).attr('value'),
dataType: "json",
success: function(data, textStatus, xhr){
$('#client_address').attr('value',data.client_address);
$('#client_contact_number').attr('value',data.client_contact_number);
},
error: function(xhr, textStatus, errorThrown){
}
});
});
Can some one please help me as I am new to javascript?

$('#client_id').change(function(){
if ($(this).val() == "Select client") {
$('#client_address').attr('value', "");
$('#client_contact_number').attr('value', "");
} else {
$.ajax({
url: "/fetch_client",
type: "POST",
data: "id="+$(this).attr('value'),
dataType: "json",
success: function(data, textStatus, xhr){
$('#client_address').attr('value',data.client_address);
$('#client_contact_number').attr('value',data.client_contact_number);
},
error: function(xhr, textStatus, errorThrown){
}
});
}
});