I wanna remove icon after listview itme is clicked:
$('ul li#' + id).prop('data-icon', false);
listview.listview('refresh'); didn't work
Google found: https://github.com/jquery/jquery-mobile/issues/5108 and add:
listview.trigger('create'); or listview.children('li a').button(); fails too.
JQuery mobile listview refresh icon $('li').buttonMarkup({icon : 'false'}); fails again.
You need to remove classes ui-btn-icon-right and ui-icon-plus. You can do it directly using .removeClass("ui-btn-icon-right ui-icon-plus") or use .match in case you have different icons used in the same listview.
$(document).on("pagecreate", function () {
$("#listviewID li a").on("click", function () {
$(this).removeClass(function (i, uiClass) {
return (uiClass.match(/\S+-icon-\S+/) || []).join(' ');
});
});
});
Demo
Related
I'm trying to make a jquery-ui tooltip show/hide on a click event. Also I don't want it to show hide on mouse enter/leave.
Here is a fiddle with a normal tooltip : http://jsfiddle.net/Michael_0/sLhD9/
(unfortunately jsfiddle doesn't seem to be able to include jquery-ui from google cdn ?).
I had the idea to disabled the tooltip at initialization then enable it on click just before showing it, it works but I can't prevent the tooltip from hiding when the mouse leaves the target.
$("#myDiv").tooltip({
disabled: true,
content: function () {
return "<div>Custom content</div>"
}
});
$("#myDiv").click(function () {
$(this).tooltip("option", "disabled", false);
$(this).tooltip("open");
});
To do this you need to unbind the default event handlers:
$("#myDiv").unbind('mouseover');
$("#myDiv").attr('ttVisible','no');
$("#myDiv").click(function() {
if($("#myDiv").attr('ttVisible') == 'no') {
$("#myDiv").tooltip('open');
$("#myDiv").unbind('mouseleave');
$("#myDiv").attr('ttVisible','yes');
} else {
$("#myDiv").tooltip('close');
$("#myDiv").attr('ttVisible','no');
}
});
You can track the current state however works for you, I used an attribute called ttVisible. jQuery UI doesn't seem to expose the current state of the tooltip in any way.
I am trying to run jQuery code on elements contained within a jQuery tab which is not selected. If i quickly click the tab before the Ajax loading has completed it works, but if i leave it running without being selected the code will not be executed.
As ou can see below, the tab i want to load data into were not defined from the beginning, it was created when the user clicked a button.
The functionality i want to achieve is tabs, where the user will search for X in the start tab, then the new tab is created, content is loaded in the background (needs jQuery code for grids and format). Then the user can click the tab and see the results.
jQuery 1.10
jQuery-UI 1.10
Example:
<script>
$(document).ready(function(){
var myindex = 1;
$("#startsearch").click(function() {
search = escape(($("#search").val()));
searchdate = ($.datepicker.formatDate('yy-mm-dd', new Date()));
var tabs = $( "#tabs" ).tabs();
var ul = tabs.find( "ul" );
// Add new tab
newhtml = "<li id='henrik_tab_" + myindex + "Selector'><a href='#henrik_tab_" + myindex + "'>Search: " + searchdate + "</a></li>";
newhtml2 = "<div id='henrik_tab_" + myindex + "'></div>";
ul.append(newhtml);
tabs.append(newhtml2);
tabs.tabs( "refresh" );
// Load data into tab
$( "#henrik_tab_" + myindex).load("dosearch.php?data=" + search, function(responseTxt,statusTxt,xhr) {
if(statusTxt=="success") {
!! DOING STUFF WITH ELEMENTS CONTAINED IN THE NEW TAB HERE !!
}
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
// increse the counter for next tab
myindex++;
});
$( "#tabs" ).tabs();
});
</script>
Any help would be much appreciated.
Try change code
tabs.append(newhtml2);
to
$( "#tabs" ).append(newhtml2);
If not fix, would like show the code should be executed but not.
I am creating an application in rhomobile and jquery mobile. I try to use 2 iscroll in my page. In my page i am having 2 li. Initially left side li is empty. When i am click right side li that will add to left side li and removed from right side li. Initially i am using i scroll to view the elements in right side li. That's working fine. But in left side li iscroll not coming when the content exceeds the height. I searched a lot. I got some suggestions but that won't work for me. Those are
First add checkDOMChanges: true in my options, then set time out Eg: setTimeout(function () { myScroll.refresh() }, 0)
My right side ul id is accounts_container, left side ul id is destinations_container
My code:
var destinations_scroll1, accounts_scroll;
function loaded() {
destinations_scroll1 = new iScroll('destinations_container');
accounts_scroll = new iScroll('accounts_container', {
checkDOMChanges: true
});
setTimeout(function () { accounts_scroll.refresh() }, 0)
}
document.addEventListener('touchmove', function (e) {
e.preventDefault();
}, false);
document.addEventListener('DOMContentLoaded', loaded, false);
Then as per this link
http://groups.google.com/group/iscroll/browse_thread/thread/6bdf7a2b5552d018
I tried
destinations_scroll1.destroy();
destinations_scroll1= null;
destinations_scroll1= new iScroll('destinations_container');
setTimeout(function() {
destinations_scroll1.refresh();
},0);
In rhosimulator this create normal css scroll but not working in emulator(real devise).
Any suggestions?
I am an idiot. In above code i am checking checkDomChanges and refreshing isroll object for right side ul but i am adding dynamic content in left side ul.
var destinations_scroll1, accounts_scroll;
function loaded() {
accounts_scroll = new iScroll('accounts_container');
destinations_scroll1 = new iScroll('destinations_container', { checkDOMChanges: true });
setTimeout(function () {
destinations_scroll1.refresh();
}, 0);
}
document.addEventListener('touchmove', function (e) {
e.preventDefault();
}, false);
document.addEventListener('DOMContentLoaded', loaded, false);
This is working fine.
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 can define icon for a jquery ui button in code like this;
$( ".selector" ).button({ icons: {primary:'ui-icon-gear'} });
but I would like to define button icon in HTML code. for example
button
this way I can only call..
$( ".selector" ).button();
in onready event and define icons in code. otherwise I need to call button() method for every button that have different icon.
You could use the Metadata Plugin.
button
And the script
$(".jqbutton")
.each(function(){
var data = $(this).metadata();
$(this).button({ icons: {primary:data.icon} });
});
I've never used this directly, but I have used it through its support in the jquery validation plugin.
The Metadata Plugin works fine, and you can even do more: you can also set ALL the init properties of a jQuery UI button (other widgets too):
<script type="text/javascript">
$(document).ready(function(){
$('.jq-button').each(function(){
var meta=$(this).metadata();
$(this).button(meta);
});
});
</script>
New item
Thanks, TJB - great idea! :)
You can set the icon after initializing the button using the "options" parameter
$(".jqbutton").button();
$(".jqbutton.ui-icon-gear").button( "option", "icons",
{primary:'ui-icon-gear'} );
http://jqueryui.com/demos/button/#option-icons
EDIT: the link isn't direct, so just look for the Options tab and select 'icons' then look # the section that says 'Get or set the icons option, after init'
The following code looks for "ui-icon-[icon-name]" in the class-attribute of all elements containing the class "jqbutton" and creates a button with an "ui-icon-[icon-name]" icon.
$(function() {
$(".jqbutton").each(function() {
var obj = $(this);
var icon = false;
var c = obj.attr('class');
var i1 = c.indexOf('ui-icon-');
if (i1 != -1) {
var i2 = c.indexOf(" ", i1);
icon = c.substring(i1, i2 != -1 ? i2 : c.length);
obj.removeClass(icon);
}
obj.button({
icons : {
primary : icon
}
});
});
});