title: How to redirect to page with history API on popstate when submit a form with ajax?
body: <p>I have an issue when using history API on form submission with Ajax,
  I want to automatically redirected with historyRender() when the request is successfully, but since it takes the window pop state event it does not do anything.
  I want function HistoryRender(url) to work work when is initialized without any click event.</p>
  <p>How can I work it automatically with the passed URL without clicking anything on a document</p>
  <p>//my HTML form</p>
  <pre><code>&lt;form method=&quot;post&quot; action=&quot;send.php&quot; id=&quot;jsForm&quot;&gt;
      &lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;name&quot;&gt;
      &lt;button type=&quot;submit&quot;&gt;Save&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p>//my ajax</p>
  <pre><code>    $(document).on('submit', '#jsForm', function(e){
          e.preventDefault();
          let $url = $(this).attr('action'),
              $req;
              $req = $.ajax({
                  url: $url,
                  method: 'post',
                  data: $(this).serialize(),
                  dataType: 'html',
              });
              $req.done((data) =&gt;{   
                  let $data  = data;
                  historyRender('/url-redirect');
              }); 
              $req.fail((message, err, status)=&gt;{
                  console.log(&quot;request failed&quot; + message);
              })      
  
      });
  </code></pre>
  <p>//history api</p>
  <pre><code>function historyRender(element = 'a', attr = 'href'){
      $(document).on('click', element, function(e){
          e.preventDefault();
          let href = attr;
          //------ user goback and forward -----------
          window.onpopstate = function(e){
              if(e.state)
                  ajaxRender(e.state.href);
          };
          //---------------push state
          window.history.pushState({href: href}, '', href);    
          ajaxRender(href);
      });
  }
  
  function ajaxRender(href){
      let  $url = href, req;
      req = $.ajax({
          url: $url,
          method: 'GET',
          cache: false,
          dataType: 'html',
      });
      req.done((data) =&gt;{   
          let $data  = data, 
              $res   = $data, 
              $title = $res.filter('title').text().trim();
     
          if($data)
              $('title').text($title);
              ($title) ? $('body').html($data) : $('body').html($data); 
      });
  }
  </code></pre>