We Keep Coding

Issue with nested ajax call in jQuery

I have a situation where I make an ajax call, on returning from which (successfully), I make an another ajax call with the returned data and submit the page. The pseudo code looks something like this:
$.ajax({
url: 'first_page.jsp',
type: 'POST',
dataType: 'JSON',
data: {...}
}).done(function(response) {
$.ajax({
url: '2nd_page.jsp',
type: 'POST',
dataType: 'JSON',
data: {...}
});
thisPage.submit();
});
The inner ajax call is not executed if I do not comment out the 'submit' line. I do not understand the behaviour. Can someone please help me with this.
Thanks

You need to execute submit on second ajax sucess.
For example
$.ajax({
url: '',
type: 'GET',
data: {
},
success: function (data) {
$.ajax({
url: '',
type: 'GET',
data: {
},
success: function (data) {
//do your stuff
}

$("input[type='submit']").click(function(event){
event.preventDefault();
$.ajax({
url:'abcd.php',
method:'post',
type:'json',
async:false,
success:function(response){
$.ajax({
url:'abcde.php',
method:'post',
type:'json',
data:{res:response},
success:function(response){
console.log(response);
}
});
$("form").submit();
}
});
});
Try this one.Its working correctly.

Globalize with Devexpress Angular 2

Has anyone used Globalize with Devexpress dateboxes? Cannot find how to make it work, obviously I would like to localize date format for countries like England/Germany/USA etc...

The sample below applies to AngularJS/Jquery, but you can extrapolate to Angular2
First of all you have to download the CLDR
Once you downloaded it in json format you have to load it into the Globalize and set your locale see sample code below (see at the bottom of the sample code to check the locale in my case it is es for spanish).
GlobalizeFunc: function () {
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/supplemental/likelySubtags.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/dates/es/ca-generic.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/dates/es/ca-gregorian.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/dates/es/dateFields.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/dates/es/timeZoneNames.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/numbers/es/numbers.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
Globalize.locale("es");
},
At this point your controls have been globalized, including calendars and date pickers.

JQuery fadeOut() Function sometimes not working

Here is code..
$.ajax({
type: "POST",
url: "<?php echo rootpath()?>/show.php",
data: {
'url': url,
'type': 'rawdata'
},
cache: false,
dataType: "json",
success: function(data) {
$('#preloader').fadeOut('slow', function() {
$(this).remove();
});
alert(data);
}
})
data 'll be loaded on background which i get through alert only that fadeout function some time works.. not always

Repeating jQuery Ajax success function

I'm using Ajax to add an array of data to a database.
Currently when "#bookingbutton" is clicked on this returns a block of HTML with ".select-room-button" button.
I've added the ".select-room-button" code in the success function of the original Ajax call for "#bookingbutton" otherwise it doesn't work.
I want to be able to click on the ".select-room-button" unlimited times without having to repeat the code loads of times in each success function if that makes sense? I feel like there must be a smarter way to do this but I'm not sure how?
jQuery(document).ready(function($) {
$('#bookingbutton').click(function() {
$('.booking-main').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$('.booking-side-response').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$.ajax({
type: 'POST',
url: AJAX_URL,
data: $('#bookroom').serialize(),
dataType: 'json',
success: function(response) {
if (response.status == 'success') {
$('#bookroom')[0].reset();
}
$('.booking-main').html(response.content);
$('.booking-side-response').html(response.sidebar);
$('.select-room-button').click(function() {
$('.booking-main').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$('.booking-side-response').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$.ajax({
type: 'POST',
url: AJAX_URL,
data: $('#bookroom').serialize(),
dataType: 'json',
success: function(response) {
if (response.status == 'success') {
$('#bookroom')[0].reset();
}
$('.booking-main').html(response.content);
$('.booking-side-response').html(response.sidebar);
}
});
});
}
});
});
});

For this you can use various selector for a single event to trigger ajax calls.
So your code snippet will look like
jQuery(document).ready(function($) {
$(document).on("click",'#bookingbutton, .select-room-button', function() {
$('.booking-main').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$('.booking-side-response').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$.ajax({
type: 'POST',
url: AJAX_URL,
data: $('#bookroom').serialize(),
dataType: 'json',
success: function(response) {
if (response.status == 'success') {
$('#bookroom')[0].reset();
}
$('.booking-main').html(response.content);
$('.booking-side-response').html(response.sidebar);
}
});
});
});

You can try using .on like this on the document. It will bind events for dynamically generated HTML too.
jQuery(document).ready(function($) {
$(document).on("click",'#bookingbutton, .select-room-button').click(function() {
$('.booking-main').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$('.booking-side-response').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$.ajax({
type: 'POST',
url: AJAX_URL,
data: $('#bookroom').serialize(),
dataType: 'json',
success: function(response) {
if (response.status == 'success') {
$('#bookroom')[0].reset();
}
$('.booking-main').html(response.content);
$('.booking-side-response').html(response.sidebar);
});
});
});

You can make these change
use $(document).ready(function() instead of jQuery(document).ready(function($)
use $('body').on('click', '.select-room-button', function() instead of $('.select-room-button').click(function() and get it out $('#bookingbutton').click(function()

ajax request not working on IE

function VReload()
{
$.ajax({
type: "GET",
url: "/foo/",
success: function (data) {
$("#myid").html(data);
}
});
}
$(document).ready(function() {
setInterval('VReload()', 1000)
});
This piece of code is working fine on Mozilla and chrome but not on IE. Ajax call is not firing on IE. What could be the reason.

Switch off caching by doing this:
$.ajax({
type: "GET",
cache: false,
url: "/foo/",
success: function (data) {
$("#myid").html(data);
}
});

set cache false
$.ajaxSetup({ cache: false });
or
$.ajax({
cache: false,
//other options
});

Try this:
function VReload()
{
var timestamp = new Date();
$.ajax({
type: "GET",
url: "/foo/" + "&timestamp=" + timestamp.getTime(),
success: function (data) {
$("#myid").html(data);
}
});
}
$(document).ready(function() {
setInterval('VReload()', 1000)
});

use jQuery's $.get() function
$.get('/foo/', {}, function(data){
// whatever
});