We Keep Coding

Two jquery ui tabbed divs on one page. One works, the other doesn't

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");
}
}
});
});

Jquery show hide div when click on link

I am trying to show hide div blocks depending on the link on which it click. By default all div will hide. All helps are appreciated.
HTML Code -
<div class="singleFlights">
<div class="itinerarySummary">
<div class="itineraryMenu">
<ul class="list-inline">
<li>Flight itinerary</li>
<li>Fare rules</li>
<li>Baggage Information</li>
</ul>
</div>
<div class="itineraryPanel">
<div id="flight-itinery" class="itineraryPanelItem">
<!-- Content Here -->
</div>
<div id="fare-rules" class="itineraryPanelItem">
<!-- Content Here -->
</div>
<div id="baggage-info" class="itineraryPanelItem">
<!-- Content Here -->
</div>
</div>
</div>
</div>
<div class="singleFlights">
.....................
.....................
</div>
Requirements -
By default 'itineraryPanel' div hide.
If user click on 'Flight itinerary' link under 'itineraryMenu' the div 'itineraryPanel' will show (slide down)with 'itineraryPanelItem' item div. Others div '#fare-rules' and '#baggage-info' will hide. Same will be happen when click on Fare rules and Baggage Information also.
I try with -
$(document).ready(function(){
if($('.flightListing').length > 0){
$('.singleFlights').each(function(){
$('.itineraryMenu ul.list-inline li a').click(function(){
});
});
}
});
I am using bootstrap3. Note that I dont want to show 'itineraryPanel' div until user not click of any link. and after click 2nd time on same link open div slide up and hide.
Here is the live code after included of Vincent G codes - http://45.114.142.104/design//test/cloud/flight-listing-1-n.html

Here's a way to do it with jQuery and data-href elements
See this fiddle
$(function(){
$(".list-inline a").click(function(){
hrefId = $(this).data('href');
$('.itineraryPanelItem').slideUp();
if($(hrefId).is(':visible')){
$(hrefId).slideUp();
}else{
$('.itineraryPanel').show();
$(hrefId).slideDown();
}
});
});
EDIT
With multiples content, you have to use class instead of id
See this updated fiddle
$(function(){
$(".list-inline a").click(function(){
hrefClass = $(this).data('href');
$(this).parents('.singleFlights').find('.itineraryPanelItem').slideUp();
if($(this).parents('.singleFlights').find($(hrefClass)).is(':visible')){
$(this).parents('.singleFlights').find(hrefClass).slideUp();
}else{
$(this).parents('.singleFlights').find('.itineraryPanel').show();
$(this).parents('.singleFlights').find(hrefClass).slideDown();
}
});
});

jquery mobile single page size cap

I using phonegap with jquery, jquery mobile min and a custom page swipe code to build an app. It is basically one main menu, leading to ten sub-menus, leading to approx 200 static html pages.
I combined it all into one single page so that it didn't have to reload the scripts every page change. This worked initially, but as I continued to add to the page, after a certain point in the page none of the links work, nothing happens when they are clicked.
I'm confident it's not a problem with the html for those links, every link after that point fails. If I cut/paste the link to the start of the doc it works fine, but then the next in line after it's original position no longer works.
At the point it stopped, the page was approx 250kb in size and 3500 lines of code.
I temporarily fixed it by creating 10 single pages, one for each submenu, which does work, but introduces it's own problems that I want to avoid if I can.
Do phonegap, jquery, or jquery mobile min have caps on how large a single page can be before they start to ignore the remainder of the code? And is there anything I can do to get around this?
This is the custom scrolling script I am using:
function navnext( next ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", next, {
transition: "none"
});
}
function navprev( prev ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", prev, {
transition: "none",
reverse: true
});
}
$( document ).one( "pagecreate", "#page1", function() {
// Handler for navigating to the next page
// Navigate to the next page on swipeleft
$( document ).on( "swipeleft", ".ui-page", function( event ) {
// Get the filename of the next page. We stored that in the data-next
// attribute in the original markup.
var next = $( this ).jqmData( "next" );
if ( next ) {
navnext( next );
}
});
// The same for the navigating to the previous page
$( document ).on( "swiperight", ".ui-page", function( event ) {
var prev = $( this ).jqmData( "prev" );
if (prev) {
navprev( prev );
}
});
});
And this is what the html looks like:
<i></i><!DOCTYPE HTML>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.min.js"></script>
<script src="js/jqueryswipegrey.js"></script>
<link rel="stylesheet" href="css/deck.css"></link>
</head>
<body>
<div class="title"><h1> App Title</h1><img class="home" src="img/home.png"></div>
<!-- -------------------------------MAIN MENU-------------------------------------------------------------------------------------------------- -->
<div id="page1" data-role="page" data-prev="#page1" data-next="#pagesub1"><div class="wrapper"><ul data-role="listview" data-inset="true"><h2>
Main Menu
</h2></ul> <div data-role="content">
<font size="4">
<p class="line"><img src="img/redline.png" width="100% of window";></p>
<p class="menu"> <a class="link" href="#pagesub1"><img class="smallcardplot" src="img/01001.jpg"> Link to First Submenu</a></p>
<p class="line"><img src="img/redline.png" width="100% of window";></p>
And then:
<div id="pageplot" data-role="page" data-prev="#page1" data-next="#pagesubmenu2"><div class="wrapper"><ul data-role="listview" data-inset="true"><h2>
1st Submenu
</h2></ul> <div data-role="content">
<font size="4">
<p class="line"><img src="img/redline.png" width="100% of window";></p>
<p class="menu"> <a class="link" href="#page01001"><img class="smallcardplot" src="img/01001.jpg"> First Plot Page</a></p>
<p class="line"><img src="img/line.png" width="100% of window";></p>
And then:
<div id="page01001" data-role="page" data-prev="" data-next="#page01002"><div class="wrapper"><ul data-role="listview" data-inset="true"><h2>
First Content Page
</h2></ul> <div data-role="content">
<img src="img/01001.jpg" class="plotimg"> <ul data-role="listview" data-inset="true">
<p>A few lines of text for this page
</ul></div></div></div>

