jQueryが正しく読み込まれない

PHPとAjax/jQueryを使用してウェブサイトの言語を変更するスクリプトを作成しています。私はページをリロードせずにページコンテンツを更新したい。今まで、私が作ったこのjQueryが正しく読み込まれない

$("a[data-request]").click(function() { 
    var xhr = new XMLHttpRequest(); 
    var request = $(this).attr('data-request'); 
    var what = $(this).attr('data-to'); 
    xhr.open('GET', '{{ site_url }}' + what + '/' + request); 
    xhr.onload = function() { 
     if (xhr.status === 200) { 
      $("#body").load(location.href + " #body"); 
     } 
    }; 
    xhr.send(); 
});

私はリンクをクリックすると

<a data-request="english" data-to="home/language" href="#">

それはsuccesfuly URI背景に依頼し、 "リロード" 全身

<body id="body">

ある#body要素を、実行

しかし、ページ全体のコンテンツをリロードするのではなく、消えて再び表示されません。何が間違っているのですか？

出典

2016-11-09 Albus One

それはすべてのブラウザで実装されていないので、xhr.onloadを交換しonreadystatechange代わり

xhr.onreadystatechange = function() { 
    var DONE = 4; // readyState 4 means the request is done. 
    var OK = 200; 
    if (xhr.readyState === DONE) { 
    if (xhr.status === OK) 
     $("html").html(xhr.response); 
    } 
}; 

xhr.open('GET', '{{ site_url }}' + what + '/' + request); //<-- note must come after above event handler

ノートを使用します。これは、あまりにもあなたのボタンを拭くでしょう.soの代わりにbody負荷の（1を、ページをフェッチするためにクリックした）、そのデータでいくつかのdiv。私はあなたのコードは、この

$(document).ready(function(){ 

    $(langDropdown).change(function(){ 
     //get selected language 
     //do ajax 
    }); 
});

のようなものであると仮定し

EDIT は今、あなたはLANGを変更するとします。スペインのサーバーにあなたは何をサーバから取得するビットあなたはイタリア語のページを入れてdocument.writeを使用する場合、それが唯一の呼び出されるので、今document.readyが（なぜ？呼び出さないであろう

<html> 
<head> ....title..... 
<script src=....></script> //common libs like jquery etc 
<script src=my.js></script> //this would be js contaning above code 
</head> 

<body> 
    Esta es una pagina 
</body> 
</html>

のようなものですので、スペイン語版を送ります実際のページリフレッシュ）ので、changeイベントハンドラはlangにバインドされません。選択ドロップダウン

ソリューション：私は何を助言することは、あなたが（イベントの結合のような）Ajaxの完了時に実行したいものは何でもコードではなく、document.ready外コードは間違いなく、AJAXを通じて取り出された場合にも実行されますが、私はそれをお勧めしません書きますそれはdocument.writeが成功した後にコールバック/ readyState

xhr.onreadystatechange = function() { 
    var DONE = 4; // readyState 4 means the request is done. 
    var OK = 200; 
    if (xhr.readyState === DONE && xhr.status === OK) { 
     $("html").html(xhr.response); 
     $(langDropdown).change(function(){ 
      //binding code 
     }); 
    } 
};

出典

2016-11-09 15:29:07 Viney

私の目標は、言語を変更すると全体のページをリロードすることです。そのため、ある特定の要素のみをリロードすると、他の要素は古い言語を表示し、特定の要素は新しい言語で表示されます。 –

私は、これを更新しました – Viney

これはまだ少し私のhtmlを台無しにします。私はおそらくページシンプルな爽やかさとストーブします。でもありがとう。 –

jQueryが正しく読み込まれない

答えて

関連する問題