неправильная перезагрузка jQuery

Я делаю небольшой скрипт для изменения языка сайта с помощью PHP и Ajax/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="#">

Он успешно выполняет запрос uri в фоновом режиме и» перезагружает » элемент #body, который является целым телом

<body id="body">

Однако вместо перезагрузки всего содержимого страницы просто исчезнет и больше не появится. Что я делаю не так?

1 ответ

  1. Замените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
    

    Примечание: это будет стереть вашу кнопку тоже(один вы нажали, чтобы получить страницу).поэтому вместо bodyтого, чтобы загружать эти данные в какой-то div.

    РЕДАКТИРОВАТЬ
    Я предполагаю, что ваш код что-то вроде этого

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

    Теперь предположим, что вы измените lang. на испанский сервер отправляет вам испанскую версию, поэтому то, что вы получаете от сервера, немного похоже

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

    Теперь, когда вы используетеdocument.write, чтобы поставить итальянскую страницу document.readyне будет называться(почему? поскольку он вызывается только при фактическом обновлении страницы), поэтому changeобработчики событий не будут привязаны к lang. выпадающее меню выбора

    Решение:
    код вне document.readyопределенно будет работать, даже когда он будет извлечен через ajax, но я не буду советовать это, а то, что я бы посоветовал, это любой код, который вы хотите запустить при завершении 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
            });
       }
    };