Solved

stay in same tab after button click

Posted on 2016-09-27
21
51 Views
Last Modified: 2016-11-09
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
Comment
Question by:zachvaldez
  • 8
  • 6
  • 6
21 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41817879
Can you elaborate on what "saving the data" does - why is the first tab not open?
0
 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41818197
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
 

Author Comment

by:zachvaldez
ID: 41818225
"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
 

Author Comment

by:zachvaldez
ID: 41818226
I need  code example to fix this. Thanks
0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 250 total points
ID: 41818234
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
 
LVL 42

Assisted Solution

by:zephyr_hex
zephyr_hex earned 250 total points
ID: 41818249
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
 

Author Comment

by:zachvaldez
ID: 41826429
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41826455
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
 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41826481
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41826610
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:zachvaldez
ID: 41830809
It also happens to jump to tab1 when clicking dropdownlist
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41831220
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
 

Author Comment

by:zachvaldez
ID: 41832245
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
 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41832302
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
 

Author Comment

by:zachvaldez
ID: 41837033
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
 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41837069
I believe this:

("#tabs").tabs({

Should be this:

$("#tabs").tabs({
0
 

Author Comment

by:zachvaldez
ID: 41837141
Thanks zephyr, but I still get same error. BTW which jquery library version has this class?
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41838115
Please can we see your full source code.
1
 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41838631
Julian is right.  I feel like I'm stabbing at something in the dark here.
0
 

Author Comment

by:zachvaldez
ID: 41844045
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

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now