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
Related
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.
When I load my page the datepicker on my div always show in english, I have to click it to show in other language, as you can see in this fiddle: http://jsfiddle.net/bFHxf/
If you change from div to input there is no problem with it since you have to click it to show... is this some kind of feature or bug?
Any workaround?
I wrapped your code in the $(document).ready() function and that seems to take care of the problem.
http://jsfiddle.net/qtNyr/
Hope that helps!
I think that you are initializing the datepicker too early.
If you wait until the document is loaded, it should work. You can do this by surrounding the existing JavaScript code with
$(function() { existing code goes here });
So the result might look like:
$(function(){
$.datepicker.setDefaults( $.datepicker.regional[ "nl" ] );
$('#date').datepicker({
numberOfMonths: 2,
showButtonPanel: true,
dateFormat : 'dd/mm/yy'
});
})
Link to jsFiddle
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Sortable and droppable knockout list
I am using knockout to bind a UL. I am wanting to gives users the ability to drag and drop a LI and for my viewmodel to update with the reorder.
Drag and drop is working and I have the correct event working within my jquery but I am not sure how to make the update.
I have had a hunt around the documentation but cant find anything.
I've created a fiddle to make explaining what I am doing a little easier
Js Fiddle here
Any suggestions would be awesome!
Updated the jsfiddle link
I've never worked with Knockout and I don't have time to understand its intricacies right now, so this isn't a complete solution, but here's something to get you started. See below for links to some pages I found while searching that may help you complete the solution.
This is the part that I changed from your original fiddle:
var view_model = new ViewModel(initialData);
ko.applyBindings(view_model);
$(function() {
$( "#sortable" ).sortable({
revert: true,
stop: function(event, ui) { console.log("stop event")},
start : function ( event, ui ) {
ui.item.data( 'previous_index', ui.item.index() );
},
// start
update : function ( event, ui ) {
var question = view_model.questions.splice(
ui.item.data( 'previous_index' ), 1
)[0];
view_model.questions.splice( ui.item.index(), 0, question );
ui.item.removeData( 'previous_index' );
}
// update
});
});
References:
jQuery UI Sortable, how to determine current location and new location in update event?
get the start position of an item using the jquery ui sortable plugin
jQuery Sortable() with original position placeholder?
knockout + jqueryui draggable/droppable follow-up
Ryan Niemeyer has authored a Knockout plug-in for this purpose:
https://github.com/rniemeyer/knockout-sortable
Here is an updated blog entry:
http://www.knockmeout.net/2012/02/revisiting-dragging-dropping-and.html
I have a web page requires both jQuery and Mootools to function. The conflict between these 2 libraries were solved when adding jQuery.noConflict(); to the script.
But I also want to popup a jQuery dialog window when the jQuery user input validation fails.
jQuery.noConflict();
function OnButton1()
{
var noOfChecked = jQuery("input:checked").length;
if(noOfChecked > 0)
{
jQuery( "#dialog" ).dialog({
modal: true,
buttons: {
"OK": function() {
jQuery( this ).dialog( "close" );
}
}
});
return false;} }
The problem is that the jQuery dialog window did not popup. It seems that the noConflict() doesn't solve the problem. But the strange thing is that the jQuery is actually working because the validation using jQuery is actually functioning. So I just don't understand why jQuery is working but jQuery UI is not.
So can anyone please help me to get my jQuery UI working with Mootools? Thanks in advance!
It should be working with jQuery.noConflict() but sometimes you need to change jquery name completely.
var $j = jQuery.noConflict();
After that use $j instead of $.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
I am using jquery-ui to implement tabs.
However, I need to use it more than one on the same page.
but jquery uses the id "tabs" (as opposed to class or something), so it only works for the first instance.
Could you change the tabs prefix?
$( ".selector" ).tabs({ idPrefix: 'ui-tabs-primary' });
Other than that, it seemed to work for me out of the box.
Another way is:
$(document).ready(function() {
$("#tabs1").tabs();
$("#tabs2").tabs();
});
maybe not the best way, but I worked for two tabs
first tab
$(function(){
var options = {
event:'mouseover',
selected:0
};
$("#tabs").tabs(options);
});
<div id="tabs">.....</div>
second tabs
$(function(){
var options = {
event:'mouseover',
selected:0
};
$(".tabs").tabs(options);
});
<div class="tabs">.....</div>
$(document).ready(function()
$("#tabs1, #tabs2").tabs();
});
$(document).ready(function()
$("#tabs1, #tabs2").tabs();
});
It works perfect! You can add the tabs you want.
$( "#tabs, #tabs1, #tabs2" ).tabs();
Thank you very much user3152277!