javascript - Ajax call after page load - Stack Overflow

admin管理员组

文章数量:1023230

I am trying to build a search page where the user inputs text into a search box and the page is generated based on the search. I am having timing issues because the blank search page is loading after the JS tries to edit the values on the page.

$.ajax({
    type: 'GET',
    url: '/index.php/content/generate_search',
    data: {
        search: input.val()
    },
    beforeSend: function() {
        window.location.href = '/index.php/content/search';
    },
    success: function() {
        $('.hero h1').text(input.val());
    }
});

I am trying to build a search page where the user inputs text into a search box and the page is generated based on the search. I am having timing issues because the blank search page is loading after the JS tries to edit the values on the page.

$.ajax({
    type: 'GET',
    url: '/index.php/content/generate_search',
    data: {
        search: input.val()
    },
    beforeSend: function() {
        window.location.href = '/index.php/content/search';
    },
    success: function() {
        $('.hero h1').text(input.val());
    }
});

• javascript
• jquery
• ajax
• web

Share Improve this question Follow edited May 15, 2016 at 21:56 Yosvel Quintero 19.1k55 gold badges3939 silver badges4747 bronze badges asked May 15, 2016 at 20:54 psci45000psci45000 37911 gold badge55 silver badges1717 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

To check that the DOM is pletely loaded, many steps have to be done taking all the browsers into consideration. (I cannot find the implementation in the jQuery source, but I will e back with a link).

The easiest and probably best way of doing it, since you're already using jQuery is by:

$( function() {
    // your code here
} );

which is a shorthand for

$( document ).ready( function() {
    // your code here
} );

EDIT

Ok, so as I promised, I came back with the implementation of document.ready. You can find it here, on GitHub. Here is a permanent link to the current version of the file.

Try this:

$(document).ready(function(){
 //Your  code
});

onload is used for executing code on pageload

window.onload = function() {
  // your code
};

This code:

beforeSend: function() {
    window.location.href = "/index.php/content/search";
},

… is causing the browser to leave the page and load a new one before it sends the Ajax request.

Consequently, the Ajax request gets cancelled. If it didn't, then there would be no JavaScript waiting to receive the response.

If you want to visit /index.php/content/search and then initiate an Ajax request, then the JavaScript to initiate the Ajax request has to be on /index.php/content/search. A page you've just left can't run JavaScript on the next page.

I am trying to build a search page where the user inputs text into a search box and the page is generated based on the search. I am having timing issues because the blank search page is loading after the JS tries to edit the values on the page.

$.ajax({
    type: 'GET',
    url: '/index.php/content/generate_search',
    data: {
        search: input.val()
    },
    beforeSend: function() {
        window.location.href = '/index.php/content/search';
    },
    success: function() {
        $('.hero h1').text(input.val());
    }
});

I am trying to build a search page where the user inputs text into a search box and the page is generated based on the search. I am having timing issues because the blank search page is loading after the JS tries to edit the values on the page.

$.ajax({
    type: 'GET',
    url: '/index.php/content/generate_search',
    data: {
        search: input.val()
    },
    beforeSend: function() {
        window.location.href = '/index.php/content/search';
    },
    success: function() {
        $('.hero h1').text(input.val());
    }
});

• javascript
• jquery
• ajax
• web

Share Improve this question Follow edited May 15, 2016 at 21:56 Yosvel Quintero 19.1k55 gold badges3939 silver badges4747 bronze badges asked May 15, 2016 at 20:54 psci45000psci45000 37911 gold badge55 silver badges1717 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

To check that the DOM is pletely loaded, many steps have to be done taking all the browsers into consideration. (I cannot find the implementation in the jQuery source, but I will e back with a link).

The easiest and probably best way of doing it, since you're already using jQuery is by:

$( function() {
    // your code here
} );

which is a shorthand for

$( document ).ready( function() {
    // your code here
} );

EDIT

Ok, so as I promised, I came back with the implementation of document.ready. You can find it here, on GitHub. Here is a permanent link to the current version of the file.

Try this:

$(document).ready(function(){
 //Your  code
});

onload is used for executing code on pageload

window.onload = function() {
  // your code
};

This code:

beforeSend: function() {
    window.location.href = "/index.php/content/search";
},

… is causing the browser to leave the page and load a new one before it sends the Ajax request.

Consequently, the Ajax request gets cancelled. If it didn't, then there would be no JavaScript waiting to receive the response.

If you want to visit /index.php/content/search and then initiate an Ajax request, then the JavaScript to initiate the Ajax request has to be on /index.php/content/search. A page you've just left can't run JavaScript on the next page.

本文标签： javascriptAjax call after page loadStack Overflow