Solved

stay in same tab after button click

Posted on 2016-09-27
21
76 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 6
  • 6
21 Comments
 
LVL 58

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 43

Expert Comment

by:zephyr_hex (Megan)
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

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

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 43

Assisted Solution

by:zephyr_hex (Megan)
zephyr_hex (Megan) 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 58

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 43

Expert Comment

by:zephyr_hex (Megan)
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 58

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
 

Author Comment

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

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 43

Expert Comment

by:zephyr_hex (Megan)
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 43

Expert Comment

by:zephyr_hex (Megan)
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 58

Expert Comment

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

Expert Comment

by:zephyr_hex (Megan)
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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses

630 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