?
Solved

bootstrap tab opening wrong tab

Posted on 2014-08-07
10
Medium Priority
?
477 Views
Last Modified: 2014-08-13
I have a bootstrap tab on a form on my page.
http://du.thezone.org/apply.asp
if you leave the whole form blank, and just go to the last page and hit the finish button, after the alert message, it's supposed to bring me to the first tab again.
I tried both these methods which technically should work, but instead of showing me tab1 it's showing me tab2.
any idea what's wrong?
$('#rootwizard').find("a[href*='tab0']").trigger('click');

OR 

$('#rootwizard a[href="#tab1"]').tab('show');

Open in new window

0
Comment
Question by:rivkamak
  • 5
  • 4
10 Comments
 
LVL 17

Expert Comment

by:contactkarthi
ID: 40248427
give a id='myTab' for your ul and use the following code and see

$('#myTab a:first').tab('show')
0
 
LVL 43

Expert Comment

by:Rob
ID: 40248460
Credit to contactkarthi but the following works on your site (tested with the built in dev tools)

$('#rootwizard a:first').tab('show')
0
 

Author Comment

by:rivkamak
ID: 40249863
the concept makes sense, so how come it's on my page and it's still bringing me to the second tab.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 43

Expert Comment

by:Rob
ID: 40250096
not sure what you mean... I go to the last page and instead of clicking your submit, i open the dev tools (F12) and put the code below into the console and press enter.  Goes to the first tab.

code you post the submit / validation failed code?  Can you confirm you have

$('#rootwizard a:first').tab('show')
0
 

Author Comment

by:rivkamak
ID: 40253399
My validation script looks like this:
function verify() {
var themessage = "You are required to complete the following fields: ";
if (document.form1.Name.value=="") {
themessage = themessage + '\n' + "First Name";
}
if (document.form1.Name2.value=="") {
themessage = themessage + '\n' + "Last Name";
}
if (document.form1.Address.value=="") {
themessage = themessage + '\n' + "Address";
}
if (document.form1.City.value=="") {
themessage = themessage + '\n' + "City";
}

//alert if fields are empty and cancel form submit
if (themessage == "You are required to complete the following fields: ") {
document.form1.submit();
}
else {
alert(themessage);


$('#rootwizard a:first').tab('show') 
return false;
   }
}

Open in new window

0
 
LVL 43

Expert Comment

by:Rob
ID: 40254817
line 24 above , you're missing a semicolon at the end of the line.
0
 

Author Comment

by:rivkamak
ID: 40255852
Doesn't help the problem.
Anything else?

It's almost like something else it triggering it to go to step 2.
is there something else i can use to get to tab1 instead of this code?
0
 
LVL 43

Accepted Solution

by:
Rob earned 2000 total points
ID: 40257492
See if it makes a difference to delay the execution of selecting the tab

$('#rootwizard a:first').tab('show') ;

change to

setTimeout(function() { $('#rootwizard a:first').tab('show'); }, 500);
0
 

Author Closing Comment

by:rivkamak
ID: 40258456
Somehow your answer made it work.
thank you
0
 
LVL 43

Expert Comment

by:Rob
ID: 40259589
What it tells me is the trigger is happening after your code that you've displayed here. An outfit of execution issue.

By using the setTimeout function you're just delaying the execution of that function call. But it's masking the real issue.

I'll have a look at your code again to see if we can find the source if the issue
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

840 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