I updated jquery 1.7 to 1.9
In my old code, I had a function that build my Tabs.
After the first tab was selected and showed me the data, I used this:
$("mytabs").tabs("select",0);
Now, I've changed for this code:
$("#mytabs").tabs("option", "activate", 0);
but don't tab opens I have to click in it and show me the data in the tab.
How I can resolve this problem? I need in jquery 1.9 active tab 0 and show me the data.
I also tried:
$( "#mytabs" ).tabs( "option", "active", 0 );
the same problem
So show me the Tab
then I have to click en first tab and show me the data:
The correct option is active, not activate.
E.g.:
$( "#mytabs" ).tabs( "option", "active", 0 );
jQuery UI 1.9 uses jQuery 1.6. You might be having trouble because you are using the wrong version.
Related
I implemented the jQuery UI datepicker in my site and noticed I couldn't click 'back' to the previous month.
My HTML:
<input type='text' id='date'>
the init script:
$( '#date' ).datepicker( {
numberOfMonths: 4,
showCurrentAtPos: 1,
showButtonPanel: true
} );
I created a jsFiddle with jquery-ui-1.12.1 loading which replicated above problem. I solved it for now my switching to jquery-ui-1.9, but I'd like to be able to use the latest version. Is there anything that can be done to fix this problem?
I did some extensive debugging, the 'prev' button event is being launched, it just doesn't appear to call the update function with the right data, causing the datepicker to be updated with the same month first as it's showing before the click.
I'm starting to think this is a bug, if I set showCurrentAtPos to 0 instead of 1 the datepicker does work as expected (jsFiddle)
Was able to replicate the issue using jQuery 1.12.4 & UI 1.12.1, matching Demo versions: http://jqueryui.com/datepicker/. Working test: https://jsfiddle.net/Twisty/wkpvbp5u/
If I comment out showCurrentAtPos, it works as expected.
JavaScript
$(function() {
$('#date').datepicker({
numberOfMonths: 4,
//showCurrentAtPos: 1,
showButtonPanel: true
});
});
So the issue may be in behavior of this option. I broke it more by setting the value to -1 as a test too. The Next button fails.
Found: https://bugs.jqueryui.com/ticket/15129 so looks like you can use jQuery UI 1.11.4 but not 1.12.1. Might be a fix: https://github.com/jquery/jquery-ui/commit/17404ced478a235651513fa7bef3473ef1b039e8
Hope that helps.
This seems to be a problem with autocomplete in the jQuery UI 1.9.x versions- Is there any way to keep the jQuery UI autocomplete menu open when desired after clicking on some items? In 1.9.2, no matter what I try, the menu just won't stay open, no matter what I try.
I must use jQuery UI 1.9.2. I've seen solutions for earlier versions of jQuery UI that work, but they do not work with 1.9.2.
This code works with an older version of jquery + jquery UI:
var $input = $("input").autocomplete({
source: ['Hello', 'Goodbye', 'Foo', 'Bar']
});
$input.data("autocomplete").menu.options.selected = function(event, ui) {
// clear out old function
};
http://jsfiddle.net/nr757/
Similar code does not work in ui 1.9.2:
http://jsfiddle.net/Db9VE/
$( "#input" ).autocomplete({
source: availableTags,
close : function (event, ui) {
if (!$("ul.ui-autocomplete").is(":visible")) {
$("ul.ui-autocomplete").show();
}
}
});
I'm using the most recent JQuery UI Tabs (1.10.2). http://jqueryui.com/tabs/
I need to be able to link to individual tabs from external pages. Maybe the more correct way to say it would be to say that I need to be able to change the initially active tab via a bookmarble link.
I know how to set the active index so that #tabs-3 is the active tab
$( "#tabs" ).tabs({ active: 5 });
But I need to know how to change the value for .tabs({ active }) with the url hash so that a link of "tabs-page.html#tabs-3" will load the third tab of "tabs-page.html" by changing .tabs({ active }) to "2" (since it is a zero-based integer).
I'm really more of an html/css designer and a novice to JQuery/JQuery UI, please and thank you for your help. I've searched and found fixes for earlier versions and alternate libraries like JQuery Tools, but nothing for JQuery 1.10.2. I've found ways to link to the section and then reset the window location, but that results in a lot of "jumpiness" as the browser switches between window locations. If there is another page with this fix please link in the comments. THANKS SO MUCH!!!
You will need to read the value of the hash within your jQuery. Some good information can be found here Getting URL hash location, and using it in jQuery
var url = "http://site.com/file.htm#3";
var hashValue = url.substring(url.indexOf('#')).replace('#',''); // '3'
Once you have this, you will be able to set the active tab on the jqueryUI Tabs
$('#tabs').tabs( "option", "active", hashValue );
You would need to do all of this when the page initially loads, so within a $(function(){ ... });
Update
Here is the full code;
<script>
$(function () {
// run the jquery ui plugin
$('#tabs').tabs();
// grab the url
var url = document.URL;
// grab the value of the hash
var hashValue = url.substring(url.indexOf('#')).replace('#', '');
// check to make sure it is a number
if (!isNaN(hashValue)) {
// set the active tab
$('#tabs').tabs("option", "active", hashValue);
}
});
</script>
I am using jquery ui tabs and it works perfectly.Heres the code for jquery-ui tabs
$(function() {
$( "#tabs" ).tabs();
});
Suddenly i came across a scenario where i had to find the index of current active tab.So i went through the Api Documentation and find out the below code.
Get or set the active option, after initialization:
// getter
var active = $( ".selector" ).tabs( "option", "active" );
// setter
$( ".selector" ).tabs( "option", "active", 1 );
What is ".selector " here and how can i get the current index of the active tab active tab ?
.selector is the element upon which you invoked tabs(), so if your first code snippet is from your code, you need to replace .selector with #tabs.
For example:
var active = $("#tabs").tabs( "option", "active");
Here's some of the documentation on the Jquery UI Tabs - I haven't worked with them much...
jQuery UI Documentation (Tabs)
It would possibly be something like
.tabs( "select" , index )
or
$('#nameOftabs').tabs({ selected: index });
Where index would be the default tab that you would like selected.
More answers
answer 1
answer 2
Hope this helps
I have problem getting newer version of jscrollpane to work with jQuery UI tabs.
I get only one tab (first one) working, but no others; i tried fix explained here with previous version, placing additional <div> controlled by tabs (and inside are divs controlled by jScrollPane) , as described here, but still with no luck. Has anyone experienced simmilar issues ? Thanks for clues!
I came to solution at last more/less on my own, of course with help by looking at this explanation given by jscrollpane author himself about this issue, but for previous version of jscrollpane.
As this did not work out of the box, and i still had problems implementing the solution, i added a click listener to tabs links, and when clicked, added jscrollpane to content div, like this
jQuery("#tabs ul li a").click(function () {
clickednum = "#tabs-" + jQuery(this).parent().attr("id");
jQuery(clickednum + " .skroler").jScrollPane();
});
what i am doing here, is to wait for user to click on some tab link, and then add jScrollPane to tab content that coresponds to clicked tab link.
.skroler is an extra-div where is tab content, because it is described by script author that it must be done this way in order to work)
I am reckognizing tabs by li id attribute (which i was in need to generate from PHP. for other reasons)
This is specific implementation - from working example, probably it could be done simpler in other environment.
Ah, and of course, at the start of the story, you need to initialize jScrollPane to first opened tab like
jQuery("#tabs-1 .skroler").jScrollPane();
I have the same problem and solved it by adding ids to the li tags that correspond to the generated tabs:
<ul>
<li id="details">Details</li>
<li id="history">History</li>
<li id="examinations">Examinations</li>
<li id="diagnosis">Diagnosis</li>
</ul>
Then, for example:
$('#diagnosis').click(function() {
$('.diagnosis').jScrollPane();
});
Just ran into the same issue
$( "#tabs" ).tabs({
//for the initially loaded tab
create: function( event, ui ) {
$(ui.panel).jScrollPane();
},
//for the tabs opened later
activate: function( event, ui ) {
$(ui.newPanel).jScrollPane();
},
});
More info here http://api.jqueryui.com/tabs/