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.

jQuery fade-in-out animation

I need to add a fade-in-out transition animation to this ajax loading code. Could someone explain me how to do it please?
JS :
function loadPage(url)
{
url=url.replace('#page','');
$('#loading').css('visibility','visible');
$.ajax({
type: "POST",
url: "load_page.php",
data: 'page='+url,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#pageContent').html(msg);
$('#loading').css('visibility','hidden');
}
}
});
}

Use beforeSend() function of ajax request to fadeIn() and in success fadeOut()
$('#loading').css('visibility', 'visible');
$.ajax({
type: "POST",
url: "load_page.php",
data: 'page=' + url,
dataType: "html",
beforeSend: function () {
$('#loading').fadeIn();
},
success: function (msg) {
if (parseInt(msg) != 0) {
$('#pageContent').html(msg);
$('#loading').fadeOut();
}
}
});

I hope you want to show the effects on success of the ajax result. You may try this.
$.ajax({
type: "POST",
url: "institutions-filter.action",
data: data,
cache: false,
success: function(msg)
{
if(parseInt(msg)!=0)
{
$('#loading').css('visibility','hidden');
$("#pageContent").fadeOut(400, function()
{
$("#pageContent").html(msg).fadeIn(400);
});
}
}
});

Send ajax success response to jQuery Modal

How to send ajax success response to jQuery Modal (jQuery Modal Site) when i click submit and automatically show modal with response. This is my ajax to post:
$('#rincian').submit(function() {
$.ajax({
data: $(this).serializeArray(),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function(response) {
$('#rinci').html(response);
}
});
return false;
});
UPDATE
Answered by Jossef
I have changed it to $('#rinci').html(response).modal();
$('#rincian').submit(function() {
$.ajax({
data: $(this).serializeArray(),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function(response) {
$('#rinci').html(response).modal();
}
});
return false;
});

http://jsfiddle.net/5WEVL/
$('#clickme').click(function() {
$.ajax({
url: '',
success: function(response) {
$('#modal-div').html(response).modal();
}
});
});
add .modal(); and it should work

When i use the window.close ajax call not working?

I have the small window in my page when click the button the window value send my controller and close the window. But when i use the window.close the controller not hit. But without window.close its hits properly. But i need that line for close the window.How i manage that?
My sample Code is give below:
function click() {debugger;
$.ajax({
type: 'POST',
url: 'my url'
data: { status: $('#Field_Error')[0].checked },
dataType: 'json',
success: function (data) {
alert(data.message);
}
});
window.close();
}
controller:
public ActionResult actionName(bool status)
{// not hit here
}

Call window.close from inside success function
$.ajax({
type: 'POST',
url: 'my url'
data: { status: $('#Field_Error')[0].checked },
dataType: 'json',
success: function (data) {
alert(data.message);
window.close();
}
});
Ajax is async in nature. It does not wait for ajax to complete. So window.close called early w/o completing ajax.

put the window.close in succes, jquery doesn't wait for ajax to finish, it goes on.
function click() {debugger;
$.ajax({
type: 'POST',
url: 'my url'
data: { status: $('#Field_Error')[0].checked },
dataType: 'json',
success: function (data) {
alert(data.message);
window.close();
}
});
}

function click() {
var myurl=test.php;
$.ajax({
type: 'POST',
url: 'myurl',
data: { status: $('#Field_Error')[0].checked },
dataType: 'json',
success: function (data) {
alert('successmsg');
window.close();
}
});
}

Do something after window load

I'm doing a (simple) ajax call on window load:
$(window).load(function () {
$.ajax({
url: someUrl,
type: "get",
dataType: "",
success: function(data) {
...........
How can I do something, for instance a function or event after this ajax proces is finished. The problem is I have to append something to the data recieved by the ajax call. But I can't append on window load because the data is still being processed.

Put it in the success handler of the ajax call:
$(window).load(function () {
$.ajax({
url: someUrl,
type: "get",
dataType: "",
success: function(data) {
// do whatever you want with data
}
});
});

You can call that in the success callback function of Ajax request
success: function(data) {
myFunction() ; // If function
$('#elementID').click() // If you want to trigger a click event
}

You may use the
`$(document).ready`
So it will be similar to this:
$(document).ready(function(){
$.ajax({
url: someUrl,
type: "get",
dataType: "",
success: function(data) {
//Your code should be here

After
success: function(data) {
for (var ii = 0; ii < data.length; ii++){
building html here
}
your code here
}
you want to enter in your functions within the success function for the ajax call but before the call is complete.

You could also do
$.ajax({
url: someUrl,
type: "get",
dataType: "",
context: document.body
}).done(function() {
// do whatever when is done
onCompleteFunction();
});

this should execute your request when page is just loaded.
$(function(){
$.ajax({
url: someUrl,
type: "get",
dataType: "",
success: function(data) {
// do whatever you want with data
}
});
});
or you can do:
$(function(){
$.ajax({
url: someUrl,
type: "get",
dataType: "",
complete: function(data) {
// do whatever you want with data
}
});
});