I need to do this action on button click, which is in the collapsible, so i do it like:
my_button.closest('div[data-theme="b"]').find('a.ui-btn-up-b').toggleClass('ui-btn-up-b ui-btn-up-d');
But unfortunately there still remains some styles which needs to be changed, but i don't know which...
Updated answer
Since the dynamic solution doesn't work for collapsible, here is a manual solution.
Working demo
Code
$('#button').on('click', function () {
var oldclass = 'ui-btn-up-b ui-body-b';
var newclass = 'ui-btn-up-d ui-body-d';
$('[data-role=collapsible]').find('a').removeClass(oldclass + ' ui-btn-hover-b').addClass(newclass + ' ui-btn-hover-d');
$('[data-role=collapsible]').find('.ui-collapsible-content').removeClass(oldclass).addClass(newclass);
});
Why collapsible data-theme cant be changed dynamically?
Old answer
Unfortunately, the below dynamic solution surprisingly doesn't work.
Where .selector is the ID of the Collapsible.
$('button').on('click', function () {
// change the theme
$( ".selector" ).collapsible( "option", "theme", "a" );
// apply new styles
$( ".selector" ).collapsible().trigger('create');
});
I'm working with jquery-ui. I can create elements with titles and show the titles. However on a click, I would like to take the title and populate another div (this is because touch enabled devices do not have tooltips). I can get a click event, but I can't get the title while in the click event.
$("div").click(function( event ) {
// just to prove that we are entering this event
$("#preShow").html ( Date() );
// show the title
var toolTip = this.attributes.title.value;
$("#show").html ( toolTip );
// just to prove that there was no crash
$("#postShow").html ( Date() );
});
I have also tried using
var toolTip = $(this).attr ("title");
Here is the jsfiddle showing the problem
http://jsfiddle.net/jK5xQ/
The same code works if I create an HTML file and run it in Firefox with a breakpoint at the first line of the click event. Has anyone experienced this?
This is because jQueryUI's Tooltip removes the title and uses it. Try going about it like this...
$(document).ready(function () {
$( document ).tooltip( {
track: true,
content: function() {
return $( this ).attr( "title" );
}
});
$('div').click(function(){
$('#show').html($('#' + $(this).attr('aria-describedby')).children().html());
});
});
DEMO: http://jsfiddle.net/jK5xQ/4/
Let me know if you have any questions!
is there a way to manually open close the jquery ui tooltip? I just want it to react to a click event toggling on/off. You can unbind all mouse events and it will rebind them when calling .tooltip('open'), even though that should not initialize or set events imo, since if you try to run .tooltip('open') without initializing, it complains loudly about not being initialized.
jltwoo, can I suggest to use two different boolean switches to enable auto-open and auto-close? With this change your code will look like this:
(function( $ ) {
$.widget( "custom.tooltipX", $.ui.tooltip, {
options: {
autoShow: true,
autoHide: true
},
_create: function() {
this._super();
if(!this.options.autoShow){
this._off(this.element, "mouseover focusin");
}
},
_open: function( event, target, content ) {
this._superApply(arguments);
if(!this.options.autoHide){
this._off(target, "mouseleave focusout");
}
}
});
}( jQuery ) );
In this way, initializing the tooltip as:
$(someDOM).tooltipX({ autoHide:false });
it shows by itself when the mouse is over the element but you have to manually close it.
If you want to manually control both open and close actions, you can simply use:
$(someDOM).tooltipX({ autoShow:false, autoHide:false });
If you want to just unbind the events and woudn't like to make your own custom tooltip.
$("#some-id").tooltip(tooltip_settings)
.on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
});
$("#some-id").attr("title", "Message");
$("#some-id").tooltip("open");
mouseout blocks the tooltop disappearing by moving the mouse cursor
focusout blocks the tooltop disappearing by keyboard navigation
The tooltip have a disable option. Well i used it and here is the code:
$('a').tooltip({
disabled: true
}).click(function(){
if($(this).tooltip('option', 'disabled'))
$(this).tooltip('option', {disabled: false}).tooltip('open');
else
$(this).tooltip('option', {disabled: true}).tooltip('close');
}).hover(function(){
$(this).tooltip('option', {disabled: true}).tooltip('close');
}, function(){
$(this).tooltip('option', {disabled: true}).tooltip('close');
});
Related to my other comment, I looked into the original code and achieved manual open/close by extending the widget and adding a autoHide option with version JQuery-UI v1.10.3. Basically I just remove the mouse listeners that were added in _create and the internal _open call.
Edit: Separated autoHide and autoShow as two separate flags as suggested by #MscG
Demo Here:
http://jsfiddle.net/BfSz3/
(function( $ ) {
$.widget( "custom.tooltipX", $.ui.tooltip, {
options: {
autoHide:true,
autoShow: true
},
_create: function() {
this._super();
if(!this.options.autoShow){
this._off(this.element, "mouseover focusin");
}
},
_open: function( event, target, content ) {
this._superApply(arguments);
if(!this.options.autoHide){
this._off(target, "mouseleave focusout");
}
}
});
}( jQuery ) );
Now when you initialize you can set the tooltip to manually show or hide by setting autoHide : false:
$(someDOM).tooltipX({ autoHide:false });
And just directly perform standard open/close calls in your code as needed elsewhere
$(someDOM).tooltipX("open"); // displays tooltip
$(someDOM).tooltipX("close"); // closes tooltip
A simple hotfix, until I have the time to do official pull request, this will have to do.
Some compilation from other SO questions.
Example
Show tooltip on hint click, and hide tooltip on elsevere click
$(document).on('click', '.hint', function(){ //init new tooltip on click
$(this).tooltip({
position: { my: 'left+15 center', at: 'center right' },
show: false,
hide: false
}).tooltip('open'); // show new tooltip
}).on('click', function(event){ // click everywhere
if(!$(event.target).hasClass('hint'))
$(".hint").each(function(){
var $element = $(this);
if($element.data('ui-tooltip')) { // remove tooltip only from initialized elements
$element.tooltip('destroy');
}
})
});
$('.hint').on('mouseout focusout', function(event) { // prevent auto hide tooltip
event.stopImmediatePropagation();
});
I'm using jqueryui combobox example at http://jqueryui.com/demos/autocomplete/combobox.html
I added the script seen below to catch the selected value of combobox:
<div id="selectedOpt">
</div>
<script>
$(document).ready(function() {
$("#combobox").change(function() {
var retval = $(this).val();
$("#selectedOpt").html("retval=" + retval);
});
});
</script>
However, it does not work as expected:
the div selectedOpt does not show selected value of combobox each time
the change event occurs
If "show underlying effect" is selected (pls try at url above), a standard dropdown list
appear. When trying to change value of
that dropdown list, then the div
selectedOpt is able to show value
correctly.
The goal is to have div selectedOpt display the selected option of the combobox.
Please advise and please explain why (1) does not work while (2) works.
PS: all neccessary js, css are correctly included.
Thanks for your kind attention.
SOLUTION FOUND:
http://robertmarkbramprogrammer.blogspot.com/2010/09/event-handling-with-jquery-autocomplete.html
Please change your script to match the code below:
<script>
function test()
{
var retval = $("[id *=dropdown] :selected").val();
$("#selectedOpt").html("retval=" + retval);
}
</script>
And call this script from the server side like this:
dropdown.Attributes.Add("onchange","javascript: return test();")
To show label or value of combobox in your div you have to include your function as an option. Something like this:
$( ".selector" ).autocomplete({
change: function(event, ui) {
$("#selectedOpt").html("retval=" + ui.item.value);
}
});
Use ui.item.label if you want a label instead.
I've got some jQuery code written to enable autocomplete on an input field.
I'm having two issues with it that I can't seem to fix.
Tabbing away from the field will not populate the input. What I need is for either the FIRST suggestion to populate the field if nothing is selected(clicked or selected via up/down) OR for the highlighted item to be populated in the field. (note: highlighting is done via up/down arrows)
When using the up/down arrows I need the input to display the "LABEL" and not the "VALUE" Currently pressing up/down will populate the input the the VALUE.
Any advice will be greatly appreciated.
Here is my JSBIN testing ground.
http://jsbin.com/iyedo3/2
Note: the <input id="dummy" /> field is just there to give you something to "tab" over to. If it's removed the help area is expanded.
I think I've figured this out. Using the jQuery AutoComplete Helper
$(function () {
$(label_element).autocomplete({
source: json_string,
selectFirst: true,
focus: function (event, ui) {
return false;
},
select: function (event, ui) {
$(value_element).val(ui.item.value);
$(label_element).val(ui.item.label);
return false;
}
});
});
And the following Select First Script
(function ($) {
$(".ui-autocomplete-input").live("autocompleteopen", function () {
var autocomplete = $(this).data("autocomplete"),
menu = autocomplete.menu;
if (!autocomplete.options.selectFirst) {
return;
}
menu.activate($.Event({ type: "mouseenter" }), menu.element.children().first());
});
} (jQuery));
Now anywhere I need to add autocomplete, I just use this.
<script type="text/javascript">
var json_string = // My Autocomplete JSON string.
var label_element = "#RegionName";
var value_element = "#RegionID";
</script>