ummahusla · December 17, 2014 15:17
diff --git a/ajax_request b/ajax_request
 <!DOCTYPE html>
 <html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://code.jquery.com/jquery-2.1.1.js">
 </script>
    <script >
      $(function(){
        $('#btnSearch').click(function(){
          var searchTerm = $('#txtSearch').val() ;
          var stateObj = { searchTerm: searchTerm}
          window.history.pushState(stateObj,"title that is ignored","?eventid=1&text=" +searchTerm ); //third param is relative url change
   
        });
        
         $('#btnBack').click(function(){
           window.history.back();
         });
         
          $('#btnForward').click(function(){
            window.history.forward();
         });
      });
      
      window.onpopstate = function(e)
      {
        console.log("state changed");
        if (e.state && e.state.searchTerm) {
          alert(e.state.searchTerm);
          console.log("state is:" + searchTerm);
        }
      }
    </script>
  </head>

  <body>
  
  <label for="txtSearch"> Type a word to search for and click the search button</label>
   <input type="text" id="txtSearch"/>
   <input type="button" id="btnSearch" value="search"/>
   
   <p> After searching twice you can go back (to an empty state) and then forward again to the next state etc. 
   If you ran this in a real browser you should see the page url change when pushing the state.</p>
   
   <div style="padding-top:10px;">
   <input type="button" id="btnBack" value="back"/>
   <input type="button" id="btnForward" value="forward"/>
   </div>
  </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<link rel="stylesheet" href="style.css">
	<script src="http://code.jquery.com/jquery-2.1.1.js">
	</script>
	<script >
	$(function(){
	$('#btnSearch').click(function(){
	var searchTerm = $('#txtSearch').val() ;
	var stateObj = { searchTerm: searchTerm}
	window.history.pushState(stateObj,"title that is ignored","?eventid=1&text=" +searchTerm ); //third param is relative url change

	});

	$('#btnBack').click(function(){
	window.history.back();
	});

	$('#btnForward').click(function(){
	window.history.forward();
	});
	});

	window.onpopstate = function(e)
	{
	console.log("state changed");
	if (e.state && e.state.searchTerm) {
	alert(e.state.searchTerm);
	console.log("state is:" + searchTerm);
	}
	}
	</script>
	</head>

	<body>

	<label for="txtSearch"> Type a word to search for and click the search button</label>
	<input type="text" id="txtSearch"/>
	<input type="button" id="btnSearch" value="search"/>

	<p> After searching twice you can go back (to an empty state) and then forward again to the next state etc.
	If you ran this in a real browser you should see the page url change when pushing the state.</p>

	<div style="padding-top:10px;">
	<input type="button" id="btnBack" value="back"/>
	<input type="button" id="btnForward" value="forward"/>
	</div>
	</body>

	</html>