I'd messed up an html tag. Fixed now.

Tabs Control Inside Dialog Control

I'm trying to stick a tabs jQuery UI widget inside the dialog widget, but it is not working for me. I have a bunch of data being retrieved from the database and is being rendered on the screen. When a user clicks on a (+) button, a dialog should open with its contents being tabbed. For some reason this is not working. Here's my code:
The HTML structure is as follows:
<div id="tabs-{index}">
<ul>
<li>title1</li>
<li>title2</li>
</ul>
<div id="some-id-{index}>content</div>
<div id="another-id-{index}">content</div>
</div>
And here's my jQuery code:
$('#disease-read-more-dialog').dialog({
dialogClass: 'disease-read-more',
autoOpen: false,
modal: false,
draggable: false,
width: '500px',
open: function () {
$('#ui-dialog-title-disease-read-more-dialog').html($('#disease-read-more-dialog').attr('title'));
var content = $('#disease-read-more-dialog').find('.hidden-disease-info').first();
if (content.length > 0) {
var index = content.data('index');
var selector = '#read-more-tabs-' + index;
$(selector).tabs();
}
}
});
Note that the index is simply used because I've output all the data on screen on page load rather than doing an AJAX request (because the amount of data is relatively small), and then when the user clicks on the (+) I load the HTML content into the dialog. Hence the index is used to prevent messing up the tag ID's.
UPDATE:
It does not work as in the call to $(selector).tabs() does not do what it is supposed to do. So what actually gets rendered is an un-ordered list rather than a tabs control.
Any thoughts why this is not working?

The complete solution for displaying tabs widget inside dialogue widget using jQuery UI as below:
HTML:
<div id="dialgue" title="Tabs with Dialogue">
<div id="tabs">
<ul>
<li>
<a href="#tabs-1">
Tab-1
</a>
</li>
<li>
<a href="#tabs-2">
Tab-2
</a>
</li>
<li>
<a href="#tabs-3">
Tab-3
</a>
</li>
</ul>
<div id="tabs-1">
<p>
Contents of Tab-1 has been displayed here...!
</p>
</div>
<div id="tabs-2">
<p>
Contents of Tab-2 has been displayed here...!
</p>
</div>
<div id="tabs-3">
<p>
Contents of Tab-3 has been displayed here...!
</p>
</div>
</div>
</div>
<input type="button" id="btndialogue" value="Show Dialogue with Tabs" />
CSS:
.ui-widget{
font-size:14px !important;
}
.ui-dialog-title{
font-weight:bold;
}
.ui-tabs .ui-tabs-nav{
font-size:13px;
}
.ui-tabs-panel{
font-size:12px;
}
JQuery:
$(function() {
$("#dialgue").dialog({
autoOpen: false,
modal: false,
draggable: false,
title: 'Tabs with Dialogue',
show: 'slide',
hide: 'slide',
width: '500',
open: function(event, ui) {
$("#tabs").tabs();
}
});
$("#btndialogue").click(function() {
$("#dialgue").dialog('open');
});
});
Note: Before test/run above script, need to include latest jquery.js, jquery-ui.js and jquery-ui.css files.
I have created a bin with the solution on http://codebins.com/codes/home/4ldqpbx

How to trigger('click') on jquery tab's currently active tab

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