• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 157
  • Last Modified:

stay in same tab after button click

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

Here's the structure of the tab. I do not use "<a href"><a/>   I use foundation as my framework.

               <ul class="tabs">
                <li class="tab-link current" data-tab="tab-1" id="tab11">Personal Information</li>
                <li class="tab-link" data-tab="tab-2" id="tab12"">Assignment Information</li>
                <li class="tab-link"  data-tab="tab-3" id="tab13">Issues</li>
                <li class="tab-link"  data-tab="tab-4" id="tab14">Follow Up</li>
                <li class="tab-link"  data-tab="tab-5" id="tab15">Buckets</li>
                </ul>

Open in new window

0
zachvaldez
Asked:
zachvaldez
  • 8
  • 6
  • 6
2 Solutions
 
Julian HansenCommented:
Can you elaborate on what "saving the data" does - why is the first tab not open?
0
 
zephyr_hex (Megan)DeveloperCommented:
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.
0
 
zachvaldezAuthor Commented:
"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)
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
zachvaldezAuthor Commented:
I need  code example to fix this. Thanks
0
 
Julian HansenCommented:
Ok then Zephyr Hex is correct - you are refreshing the page and defaulting to the first tab.

When you save is there information that is passed back to your form handler saying which Tab was open - is the context of the save linked to the tab that is open. If so then when you generate the page you just add the class "current" to which ever tab was the open on.

I wouldn't do this with JQuery - given you are re-rendering the page I would just render out the html with the correct tab selected. If you go the Jquery route you still need to pass information back to the page indicating the tab you want opened - seems like a lot more work than simply have a condition on the generation of the tab <li>'s
This assumes that CurrentTab has been set to whichever tab was open during the save
<ul class="tabs">
  <li class="tab-link <%=CurrentTab==1?"current":""%>" data-tab="tab-1" id="tab11">Personal Information</li>
  <li class="tab-link <%=CurrentTab==2?"current":""%>" data-tab="tab-2" id="tab12"">Assignment Information</li>
  <li class="tab-link <%=CurrentTab==3?"current":""%>" data-tab="tab-3" id="tab13">Issues</li>
  <li class="tab-link <%=CurrentTab==4?"current":""%>" data-tab="tab-4" id="tab14">Follow Up</li>
  <li class="tab-link <%=CurrentTab==5?"current":""%>" data-tab="tab-5" id="tab15">Buckets</li>
</ul>

Open in new window

0
 
zephyr_hex (Megan)DeveloperCommented:
And I prefer jQuery as a separation of concerns (I know, kinda anti-ASP.NET).

So, given the following HTML:

<ul class="tabs">
  <li class="tab-link current" data-tab="tab-1" id="tab11">Personal Information</li>
  <li class="tab-link" data-tab="tab-2" id="tab12">Assignment Information</li>
  <li class="tab-link" data-tab="tab-3" id="tab13">Issues</li>
  <li class="tab-link" data-tab="tab-4" id="tab14 ">Follow Up</li>
  <li class="tab-link" data-tab="tab-5" id="tab15 ">Buckets</li>
</ul>
<input type="hidden" id="hfTab">

Open in new window


The jQuery would look something like:

//assign click event to tab links 
//that stores the id of the clicked tab
$('.tab-link').on('click', function() {
  var id = $(this).attr('id');
  console.log(id);
  $('#hfTab').val(id);
});

//for testing:
$('#hfTab').val("tab13");
//assign current to tab based on value in hidden field
//do this on document ready.
if ($('#hfTab').val() !== "") {
  var hfid = $('#hfTab').val();
  $('#' + hfid).attr('current', 'current');
  console.log($('#' + hfid));
}

Open in new window


Here is a Fiddle Demo.
0
 
zachvaldezAuthor Commented:
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.
0
 
Julian HansenCommented:
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?
0
 
zephyr_hex (Megan)DeveloperCommented:
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.
0
 
Julian HansenCommented:
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.
0
 
zachvaldezAuthor Commented:
It also happens to jump to tab1 when clicking dropdownlist
0
 
Julian HansenCommented:
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.
0
 
zachvaldezAuthor Commented:
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
0
 
zephyr_hex (Megan)DeveloperCommented:
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?
0
 
zachvaldezAuthor Commented:
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.
0
 
zephyr_hex (Megan)DeveloperCommented:
I believe this:

("#tabs").tabs({

Should be this:

$("#tabs").tabs({
0
 
zachvaldezAuthor Commented:
Thanks zephyr, but I still get same error. BTW which jquery library version has this class?
0
 
Julian HansenCommented:
Please can we see your full source code.
1
 
zephyr_hex (Megan)DeveloperCommented:
Julian is right.  I feel like I'm stabbing at something in the dark here.
0
 
zachvaldezAuthor Commented:
I can't provide the source code because it is very, very long .
I only can provide high points questions and I can figure out the rest.
Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 8
  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now