ページロード後のAjaxコール

Question

ユーザーが検索ボックスにテキストを入力し、検索に基づいてページが生成される検索ページを作成しようとしています。 JSがページの値を編集しようとした後に空の検索ページが読み込まれているため、タイミングの問題が発生しています。

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

Answer 1

を、多くのステップはすべて取って行う必要がありブラウザを考慮する必要があります。 （私はjQueryソースで実装を見つけることができませんが、私はリンクを返すでしょう）。

それを行うための最も簡単で、おそらく最良の方法、あなたはすでにでのjQueryをされて使用しているので、：

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

EDIT

の省略形です

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

私が約束した通り、document.readyの実装に戻りました。 GitHubで見つけることができます。 Hereは、現在のバージョンのファイルへの永続的なリンクです。

Answer 2

のonloadが、このお試しくださいpageload

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

Answer 3

上のコードを実行するために使用されている：DOMが完全にロードされていることを確認するには

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

Answer 4

このコード：

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

... にブラウザがページを残して、それはAjaxリクエストを送信する前に、新しいものをロードする原因となっています。

したがって、Ajaxリクエストはキャンセルされます。そうでなければ、応答を受け取るのを待っているJavaScriptはありません。

あなたが/index.php/content/searchを訪問したい、その後、Ajaxリクエストを開始した場合、Ajaxリクエストを開始する、その後JavaScriptが/index.php/content/searchでなければなりません。ちょうどあなたが残したページは、次のページでJavaScriptを実行することはできません。