history.js ajax form test

by supertrue

HTML

<script src="https://raw.github.com/balupton/history.js/master/scripts/uncompressed/history.js"></script>
<form id="form" method="POST">
<input type="text" name="var" value="bla">
<input type="submit" value="Go!">
</form>

<div id="response">Default</div>

JavaScript

jQuery(function ($) {

    (function(window,undefined){

        // Establish Variables
        var History = window.History, // Note: We are using a capital H instead of a lower h
            State = History.getState();

        // Log Initial State
        History.log('initial:', State.data, State.title, State.url);

        // Bind to State Change
        History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
            // Log the State
            var State = History.getState(); // Note: We are using History.getState() instead of event.state
            
            
            // alert('statechange');
            
            // advs_ajaxRequest(advs_getQueryString()); // for some reason is causing a page reload
            
            History.log('statechange:', State.data, State.title, State.url);
        });

    })(window);
    
    
        jQuery(function ($) {
                
        function advs_ajaxRequest(epiQueryString) {
            $.ajax({
                url: url,
                type: "POST",
                data: epiQueryString,
                cache: false,
                beforeSend: function() {
                    // console.log(epiQueryString)
                    $("#response").fadeTo(300, .33);
                    History.pushState({}, null, '?'+epiQueryString);
                },
                success: function(data) {
                    // alert('ajax success');
                    $("#response").html(data).fadeTo(300, 1);
                    });
                }
            });
        }
                
        
        function advs_getQueryString(){
            // Disable unfilled fields so they don't clutter up the URL
            // $(this).find(':input[value=""]').attr('disabled', true);
            
            // Get a query string from the form values
            var epiQueryString = 'ajax=&'+$('#form').serialize();
            return epiQueryString;
        }
  ...