Jquery Url reload

Question

hi i have an html code as follow

<ul id="userTabs" class="clearfix">

                <li class="selected"><a href="#profile">Profile Home</a></li>

                <li><a href="#test">test</a></li>

                <li><a href="#test2">test2</a></li>

                <li><a href="#test3">test3</a></li>

                <li><a href="#test4">test4</a></li>


    </ul>

previously i asked question on how to get an href value, now i need to know how to retain in same link when i reload a page. THe JS code for click the above link are as follow

$("#userTabs li").click(function(){


      $("#userTabs li").removeClass('selected');
      $(this).addClass('selected');
      var href = $(this).children('a').attr('href');
      href = href.replace("#","")
     //alert(href);
      //alert(href);
      $.ajax({
        url:"<?=$this->baseUrl('user/"+href+"')?>",
        data:{'page':href},
        dataType:"json",
        type:"POST",
        success:function(data){
          //alert('ok');
         //var contentHtml = data;
         $("#user_reviews_list").html('');
         $('#pagesuser').hide();
         $("#user_reviews_list").html(data);
         //alert(contentHtml);
        }
      });

    //alert('ok');
    });

now when i click on an link test the new content will be replaced with current content which are in $("#user_reviews_list") and my url changed to http://localhost/user/john#test, but if i reload the page, the content are no longer in #test but its back to original home content. How i can make sure that when i reload the content are suppose to be content of #test. ? thanks

Answer 1

Try this:

$(function(){
    var hash = document.location.hash;
    if(hash != '')
    {
        //load content
        //hack (just example, implement your logic here)
        $('#' + hash).parent().trigger('click');
    }
});

Answer 2

I'm afraid there is no easy answer to this, as it is considered as one of Ajax' major down-sides ( see here about that. ) that reloading/going back doesn't work as it should (without you doing a lot of work for it to work like that).

About making browser refresh work with ajax. Just google it, or look here, here or here

Hope this helps!