CODEWITHSUNDEEP
javascriptjquery
shreya
shreya

Reputation: 183

How do i refresh the contents of a page and return to the same page using javascript

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 (i.i 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...

Upvotes: 2

Views: 2551

Answers (5)

Dinesh Rawat
Dinesh Rawat

Reputation: 1019

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');
      }
});

Upvotes: 1

dlopez
dlopez

Reputation: 995

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.

Upvotes: 0

Tistkle
Tistkle

Reputation: 500

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)

Upvotes: 0

khushboo29
khushboo29

Reputation: 916

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

Upvotes: 1

Marcus
Marcus

Reputation: 8659

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.

Upvotes: -1

Related Questions