Help getting Tabs to Refresh

JavaScript
1

Hi, i need some help. Can you help me? Thank you. I got 4 tabs. But when i press refresh button at third tab. it should refresh and remain at tab3 but it keep move to first tab. what code do i need so that i can remain at same tab ? either using cookie?

<ul id="tabs" >
	<nav>
                    <li>
                        <a href="#tab1" >Live</a>
                    </li>
                    <li>
                        <a href="#tab2" >Con</a>
                    </li>
                    
					<li>
                        <a href="#tab3" >Ref</a>
                    </li>
					<li>
                        <a class="logout" a href="#tab4" >Log</a>
                    </li>
                    
					</nav>
				</ul>

            </div>
        </div

        
		
			<id="tab1">
                   .................................................................................................
	
	
			<id="tab2">
                ......................................................................................
				
			<id="tab3">
               
                            <input type="button" onClick="history.go(0)" VALUE="Refresh" >
                        ................................................................................
2

Have you checked to make sure there are no mistakes in your markup? For example, you have one closing div tag like this </div - see the missing right angle bracket?. Also, what tags are these - <id="tab1">, <id="tab2">, <id="tab3>` ?

Did you remember to post all of your code here?

3

Because the whole coding is too long so i cut short it. <id=“tab1”> is to contain all the information in tab1. Please ignore . Because i inset a refresh button at tab3. All these tab are in the same url. What i want is to press refresh button in tab3, It will be able to stay at tab3 instead of moving to tab1 after refresh. Thank you. The coding is as below:

<ul id="tabs" >
                    <nav>
                        <li>
                        <a href="#tab1" >Live</a>
                        </li>
                    
                        <li>
                        <a href="#tab2" >Config</a>
                        </li>
                    
                        <li>
                        <a href="#tab3" >Refer</a>
                        </li>
                    
                        <li >
                        <a class="logout" a href="#tab4" >Log</a>
                        </li>
                    
                   
                    </nav>
                    
                </ul>

                 <div class="container pagewidth" id="tab1">
......................................
                  </div>

                 <div class="container pagewidth" id="tab2">
......................................
                  </div>

                   <div class="container pagewidth" id="tab3">
......................................
            <input class="large ui-button" type="button" onClick="window.location.reload();" VALUE="Refresh" >
                  </div>

                   <div class="container pagewidth" id="tab4">
......................................
                  </div>
4

[quote=“forforfor, post:3, topic:224247, full:true”]
What i want is to press refresh button in tab3, It will be able to stay at tab3 instead of moving to tab1 after refresh.[/quote]

The standard way of achieving that is to update the URL with a fragment identifier, denoting which tab is currently active.

When the page loads, the page can check for that fragment identifier and based on it, activate the appropriate tab.

5

Hello. Thank you for replying. I am new to programming. So i am not very sure how to code it. Trying to find reference online but can’t suit into my programming. Need help badly.

6

Some good info on how to achieve these techniques can be found in this link directly to tab thread.

7

Will that able to help me to reload to same tab after i press refresh button ?

8

Yes of course it will.

9

My coding is the same as the coding given. I tried again but when i press refresh at tab3, it will go back to tab1 instead of tab3. ( it doesnt remain at same tab)

10

HTML coding errors can result in unexpected behaviour. Fix up your HTML code first before moving on to further troubleshooting.

Some good HTML tidy sites can be found at HTML Tidy Online and Dirty Markup and if you want to take things further, validation can be done at https://validator.w3.org/

1 Like
11

What are you using for your tabs? Something like jQuery-UI’s tabs?

12

Yup. It has the same url for all 4 tabs. When i click on each tab, it will show its individual content. For this, is it that i need to use cookie ?

13

That’s not mandetory, no. It can be as easy as updating the location when a tab is activated:

$( "#tabs" ).tabs({
    activate: function (event, ui) {
        window.location = ui.newTab.context.href;
    }
});

jQueryUI is smart enough to watch for the fragment identifier, taking you to the appropriate tab when the page loads.

If you don’t want the URL changing with each tab, you can take a more complex route by storing the tab identifier as a cookie, or in the local storage.

14

When i use that. Is it normal that my url start to have #tab2/ #tab3/tab1 when i click on each tab ? Because now my html becomes a list instead of tab. Without pressing tab, i am able to scroll from tab1 to tab4 vertically. For that coding, do i put at jquery.ui or just html head section with . So sorry about that. I am new. Thank you for your patient and understanding.

15

I have tested that above code using the jQueryUI tabs examples, but not with your code because I do not have any working example of your tabs page to work with.

16

Is it possible to implement this cookie coding in my code ? But it show that type/html is not supported. WHat should i do ?

<table>
    <tr>
        <td id="tab1">Tab1</td>
        <td id="tab2">Tab2</td>
        <td id="tab3">Tab3</td>
        <td id="tab4">Tab4</td>
    </tr>
</table>
<div id="mainbody">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    window.onload = function()
    {
        var tab = gettab();
        if (tab == '1')
            document.getElementById("mainbody").innerHTML = '<object type="type/html" data="tab1.html" ></object>';
        if (tab == '2')
            document.getElementById("mainbody").innerHTML = '<object type="type/html" data="tab2.html" ></object>';
        if (tab == '3')
            document.getElementById("mainbody").innerHTML = '<object type="type/html" data="tab3.html" ></object>';
        if (tab == '4')
            document.getElementById("mainbody").innerHTML = '<object type="type/html" data="tab4.html" ></object>';
        else
            document.getElementById("mainbody").innerHTML = '<object type="type/html" data="tab1.html" ></object>';
    };    
    
    function gettab()
    {
        pCOOKIES = new Array();
        datax = new Array();
        pCOOKIES = document.cookie.split('; ');
        if (pCOOKIES == "")
            return false;
        var i = 0;
        do
        {
            datax = pCOOKIES[i].split('=');
            if (datax[0] == "tab")
            {
                return datax[1];
            }
            i++;
        } while (i < 10);
        return false;
    };
    
    tab1.onclick = function()
    {
        document.cookie = "tab=1";
        window.location.reload();
    }
    
    tab2.onclick = function()
    {
        document.cookie = "tab=2";
        window.location.reload();
    }
    
    tab3.onclick = function()
    {
        document.cookie = "tab=3";
        window.location.reload();
    }
    
    tab4.onclick = function()
    {
        document.cookie = "tab=4";
        window.location.reload();
    }
        

</script>
17

Yes it is possible to use cookies.

Can you show us the code that you’re currently working with?

19

why does it seem that when i post the coding, it will be hidden

20

Wrap your code with three back-ticks to post code on this forum.

Another options is also to select your code in the text editor and use the </> icon to show it as code.

22

I should give an example.

Wrap your code with three back-ticks. Those are the character normally to the left of the number 1 key on the number row.

For example:

```
var someVariable = “foo”;
someVariable += “bar”;
```

shows as

var someVariable = "foo";
someVariable += "bar";