Do something after window load - javascript

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

Related

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.

Nested Ajax Want to Running in Sequence

My code is as follows
$.ajax({
type: 'post',
dataType: 'json',
url: '123.123.0.1',
success: function (result) {
for (var i = 0; i < 2; i++) {
console.log('OUTSIDE');
$.ajax({
type: 'post',
dataType: 'json',
url: '123.123.0.1',
success: function (result) {
console.log('INSIDE');
}
});
}
}
});
Result of that code is :
OUTSIDE
OUTSIDE
INSIDE
INSIDE
My Objective here is I want to outside AJAX wait inside AJAX until inside AJAX done then inside AJAX continue. So I wanna the result look
like :
OUTSIDE
INSIDE
OUTSIDE
INSIDE
My question :
How to do that? How to fix my code?
You have to wait the ajax request to be finished before you go to the next step.
Below an recursive example.
// Code goes here
$.ajax({
type: 'post',
dataType: 'json',
url: '123.123.0.1',
success: function(result) {
function processResult() {
if (i >= 2) return;
console.log('OUTSIDE');
$.ajax({
type: 'post',
dataType: 'json',
url: '123.123.0.1',
success: function(result) {
console.log('INSIDE');
}
}).then(function() {
processResult(++i);
});
}
processResult(0);
}
});

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

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

jquery function problem

I have this function
function onclickRowRecord(recordID) {
$.ajax({
type: "POST",
url: '/file/to/post.to.php' ,
data: {recordID:recordID},
success: function(data) {
//how to post this to function howToPost(recordID) the recordID
}
});
}
function howToPost(recordID){
alert(recordID);
}
so how can I get the response from ajax success and post to the other function
If post you mean call the hotToPost function, then
...
success: function(data) {
howToPost(data.recordID); //or whatever
}
....
Hope this helps.
$.ajax({
type: "POST", url: '/file/to/post.to.php' , data: {recordID:recordID}, success: function(data) {
alert(recordID)
}
});
Does that work? Kinda new to jQuery

Categories