I am working with bootstrap and attempting to create a button in tab 1 which "activates" (switches to) tab 2.
Here's my code:
HTML navigation tabs:
<ul id="pageSwitcher" class="nav nav-tabs" style="width:100%;">
<li>Page One</li>
<li>Page Two</li>
</ul>
HTML tab content:
<div class="tab-content" style="width:100%;">
<div class="tab-pane active" id="page1">
<button type="button" onclick="showPageTwo();">Proceed to page 2</button>
</div>
<div class="tab-pane" id="page2">
<p>Page 2 content here!</p>
</div>
</div>
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
}
});
function showPageTwo() {
$('#pageSwitcher li:eq(1) a').tab('show');
}
</script>
Anyone willing to provide some insight as to where exactly I'm going wrong? I've copied several examples almost exactly... clicking on the tabs themselves works fine, I just can't seem to make a button at the bottom of page 1 that activates page 2.
One: bad form, inline onclick call... you don't need it, get rid of it:
<button type="button">Proceed to page 2</button>
Two: you have two JS errors. You didn't close your .click() function, and you're trying to trigger the first tab with the specifier of li:eq(0)...
$(document).ready(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
// ALSO, you were missing a closing paren, here!
});
//two issues ... onclick inside your button is trying to access
// your function before it's available... inline js like that, bad idea anyhow
// so hook into it inside your DOM ready code here anyhow.
var showPageTwo = function() {
// secondly, you're looking at the wrong item!
// li:eq(0) means "look at the first li in the array of li"
$('#pageSwitcher li:eq(1) a').tab('show');
};
$(".tab-content").on("click","#page1 button", showPageTwo);
});
See this jsFiddle for a working example: http://jsfiddle.net/mori57/Xr9eT/
Give your button an ID :
<div class="tab-content" style="width:100%;">
<div class="tab-pane active" id="page1">
<button type="button" id="myButton">Proceed to page 2</button>
</div>
<div class="tab-pane" id="page2">
<p>Page 2 content here!</p>
</div>
</div>
and just trigger a click on the right anchor, bootstrap does the rest :
$(document).ready(function() {
$('#myTab a').on('click', function(e) {
e.preventDefault();
$(this).tab('show');
});
$('#myButton').on('click', function() {
$('.nav-tabs li:eq(1) a').trigger('click');
});
});
You should not use specific code for your button, but generic event-driven process:
- you should add an attribute to your button to specify towards which page it will redirect
- then attach a click event
- attach click event to tabs to do the same
HTML:
<button type="button" id="btn" gotoPage="#page2">Proceed to page 2</button>
JS to process tab switching:
function showPage(pageId){
$('.tab-pane').each(function(){
$(this).removeClass('active');
$(this).hide();
});
$(pageId).show();
$(pageId).addClass('active');
}
(Not sure you need to use show or hide functions if you CSS manages thats thanks to active class)
Then for your button:
$('#btn').click(function(){
var destPage = $(this).attr('gotoPage');
showPage(destPage);
});
For tabs:
$('#pageSwitcher a').each(function(){
$(this).click(function(e){
showPage($(this).attr('href'));
});
});
And you can load page one at startup, if needed:
$(document).ready(function(){
showPage("#page1"); // default: load page 1
});
Example: http://jsfiddle.net/DSbrj/1/
showPageTwo() should be declared outside of the document.ready() call.
Related
I have a page with two div panels, a left and a right. Both panels are tabbed using jquery-2.1.4.min.js and jquery-ui.js. One panel has three tabs, and it works.
The js in the head of my page looks like this:
$(function(){
// Doesn't matter if following two lines are reversed. Same output.
$( "#property-card" ).show().tabs(); // this one doesn't work
$( "#tabs" ).show().tabs(); // this one works
});
The html looks like this:
//This tabbed content works:
<div id="tabs">
<ul>
<li>Tasks</li>
<li>Notes</li>
<li>Photos</li>
</ul>
<div id="tabs-1">
<!-- Tasks -->
</div>
<div id="tabs-2">
<!-- Notes -->
</div>
<div id="tabs-3">
<!-- Other -->
</div>
The other div panel looks something like this:
//This one shows hyperlinked text within the content area, instead of showing tabs
<div id="property-card" class="eight columns light-manilla curved10 border-dark border-2 border-ridge padding-1-percent">
<ul>
<li>Property</li>
<li>Help</li>
<li>List Price</li>
<li>Taxes</li>
<li>HOA</li>
<li>Showing Instructions</li>
<li>BPO Values</li>
<li>Buyer Leads</li>
</ul>
<div id="property">
</div>
<div id="property-help">
</div>
<div id="property-list-price">
</div>
<div id="property-taxes">
</div>
<div id="property-hoa">
</div>
<div id="property-showing-instructions">
</div>
<div id="property-bpo-values">
</div>
<div id="property-buyer-leads">
</div>
</div>
(not sure if this is related) Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/jquery-2.1.4.min.js:4:14346
ReferenceError: data is not defined
(I think this one is related) jquery-2.1.4.min.js%20line%202%20%3E%20eval:35:1
See inline screen shot sample for example of what's going on.
Hate answering my own questions, but in another file at the bottom of my html, there is another javascript block, which "activated" the working tabbed div, but because I didn't add the new tabbed div (because I didn't realize that second javascript block was there) the second tabbed div didn't work. Here is what made it work:
$(function () {
$('#property-card').tabs({
activate: function (event, ui) {
var $activeTab1 = $('#property-card').tabs('option', 'active');
}
});
$('#tabs').tabs({
activate: function (event, ui) {
var $activeTab2 = $('#tabs').tabs('option', 'active');
if ($activeTab2 == 2) {
// HERE YOU CAN ADD CODE TO RUN WHEN THE SECOND TAB HAS BEEN CLICKED
$("#mls-images-carousel").css("display","block");
retrieveAssetImages('<?php echo $as_id; ?>');
}
else{
$("#mls-images-carousel").css("display","hidden");
}
}
});
});
I'm working on an Drop-Down Menu but without success.
I want the same function like the Drop-Down menu by Sony.I have even tried to imitate this effect, but I had a few difficulties.
My HTML:
<div id="main_menu">
<div id="main_menu_container">
<div id="main_menu_links">
Startseite
<a id="drop_down_link1" class="main_menu_link">Events</a>
<a id="drop_down_link2" class="main_menu_link">Clan</a>
<a id="drop_down_link3" class="main_menu_link">Irgendetwas</a>
</div>
</div>
<div id="drop_down_container">
<div id="drop_down_content1" class="drop_down_content"></div>
<div id="drop_down_content2" class="drop_down_content"></div>
<div id="drop_down_content3" class="drop_down_content"></div>
</div>
jQuery:
$("#drop_down_link1").mouseenter(function (){
$("#drop_down_content1").stop().slideDown();
});
$("#drop_down_content1, #drop_down_link1").mouseleave(function (){
$("#drop_down_content1").delay(350).slideUp();
});
FIDDLE
The problem in my script is, when i leave drop_down_link1 or drop_down_content1 then the
content 'slideUp' but when i hover from drop_down_link1 to drop_down_content1 then there shouldn't be the function.
So my question is:
How can I do this that I can move between the link and the 'content' with my mouse without 'content' close?
My code is very unprofessional. How do I make it so that I do not repeat myself when 'Events' and 'Clan' have the same function?
http://jsfiddle.net/PKvZ2/
Try with this code. I added :
$("#drop_down_link1,#drop_down_container").mouseenter(function (){
$("#drop_down_content1").stop().slideDown();
});
$("#drop_down_content1, #drop_down_link1,#drop_down_container").mouseleave(function (){
$("#drop_down_content1").delay(350).stop().slideUp();
});
Or this
$("#drop_down_link1,#drop_down_container").hover(function (){
$("#drop_down_content1").stop().slideDown();
},function(){
$("#drop_down_content1").stop().slideUp();
});
http://jsfiddle.net/bT8Cp/
Very simple! Just handle both #drop_down_link1 and #drop_down_content1 mouseenter events as follows
$("#drop_down_link1,#drop_down_content1").mouseenter(function (){
$("#drop_down_content1").stop().slideDown();
});
$("#drop_down_content1, #drop_down_link1").mouseleave(function (){
$("#drop_down_content1").delay(350).stop().slideUp();
});
2.
$('#main_menu_container a.main_menu_link').each(function(index,item){
alert(index);
var $this=$(this),
$dropdownContent=$('#drop_down_container .drop_down_content')
[index];
......
});
Execute a function on clicking any element in a page (with id='home_page') except for two elements (id='link1', id='link2'). These two elements have different function to execute on click.
The below are the two jQuery codes I've tried unsuccessfully.
Code1:
$( document ).on("pageinit", '#home_page', function () {
$('#home_page').not('#link1, #link2').click(function(){
alert();
});
});
Code2:
$( document ).on("pageinit", '#home_page', function () {
$('#home_page:not(#link1, #link2)').click(function(){
alert();
});
});
The below is the jQM code for the page:
<div data-role="page" id="home_page">
<div data-role="header" data-theme="a" ><!-- Header -->
<a id='link1' href="/done" rel="external">Home</a>
<a id='link2' href="/exit" rel="external">Exit</a>
</div><!-- Header -->
<div data-role="content">
<p>Home Page</p>
<!-- Other elements -->
</div>
</div>
I think you should use .on() method for binding events and as suggested in other answer you have a missing closing tag }); for click event:
$( document ).on("pageinit", '#home_page', function () {
$('#home_page').not('#link1, #link2').on('click touchstart', function(){
alert(); //---try adding "touchstart"--------^^^^^^^^^^
});
});
and make sure that you have stopped the event to bubble up on '#link1, #link2' links with event.stopPropagation(); only if you have bound some js events to these links.
As per your comments i just came with this:
$(function () {
$('#home_page').not('#link1, #link2').click(function () {
alert('page clicked');
});
$('#link1, #link2').click(function (e) {
e.stopPropagation(); //<---stops the event to bubble up
});
});
What i noticed you have mentioned the href for your anchor tag to http://www.google.com/, what seems to me that navigating to google is not working in the fiddle while other link is working properly.
Try to change the first link href to this:
<a id='link1' href="http://www.apple.com/mac/" rel="external">link1</a>
<a id='link2' href="http://www.apple.com/" rel="external">link2</a>
Demo # Fiddle
Seem like you're missing closing }) for your click function:
$( document ).on("pageinit", '#home_page', function () {
$('#home_page').not('#link1, #link2').click(function(){
alert();
}); // <-- Here
});
i got problem with firing event when one of the tab click... i am using jQuery Easy Tab plugin.... all i want is to display alert when tab with id "#sp_tab2" is clicked... at the movement it fires with all tab and if do like this $("#sp_tab2").click(function(){..}
it doesn't work either... http://os.alfajango.com/easytabs/#advanced-demo
many thanks in advance ...
<div id="selectPropertyTab" class="tab-container">
<ul class="etabs">
<li class="tab tab_description"><img id="tab_description_icon" src="../Icons/property_info_G.png"/>Description</li>
<li class="tab tab_map"><img id="tab_map_icon" src="../Icons/property_map_icon_G.png" />Map</li>
<li class="tab tab_area_kn"><img id="tab_area_kn_icon" src="../Icons/property_direction_icon_G.png" />Area Knowledge</li>
</ul>
<div id="tab_data">
<div id="sp_tab1">
display the property details
</div>
<div id="sp_tab2">
<div id="map_canvas" style="width:61.4em; height:400px;"></div>
</div>
<div id="sp_tab3">
display property area knowledge
</div>
</div> <!--end tab_data-->
</div> <!--end selectPropertyTab-->
jQuery....
$(function () {
$("#selectPropertyTab").easytabs();
});
$("#selectPropertyTab").bind('easytabs:after', function () {
alert("tab no 2 is clicked......");
});
$(function () {
$("#selectPropertyTab").easytabs();
});
$(".tab_map").on("click",function () {
alert("tab no 2 is clicked......");
});
I Hope this will work ! Check this Fiddle
you can have conflict issue if you using .tab_map class somewhere. add id to your li tag
html
<li id="map_canvas_tab" class="tab tab_map"><img id="tab_map_icon" src="../Icons/property_map_icon_G.png" />Map</li>
jquery
$("#map_canvas_tab").on("click", function () {
alert("tab no 2 is clicked....");
});
I have a tabed screen and want to trigger a click on the selected tab once the form is submitted and the return is valid. Here a part of the html:
<ul id="tabUL" class="tabs js-tabs same-height">
<li class="current">
<a class="tabLink" href="#tabProducts" data-url="/bla/bla">Products</a>
</li>
</ul>
My success command is :
success: function(data, textStatus, XMLHttpRequest) {
$('#tabUL').find('li.current a').trigger('click');
}
This seems not working... Any help is appreciated :) Regards Andrea
Try using the a[href=""] selector:
$('#tabUL a[href="#tabProducts"]').trigger('click');
I put together a jsfiddle demo to show it in action, and how to optionally hide the other tabs since often when I'm programmatically forcing tabs its to require missing mandatory information be entered on the initial tab before unlocking the other tabs...
Edit
Here is the contents of the jsfiddle:
HTML
<div id="tabs">
<ul>
<li>Address</li>
<li>Shipping</li>
<li>Parts</li>
<li>Datasheets</li>
</ul>
<div id="tab0">
<h1>This is the first tab (0)</h1>
</div>
<div id="tab1">
<h1>This is the second tab (1)</h1>
</div>
<div id="tab2">
<h1>This is the third tab (2)</h1>
</div>
<div id="tab3">
<h1>This is the fourth tab (3)</h1>
</div>
</div>
<br/>
Select the
<select id="tabSelect">
<option value="0">1st</option>
<option value="1">2nd</option>
<option value="2">3rd</option>
<option value="3">4th</option>
</select>Tab and
<input type="checkbox" id="tabHide" checked="checked" /> Lock the Others
jQuery
$(document).ready(function () {
$('#tabs').tabs();
$('#tabSelect').change(function () {
//pass empty array to unlock any locked tabs
$('#tabs').tabs({disabled: []}).find('a[href="#tab' + $(this).val() + '"]').trigger('click');
if ($('#tabHide').prop('checked')) {
//hide will be an array like [0,2,3]
var hide = Array();
$('#tabs li').not('.ui-tabs-active').each(function () {
hide.push($(this).index());
});
$('#tabs').tabs({disabled: hide});
}
});
});
If you want to reload the tab programmatically then i recommend use Jquery Tab API utility like below:
This makes first tab active and then activates second tab, quite simple and also raises the events that would be normally raised when you click directly.
$( "#myTabs" ).tabs( "option", "active", 0 );
$( "#myTabss" ).tabs( "option", "active", 1 );
Also you can catch tabs active event like below for performing any operations
$( "#myTabs" ).on( "tabsactivate", function( event, ui ) {
// your custom code on tab click
});
rather than trying to trigger the click event itself (which I believe is not possible to invoke a user event programatically in this context), I suggest that you trigger the function that has to be called on click event, you might want to look into triggerHandler