如何使用javascript刷新页面内容并返回同一页面

Question

I have the following code

<input type="reset" value="Reset" data-theme="b"
       data-inline="true" onclick="refresh()" />
<script type="text/javascript">
    function refresh() {
        location.reload(true);
    }
</script>

Here onclick of reset button..refresh function is called which refreshes the contents... The issue is that..I am using several tabs in a page..now when I refresh the contents in a particular tab,upon refreshing its going to the initial tab declared (ii tab2)

$(function() {
    $("#tabs-1").tabs();
});
$(function() {
    $('#tabs-1 .ui-tabs-nav a[href="#tabs-2"], #tabs-2').addClass('status1');
});

So how can i refresh the contents and return back to the tab in which i was working and not to the initial tab...

Answer 1

You can do this by storing current state in localstorage in tab change event and restore them on refresh

var activeTab = localStorage.getItem('activeTab');

if(activeTab){
    $('#myTab a[href="' + activeTab + '"]').tab('show');
}

Please refer

Answer 2

The easiest way is to:-

1. Get the current tab number in the below code:

function refresh()
{       
  // Write your code here to get current tab
  // Assume tab is #tab2
  //Url is: http: abcwebsite.com/a.php#tab2
  // location.reload(true);
  var current_url = ""; //Get the current page here
  window.location = current_url + "#tab2";
}

2: Write the code to activate a tab from the url

$(function() {
    if(window.location.hash) {
          var activeTab = window.location.hash;
          // Write the code to active the tab active here
          $('#myTab a[href="' + activeTab + '"]').tab('show');
      } else {
          // No hash found
          // Write the code to active the the default tabe
          $('#myTab a[href="#tab1"]').tab('show');
      }
});

Answer 3

If you are calling back to the server to refresh, you need store the tag index you're showing, by localstorage, cookie, or by passing to the server as a param (and the server will bring you back during refresh), for example. If you are using jquery-ui, you can use 'active' option (see here )

Answer 4

I think that the better way to do it is, instead of refreshing the page as is, try to store the tab that you want to load in url parameter. Something like: www.example.com/your-page.html?active-tab={your_active_tab_id}

Obviously, the content of the url param must be updated each time, but can store it in some kind of state variable and when the function is called, get the value from it.

Answer 5

When you refresh the page you request it again from the browser cache or the server. The result being that any state on the page will be forgotten. You will beed to save the state in a cookie or session and restore it upon page load.