asp.net mvc - HTML5 History API MVC -


i creating mvc application simple custom tab interface displayed on page. user selects each tab, ajax request load new content tab body area. works fine though looking implement html5 history api browser history updated , user able return prior tab clicking browsers button. have built rough prototype core listed below though stuck on being able return first state of tab control. example when load page. tab 1 selected. click tab 2 followed 3 , four. clicking browser button returns me tab three, tab 2 not tab one.

i appreciate suggestions has (will tidy code later more cross browser compatible)

<div id="publicationlist"> @{html.renderaction("documentsview", "publications", new { @area = "informationcentre", @id = @model.selectedcategory });} 

@section scripts {     <script type="text/javascript">         $(".taboption").click(function (e) {             e.preventdefault();             var categoryid = $(this).attr("data-categoryid");             getcategorypublications(categoryid);              if (history.pushstate) {                 history.pushstate({ id: categoryid }, null, "");             }         });          function getcategorypublications(categoryid)         {             $.ajax({                 type: 'get',                 url: '@url.action("documentsview", "publications", new { @area = "informationcentre" })',                 async: false,                 data: { id: categoryid },                 success: function (data) {                     $(".taboption").removeclass("selected");                     $('.taboption[data-categoryid=' + categoryid + ']').addclass('selected');                     $('#publicationlist').html(data);                 }             });         }          $(window).bind('popstate', function (e) {             var state = e.originalevent.state;             if (state) {                 if (state.id !== undefined) {                     getcategorypublications(state.id);                 }             }         });      </script>     } 

i see doing wrong now. not pushing state on initial load of page. there more appropriate command 'replacestate':

if (history.replacestate) {         history.replacestate({ id: @model.selectedcategory }, null, "");     } 

Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -