title: How do I change the URL without reloading the page?
body: <p>On two different pages I'm trying to change the URL without reloading the page. I also need the forward and back browser buttons to go to the original URL, not the new URL.</p>
  <p>I created a switch to determine if I am on one of the pages which needs to change the URL.</p>
  <p>And then I put together a snippet for changing the URL based on this <a href="https://stackoverflow.com/a/3354511/1780257">this answer</a>. But this is where I'm stuck.</p>
  <p>Because I'm not sure how I should be calling <code>processAjaxData</code>, which I assume is where I pass in the new URL slug. Also what should I be passing in for <code>response</code>?</p>
  <pre><code>&lt;script&gt;
  var windowLoc = jQuery(location).attr('pathname'); //jquery format to get window.location.pathname
  switch (windowLoc) {
    case &quot;/the-old-url-I-want-to-change/&quot;:
      function processAjaxData(response, urlPath) {
        document.getElementByClass(&quot;page&quot;).innerHTML = response.html;
        document.title = response.pageTitle;
        window.history.pushState({&quot;html&quot;: response.html, &quot;pageTitle&quot;: response.pageTitle}, &quot;&quot;, urlPath);
      }
      window.onpopstate = function(e) {
        if (e.state) {
          document.getElementByClass(&quot;page&quot;).innerHTML = e.state.html;
          document.title = e.state.pageTitle;
        }
      };
      break;
    case &quot;/another-old-url-I-want-to-change/&quot;:
      function processAjaxData(response, urlPath) {
        document.getElementByClass(&quot;page&quot;).innerHTML = response.html;
        document.title = response.pageTitle;
        window.history.pushState({&quot;html&quot;: response.html, &quot;pageTitle&quot;: response.pageTitle}, &quot;&quot;, urlPath);
      }
      window.onpopstate = function(e) {
        if (e.state) {
          document.getElementByClass(&quot;page&quot;).innerHTML = e.state.html;
          document.title = e.state.pageTitle;
        }
      };
      break;
  }
  &lt;/script&gt;
  </code></pre>