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
Related
I'm using an accordion widget in my WP based website footer and I want to make all tabs closed by default (now the first tab is always shown). Here is a sample of code of this widget (I copied it deirectly from the inspector panel):
<section id="presscore-accordion-widget-9" class="widget widget_presscore-accordion-widget wf-cell wf-1-3">
<div class="widget-title">Formationen der otmarmusik</div>
<div class="st-accordion">
<ul>
<li><a class="text-primary" href="#"><span>Title</span></a><div class="st-content"><p>Text</p>
</div>
</li>
<li><a class="text-primary" href="#"><span>Title</span></a><div class="st-content"><p>Text</p>
</div>
</li>
<li><a class="text-primary" href="#"><span>Title</span></a><div class="st-content"><p>Text</p>
</div>
</li>
</ul>
</div>
</section>
I tried to use some custom JavaScript
$('.accordion').accordion({
active: false,
collapsible: true
});
but it doesn't help and it occurs a new error:
Uncaught TypeError: $ is not a function
So I have 2 issues:
First. How to make all tabs collapsed by default.
Second. How to use custom JavaScript function without any errors in
WP.
According to the Vindhyachal Kumar's answer, the solution was found by this code which works perfect:
jQuery().ready(function () {
setTimeout(function () {
jQuery('.st-accordion li:eq(0) a').trigger('click');
}, 1000);
});
Thank you for your help.
You can try this code
jQuery('.accordion').accordion({
active: false,
collapsible: true
});
jQuery().ready(function () {
setTimeout(function () {
jQuery('.st-accordion li:eq(0) a').trigger('click');
}, 1000);
});
This custom jQuery code will solve this issue.
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 want a particular div to shrink, (Complete data should be visible) every time when user clicks on the particular icon. Here I have the class, legend-icon. so I want the anotherID,for example #Chart to shrink when user click
HTML
<div id="id1">
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="legend-icon"></i> <b class="caret"></b>
</a>
<div id="legend_container" class="dropdown-menu">
<div id="smoother" title="Smoothing"></div><div id="legend"></div>
</div>
</li>
</ul>
</div>
<div id="in">
<div id="chart">
//my data
</div>
</div>
I tried like
$("i.legend-icon").click(function(){
$("#chart").animate({width: '-=50px',},"slow");
});
But Its not working. Its completely not displaying the div to -50px.. But I just want the div to shrink What should I do here?
Could you show your css for this elements to?
you can check my demo on jsfiddle, it works as you expect. But its not with your html and css, but it should be the same.
click me
<div class="animate-me"></div>
.animate-me {
width: 300px;
height: 100px;
background-color: aqua;
}
$(".click-me").click(function(){
$(".animate-me").animate({width: '-=50px',},"slow");
return false;
});
This seems to work just fine....
Maybe just try a bigger value, it really depends on how big your element is...
In my example, its 500px wide, and I shrink it 450...
Example Here
$("i.legend-icon").click(function(){
$("#chart").animate({width: '-=450px',},"slow");
});
try to be more specific on what you want the container to be after shrinking. animat can have much more controls:
... animate(
{
"left":<positionafter shrinking>,
"width":["toggle", "swing"]
},
{
"duration": 0,
"step": function( now, fx ){},
"complete": function(){
have a look at the animate doc on the details.
I'm trying to change dynamically the content of a dialog, but when I change to content, the layout is changed.
Basically, I have a ... that I took from the jquery-ui demo and want to change the content of a ... using html();
here my HTML
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
<br />
<ul id="suggestions0">
<li id="suggestion0-0" class="suggestion">BLO</li>
<li id="suggestion0-1" class="suggestion">BLU</li>
<li id="suggestion0-2" class="suggestion">BLL</li>
<li id="suggestion0-3" class="suggestion">BOO</li>
<li id="suggestion0-4" class="suggestion">CLA</li>
</ul>
<div id="footer">
<span id="manual-0" class="manual">MANUAL</span><span id="next-0" class="next">Next</span>
</div>
<br />
</div>
That's the plan dialog that I want to show.
I have 2 buttons, if we click on OK, it will just show the current dialog without modification, and the important part is that the "li" elements are on 2 lines
like
BLO BLU BLL BOO
CLA XXX ....
but when I change the content dynamically, the "li" elements became aligns on one line instead of 2 are more.
I'm trying to figure out what I did wrong.
here the HTML for the click
<body>
<?prettify lang=java linenums=false?>
<pre class='prettyprint' >
<code>
<span class="highlightOK" id="highlight-0">OK</span>***********************<span class="highlightNOTOK" id="highlight-1">NOT OK</span>
</body>
$('span.highlightOK').click(function() {
setTimeout(function(){ $( "#dialog" ).dialog(); }, 100);;
});
$('span.highlightNOTOK').click(function() {
$("#suggestions0").html("<li id='test0-1' class='suggestion'>BLO</li><li id='test0-2' class='suggestion'>BLO</li><li id='test0-3' class='suggestion'>BLO</li><li id='test0-4' class='suggestion'>BLO</li><li id='test0-5' class='suggestion'>BLO</li><li id='test0-6' class='suggestion'>BLO</li>");
setTimeout(function(){ $( "#dialog" ).dialog(); }, 100);;
});
I have here a live demo
http://jsfiddle.net/survivant/cyFxp/
It seems that adding line breaks between the li elements to the dynamic html solves this
$("#suggestions0").html("<li id='test0-1' class='suggestion'>BLO</li>\n<li id='test0-2' class='suggestion'>BLO</li>\n<li id='test0-3' class='suggestion'>BLO</li>\n<li id='test0-4' class='suggestion'>BLO</li>\n<li id='test0-5' class='suggestion'>BLO</li>\n<li id='test0-6' class='suggestion'>BLO</li>");
http://jsfiddle.net/Qjbb3/
So I have tried everything and cannot seem to figure this out, what I have is an accordian that plugs in data dynamicly, what I need to happen is I need the id of the data to be pluged in as the id for the h3 section that then is in turn clicked and opened...
<script>
jQuery(function() {
jQuery( "#work" ).accordion({
collapsible: true,
active: 1});
});
</script>
So right now the first H3 will be open, but I want to be able to set which div by the H3 id
<h3 id='$record[wid]'>
<a id='clickable' href='#'>
<div class='workitem'>
<span class='mosaic-overlay'>
<div class='details'>
<a name='$record[wid]'></a>
<span class='title'>$record[title]
</span>
<br />
<span class='subtitle'>$record[subtitle]
</span>
</div>
</span>
<span class='mosaic-backdrop'>
<img src='/img/work/$record[image]' />
</span>
</div>
</a>
</h3>
On the accordion I use in my project, I just set the active to "h3#" + the id of the accordion fold I want to open.
<script type='text/javascript'>
jQuery(function() {
jQuery( "#work" ).accordion({
collapsible: true,
active: "h3#id"
});
});
</script>
I believe its the standard jQueryUI accordion, so hopefully it will work for you too.
For anyone else who came across this older topic, jQuery Accordion now uses a number based value for the "active" option > https://api.jqueryui.com/accordion/#option-active > 0 = the first accordion tab > 1 = the second accordion tab
etc. active: 1 will display the second accordion tab open/active. Additionally you probably want to use the autoHeight, clearStyle and heightStyle options so that you do not have additional whitespace at the bottom of the active accordion tab.
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($){
$( "#accordion" ).accordion({
collapsible: true,
active: 1,
autoHeight: true,
clearStyle: true,
heightStyle: "content"
});
});
/* ]]> */
</script>