stay in same tab after button click

Can you elaborate on what "saving the data" does - why is the first tab not open?

Since you tagged this as ASP.NET, I'm assuming that a postback is occurring when you save, which means you're encountering a page load after the save. You'll need some mechanism to store the last clicked tab id. You can do that in jQuery, using a hidden field. Then, once the page load completes after saving, retrieve the id from the hidden field and initiate a click event on that tab.

ASKER

"Can you elaborate on what "saving the data" does - why is the first tab not open? "
The data is save but it jumps to tab 1. If I'm on tab 1 no problem but when Im in other tabs,
it always jumps to tab 1. --Data is saved via a button click(server side code)

ASKER

I need code example to fix this. Thanks

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

I'd like the idea. I was also looking for alternative solution that uses local storage which I came across but since I'm not using a link <a>, which the example I saw uses, I could not make the jquery work for my situation. But this idea is worth looking for. Thanks.

Are we (me) getting confused?

I thought the issue here was how to render out the page with the correct tab selected - Zephyr Hex's solution appears to be how to save which tab was clicked.

They are not the same thing - what are we actually trying to solve here?

I assumed the "correct" tab was being lost in postback, and so my solution shows how to save the "correct" tab -- which would then be used to render the tab that caused the postback.

If that's not the goal here, please ignore my answer.

I think we are dealing with two sides of the same coin.

The one is how to save the active tab and the second is how to display the page with the active tab open when the user returns to the page.

Given local storage was mentioned I am assuming that this functionality is required across "sessions"

In the case of your code you are sending the active tab back in a hidden field.

My response was how to select the active tab on regeneration of the page
Option 1
The tab is selected at render time by assigning a class or similar to the active tab - selected by some assumed value passed into the page (using a method similar to the one you describe)
Option 2
The tabs are rendered out untouched - on page load JavaScript runs and selects the active tab
In my view they amount to the same thing - so option 1 makes the most sense.

That covers the re-render.

In terms of saving the active tab - then hidden field and local storage are two logical options - but which one depends on the required behaviour. If the selected tab must be preserved between browser shutdowns then the hidden field won't work - unless the value is saved to the user profile on the server linked to a client side cookie (or in the cookie itself).

So back to the question - if we look at the OP

I need a javascript or jquery to control my tab that always jumps on first tab after saving the data.

This is ambiguous and unclear as to what is required - I tried to get clarity and we got this back

The data is save but it jumps to tab 1. If I'm on tab 1 no problem but when Im in other tabs,
it always jumps to tab 1. --Data is saved via a button click(server side code)

So my response is - you need to render out the tab as selected on the server - assuming you know what tab you clicked. We still don't know if there is already a means in place to determine the selected tab - but if a post is happening from the selected tab then I am assuming something is passed back that gives us this information.

ASKER

It also happens to jump to tab1 when clicking dropdownlist

Can you clarify the requirements of this question as discussed in the previous posts.

We cannot take this further without seeing the source code for the problem - preferably a working link failing that a copy and paste of the page source.

ASKER

I 'd like to stick this solution and trying to test it.
I added the jqueries and I'm getting error

 <script>
        
          $('.tab-link').on('click',function() {
       
              var id = $(this).attr('id');
              console.log(id);
              $('#hfTab').val(id);
           });
       

      
    </script>
    <script>
        $('#hfTab').val("tab13");
        if ($('#hfTab').val() !== "") {
            var hfid = $('#hfTab').val();
            $('#' = hfid).attr('current', 'current');  >>>>> error this line
            console.log($('#' + hfid));
        }
    </script>

Open in new window

the error I'm getting is

0x800a1390 - JavaScript runtime error: Invalid left-hand side in assignment

This is the problem

$('#' = hfid)

I think you may want:

$('#' + hfid)

But you should throw in a console.log() to verify it's giving you the result you expect (check F12 for the result of the console.log)

Also, as Julian as stated earlier... we're not entirely clear on what you're attempting to achieve, so even though you want to use this approach, it might not be the one you need. Or perhaps you understand the approach I suggested and have determined it is the correct approach?

ASKER

function stayhere() {
("#tabs").tabs({
activate: function() {
var selectedTab = $('#tabs').tabs('option', 'active');
$("#<%= hfid.ClientID %>").val(selectedTab);
},
active: document.getElementById('<%= hfid.ClientID %>').value
});

I don't know I'm getting javascript error

"0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'tabs"
If I can only pass this, I will be able to make it work.

I believe this:

("#tabs").tabs({

Should be this:

$("#tabs").tabs({

ASKER

Thanks zephyr, but I still get same error. BTW which jquery library version has this class?

Please can we see your full source code.

Julian is right. I feel like I'm stabbing at something in the dark here.