Another topic on the much discussed issue of button responsiveness when web apps are used on mobile devices.
I am listening for the touchend event to trigger a radio button being pressed. This solves the issue of making the button more responsive, however creates another problem.
jQuery mobile applies classes such as ui-icon-radio-on, ui-radio-on, ui-btn-hvr-a, ui-btn-dwn-a when the event occurs that get left behind. This makes the button look like it is still being pressed even though the event is over. It ends up being a decent effort to juggle removing and adding all those classes to make everything look right.
My questions is - does anyone have an elegant way of adding and removing the needed classes and attributes.
or
Is there a better way of going about this that will not involve "recreating the wheel" in terms of manually dealing with the styling based on event triggers. Would google's fast button be a better solution? (not sure how to integrate). Is there a simpler way?
$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function (event) {
if($(this).hasClass('AdminSurv') && event.type=='pageinit') {
$(this).on( 'touchend', '.ui-radio', function(event) {
event.preventDefault();
/*uncheck all radios in control group to avoid multiple checks*/
var _control_group = $(this).parent();
_control_group.find("input:radio:checked").attr('checked',false);
/*check the radio*/
$(this).find('input').attr('checked', true);
/*much juggling of classes/attributes going on here
still looks like the buttons are being held down
this is a very sloppy example of my initial attempt*/
_control_group.find('label').removeClass('ui-radio-on');
_control_group.find('label').removeAttr('data-icon');
_control_group.find('label span span').removeClass('ui-icon-radio-on');
$(this).find('label').removeClass('ui-radio-off');
$(this).find('label').addClass('ui-radio-on');
$(this).find('label').attr('data-icon','radio-on');
$(this).find('label span span').removeClass('ui-icon-radio-off');
$(this).find('label span span').addClass('ui-icon-radio-on');
});
}
});
Many jQuery Mobile widgets accept refresh method, in which it is used to enhance markup of elements already existing in DOM or are inserted dynamically.
For checkbox and Radio buttons, .checkboxradio('refresh') combined with .prop() are used to enhance/modify the markup by adding/removing classes, for checked and unchecked elements dynamically.
Check
$('.selector').prop('checked', true).checkboxradio('refresh');
Uncheck
$('.selector').prop('checked', false).checkboxradio('refresh');
Demo
Reference: Checkboxradio Widget
Related
I am developing a jQuery Mobile application that will run into a Cordova wrapper.
I am struggling to understand the use of each pagecontainerX event and when to use which.
I will post three specific use cases:
1) hook click events:
Say I want to assign a handler to a certain click event on a button.
2) change textual content of the page:
Say I have a page and I want to update some content that might have changed since last time I have shown the page.
3) change graphical content of the page:
Like if I want to draw on some canvas, or in cases where I need to know how things are rendered and their size.
Preliminary answers:
these is what I have found myself, but I would really much appreciate comments:
1) I am using the pagecreate event, as it's only called once. It is also possible to specify what specific page you want to hook the handler to by doing: $(document).on("pagecreate", "#pageid", handler);
2) I am using pagecontainerbeforetransition or pagecontainerbeforehide. Pagecontainerbeforehide has the advantage that is only fired once, while the other is fired twice (dunno why). Other options, like pagecontainershow, will change the content after transition, which is a bit weird to look at.
3) In this case I am employing pagecontainershow, so that things have already been graphically rendered and I can compute heights and widths etc., the drawback is that the user will see the transition, and only after he will see the content of the page being modified.
Hei guys.
I'm trying to add additional HTML elements below search box.. like checkboxes for filtering purposes.
But the added checkbox is not functional, you can't actually check it. I'm not sure but I think that search box is taking the focus from them... I created this jsFiddle so you guys can check it out.
http://jsfiddle.net/6wz2hLh0/
$("#e1").select2();
//Inserting additional HTML elements below search... filter in my case
$(".select2-search").after("<input type='checkbox'/>");
When the dropdown is open you can't even write in jsFiddle input's.
I tried commenting out various focus calls from source code with no luck.
Can any one point me in to right direction in source code what is causing this non stop search box focussing.
One thing to try is to have the checkbox element stop the mouse events from propagating. That seems to prevent them from getting to Select2, so Select2 cannot kill them.
$("<input type='checkbox'/>")
.insertAfter(".select2-search")
.on('mousedown mouseup click', function(e) { e.stopPropagation(); });
jsfiddle
I'm not sure but I think that search box is taking the focus from them
My guess is that this is because Select2 kills (stops propagation and prevents default) most events that occur within the dropdown. This is so Select2 doesn't leak events, but it also causes problems like not being able to catch click events or embed links.
When the dropdown is open you can't even write in jsFiddle input's.
This is because Select2 uses a mask that captures all events outside of the dropdown.
Can any one point me in to right direction in source code what is causing this non stop search box focussing.
You are going to want to look through the source for killEvent, as this is the method Select2 uses that kills events. As most browsers listen for the click event for native controls, you probably want to remove this killEvent for dropdown clicks.
I'm sure that you have seen this kind of problem. I have a page with a list of elements and i have created a class active when i click on them, but when i scroll the page they trigger it (after a light touch) and became "active". I don't know how to do, this is the code which i use now, but it is no perfect because don't work at 100%
$("ul li").bind("vmousedown",function(){
$(this).addClass("active");
}).bind("vmouseup vmouseout scrollstart scrollstop", function(){
$(".active").removeClass("active");
});
Do you have others solutions for this problem?
In a multi page template,I have three category pages (comedy, action, drama) that you can swipe between each containing rows of images (Seinfeld, Modern Family, Family Guy, Big Bang). Clicking on an individual image should open a dialog box (Seinfeld summary), close when you click the close button, and stay close. Initially it works, then what happens is based on the number images click after two, it opens and closes n -1 (clicking the 3rd image, opens the dialog box twice).
what could be the reason behind this?
Without your code I can be sure but I think I understand what is happening to you.
You have a problem with multiple event binding. Because of jQuery Mobile architecture it is possible to bind an event numerous time to some object.
I have an blog ARTICLE on jQuery Mobile page events handling and there's a chapter dedicated to this problem, just search for the chapter Prevent multiple event triggering. Or it can be found HERE.
In few words always unbind event before you bind it to some object to prevent this from happening:
$('#test-button').die('click').live('click', function(e) {
alert('Button click');
});
I am using jQuery UI buttonset for an on/off pair of buttons, mainly because of the nice styling you get with it. I want to handle clicks so that when you click one of the two buttons you get a dialog where you can make some more choices, and after that the page reloads with the buttons in their new state (if the state was changed, which may not be the case).
The problem is that the button that you click gets styled as selected before any click handlers are called, it seems. I don't want the selection to change, I want to do that manually.
It seems that the click event is bound to the label that jQuery UI creates, and I'm struggling a bit with unbinding it. I guess I'm also asking if there is some other way to get the style without the function... since buttonset doesn't offer any event handlers I need to catch the click events myself anyway.
The solution I'm thinking of right now is simply copying the html that buttonset generates into my code, keep the css and remove the buttonset call. I thought it might worth it to check on StackOverflow before giving up though. :)
Since jQuery UI doesn't trigger any events that run before for the actual selection is made the workarounds to accomplish this are going to be relatively hacky. The best idea I could come up with is to programmatically remember the previously selected option and then attach a click handler that determines whether you should revert jQuery UI's selection of the new button or not.
$('#parent_container').buttonset();
var selectedButton = $('#parent_container :checked');
$('.ui-button').on('click', function() {
setTimeout(function() {
//Insert your actual check here.
if (true) {
selectedButton.attr('checked', true);
$('#radio').buttonset('refresh');
} else {
selectedButton = $('#parent_container :checked');
}
}, 1);
});
The setTimeout is necessary to ensure that this runs after jQuery UI's click handler. Since you're showing a dialog you might need to alter this to instantly revert the selection, but remember what the user attempted to select for future use.
I have an example of always refusing the user's selection here - http://jsfiddle.net/tj_vantoll/s6XTu/14/
Obviously this is not an ideal approach but it does work. jQuery UI should really add support for selection events; I'll try to get around to filing a ticket for this. The button plugin is due for some updates in 1.11 - http://wiki.jqueryui.com/w/page/12138038/Roadmap.