title: jQuery AJAX - Redirect to 404 page when load method fails
body: <p>My website loads all the pages through AJAX, with the jQuery <code>load</code> method. I did my best to adapt <a href="https://codyhouse.co/gem/animated-page-transition/" rel="nofollow noreferrer">this tutorial</a> to Wordpress.</p>
  
  <p>My problem today, is that <strong>when the <code>load</code> method returns an error</strong> (such as 404 because of a broken link), the AJAX transition doesn't finish, and the <strong>page doesn't change</strong> at all. </p>
  
  <p><strong>- How can I execute something when the load method fails ?</strong></p>
  
  <p><em>EDIT</em> : I found a solution for that in the docs.</p>
  
  <pre><code>section.load(url + ' .cd-main-content &gt; *', function (response, status, xhr) {
      //the code
  }
  </code></pre>
  
  <p>Now it doesn't help me as I thought it would. Because, <code>response</code> returns the 404 page content as expected, <code>status</code> returns error and <code>xhr</code> [object OBJECT]. What I don't get is why the <code>response</code> html isn't being loaded in the div...</p>
  
  <p><strong>- How can I know this is a 404 error ?</strong></p>
  
  <p>Successfully checked for a 404 error using :</p>
  
  <pre><code>if (status == "error" &amp;&amp; xhr.status == "404") {
      console.log('this is a 404 error');
  }
  </code></pre>
  
  <p>I tried executing my code in the <code>load</code> function conditionnaly if the <code>xhr.status</code> is <code>404</code> or if the <code>status</code> is <code>success</code>, with no luck. Still not working. Can anybody helppp?</p>
  
  <p><strong>- How can I redirect to wordpress's 404.php page with jQuery ?</strong> </p>
  
  <p><strong>- How should I treat other error codes ?</strong> </p>
  
  <p>Lots of questions sorry... I don't know where to start</p>
  
  <p><strong>Here's the Javascript :</strong> </p>
  
  <pre><code>jQuery(document).ready(function (event) {
  
      // select website's root url
      var rootUrl = aws_data.rootUrl; 
      var isAnimating = false, 
          newLocation = '', 
          firstLoad = false;
  
      // Internal Helper
      $.expr[':'].internal = function(obj, index, meta, stack){
          // Prepare
          var
              $this = $(obj),
              urlinternal = $this.attr('href')||'',
              isInternalLink;
  
          // Check link
          isInternalLink = urlinternal.substring(0,rootUrl.length) === rootUrl || urlinternal.indexOf(':') === -1;
  
          // Ignore or Keep
          return isInternalLink;
      };
  
  
  
      //trigger smooth transition from the actual page to the new one, excluding event on non relevant links  
      $('main').on('click', 'a[href]:internal:not(.no-ajaxy,.love-button,[href^="#"],[href*="#respond"],[href*="wp-login"],[href*="wp-admin"])', function (event) { 
          event.preventDefault();
          //detect which page has been selected
          var newPage = $(this).attr('href');
          //if the page is not already being animated - trigger animation
          if (!isAnimating) changePage(newPage, true);
          firstLoad = true;
      });
      //detect the 'popstate' event - e.g. user clicking the back button
      $(window).on('popstate', function (e) {
          if (firstLoad) {
              /*
              Safari emits a popstate event on page load - check if firstLoad is true before animating
              if it's false - the page has just been loaded 
              */
              var newPageArray = location.pathname.split('/'), //this is the url of the page to be loaded 
                  //newPage = newPageArray[newPageArray.length - 1];
                  newPage = window.location.href;
              if (!isAnimating &amp;&amp; newLocation != newPage) changePage(newPage, false);
          }
          firstLoad = true;
      });
  
      function changePage(url, bool) {
          isAnimating = true;
          // trigger page animation
          $('body').addClass('page-is-changing');
          $('.cd-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
              loadNewContent(url, bool);
              newLocation = url;
              $('.cd-loading-bar').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
          });
          //if browser doesn't support CSS transitions
          if (!transitionsSupported()) {
              loadNewContent(url, bool);
              newLocation = url;
          }
      }
  
      function loadNewContent(url, bool) {
          // I don't understand the line below
          url = ('' === url) ? rootUrl : url; 
          var newSection = 'cd-' + url.replace(rootUrl, ""); 
          var section = $('&lt;div class="cd-main-content ' + newSection + '"&gt;&lt;/div&gt;');
          // this ajax request helps me applied Wordpress classes on the body element, which is not being reloaded below
          $.ajax({url: url, 
              success: function(data){
                  data = data.replace("&lt;body", "&lt;container").replace("body&gt;", "container&gt;");
                  var classes = $(data).filter("container").attr("class"); 
                  $("body").attr("class", classes + " page-is-changing"); 
              } 
          });
  
          section.load(url + ' .cd-main-content &gt; *', function (event) {
              // load new content and replace &lt;main&gt; content with the new one
              $('main').html(section);
              var delay = 1200; 
  
              //functions to execute after DOM is loaded
              $(document).foundation();
              makeFooterSticky();
              window.scrollTo(0, 0);
              $(".ajax-load-more-wrap").ajaxloadmore();
              //ga('send', 'pageview', window.location.pathname);
  
              setTimeout(function () {
                  //wait for the end of the transition on the loading bar before revealing the new content
                  $('body').removeClass('page-is-changing');
                  $('.cd-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
                      isAnimating = false;
                      $('.cd-loading-bar').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
                  });
                  if (!transitionsSupported()) isAnimating = false;
              }, delay);
              if (url != window.location &amp;&amp; bool) {
                  //add the new page to the window.history
                  //if the new page was triggered by a 'popstate' event, don't add it
                  window.history.pushState({
                      path: url
                  }, '', url);
              }
          });
  
      }
  
      function transitionsSupported() {
          return $('html').hasClass('csstransitions');
      }
  });
  </code></pre>