jQuery stopPropagation for click on android - android

I have a "hiddeable" element, it hides when the user click on it, except when the user click in an input text field, the script is very simple:
$('#main_table #sidebar .mini_hid').click(function(){
$('#main_table #sidebar').removeClass('show');
});
$('#main_table #sidebar .mini_hid input[type="text"]').click(function(e){
e.stopPropagation();
});
To hide the element I remove the "show" class, and to avoid to trigger it clicking the text field I use a stopPropagation.
This works fine on Computers and Mac, but in Android devices stopPropagation is not working, so when an user clicks on the text field the whole element hides.
I need the stopPropagation() works to avoid hidding its container.

Ok I solved this issue changing the click event for mouseup.
$('#main_table #sidebar .mini_hid').mouseup(function(){
$('#main_table #sidebar').removeClass('show');
});
$('#main_table #sidebar .mini_hid input[type="text"]').mouseup(function(e){
e.stopPropagation();
});
This is not really a full solution but a workaround.

Related

Android phonegap - click event is fired on the next screen

I'm using phonegap (cordova 2.8), and android 4.2.1,
I use as frame works: knockout, & jquery mobile.
The app is based on http://propertycross.com/jquery-mobile/
I get the following funny behavior:
when clicking on a button that moves to another screen #2,
if there is a button in #2 screen at the same location,
then it get clicked as well...
The only solution I found is to wrap the code that change the screen with setTimeout:
setTimeout(function() {
application.navigateTo(viewModel);
},600);
This solve the problem but slow down the app...
This is actually unfortunate since the phonegap is already too slow...
Thanks.
There are two things you can do:
1) e.stopPropagation(), e.preventDefault()
phopkins describes this here:
jQuery mobile tap event triggered for twice
I'll elaborate, as this was a major issue for me. This applies to any of the tap, click, vclick and probably other events.
Your event functions should have stopPropogation() and preventDefault() called, like so:
$('#selector').tap(function(e) {
//your code here
e.stopPropagation();
e.preventDefault();
});
This helps, however, I found that you could still get the "phantom" click.
2) Bind the event to the page, not the button.
That way it's not bound to the next page.
For example, for a page with id='myPage' and a button with id='myBtn':
$('#myPage').on('tap', '#myBtn', function(e) {
//your code here
e.stopPropagation();
e.preventDefault();
});

Popup menu scroll with the page in jquerymobile

I have create an popup menu in my app the problem with it is when i open the popup menu and then scroll the page the popup menu also scrolls up with the page even i tried using data-dismissible="false" but nothing happen still the problem remains same.
Thanks in advance.
There's an easy fix for this problem. Just prevent page scrolling when popup is active.
Working jsFiddle example: http://jsfiddle.net/Gajotres/aJChc/
For this to work popup needs to have an attribute: data-dismissible="false" it will prevent popup closure when clicked outside of it. Another attribute can be used: data-overlay-theme="a" it will color popup overlay div. That is a DIV that covers screen when popup is opened and prevents popup closure.
And this javascript will work on every possible popup:
$(document).on('popupafteropen', '[data-role="popup"]' ,function( event, ui ) {
$('body').css('overflow','hidden');
}).on('popupafterclose', '[data-role="popup"]' ,function( event, ui ) {
$('body').css('overflow','auto');
});
For me this method didn't work, it works on browser but not in Phone Gap application.
So I resolve it in this way:
$('#Popup-id').on({
popupbeforeposition: function(){
$('body').on('touchmove', false);
},
popupafterclose: function(){
$('body').off('touchmove');
}
});
Hope it helps!
if body scrolling is not prevented, try below. in my case i was using boilerplate.css so the preventing the body scrolling not worked.
popupafteropen: function (e) {
$('html').css('overflow', 'hidden');
},
popupafterclose: function (e) {
$('html').css('overflow', 'auto');
}

How to enable input type submit button

I have drop down list and input type submit button in my Android Phonegap application.
By default I disabled submit button and I would like to enable button onchange event of my drop down list.
I tried below options
$("buttonId").attr("disabled", false);
$("buttonId").removeAttr("disabled");
http://forum.jquery.com/topic/disable-enable-button-in-form
Written event listener based on above link
But above options didn't work for me. Could some one help me to resolve the issue.
Please try Below code, for managing disable/enabling input button based on dropdown "dropList" 's change event. be make sure u did not added "disabled" property in HTML for input submit button "default_sub". and let assume that the page id is default.
put below code inside onDocumentReady event.
//PageShow event task binding
$('#default').on('pageshow', function(){
//setup disabled property for submit button.
$("#default_sub").attr("disabled", "disabled");
});
//Submit button click for test alert only
$('#default_sub').on("tap, click", function(){
alert("Submit : Pressed");
});
//Dropdowns onChange Event binding
$('#dropList').on('change',function(){
//Removing Disabled property
$("#default_sub").removeAttr("disabled");
});
This code is working for me to enable button based on Dropdown's onchange event.
the above code will be applicable for <'input type="submit"> tag only but will not make any effect on its UI, if u r using jquery data-role="button" along with div then u can disable and enable button using addClass/removing class 'ui-disabled' to its class attribute.
Thanks,
Prashant Agrawal
Have you try this.
document.getElementById('submitbuttonidhere').disabled = false;
You can also try this.
<input type="submit" name="submit" value="Next" disabled="disabled"/>
$("input[name='submit']").removeAttr('disabled');

force keyboard open on android

does anybody knows how to force keyboard open on android browser (4.0 - maybe less)?
i tried this solution and it does not worked for me.
in project i am trying to get a text input working, but after submitting (intercept by jQuery) it holds focus but the keyboard disappears.
snippets:
$('#typer').blur(function () {
$(this).focus().click();
});
$('#typer').bind('keyup', function (e) {
var input = $.trim($(this).val());
// some lines of code..
$(this).val('').focus(); // clean up
}
iOS is also interesting.. but not tested yet.
Android pulls up soft keyboard whenever text input field is in focus. "Go" or "Done" button on Android works as form submit, therefore input text looses focus and keyboard disappears. User expects the keyboard to disappear after "Go", "Done" or "Enter" is pressed - so Android follows this rule. Forcing re-focus on field's blur will not do much since technically you moved to a different window.
$('body').click(function() { $('#typer').focus(); }
can provide a partial solution, whereby user has to click once anywhere in the body of the page for the typer to re-gain focus. It causes OS to move back to browser Activity and focus the input field. This fiddle shows it as an example: http://jsfiddle.net/Exceeder/Z6SFH/ (use http://jsfiddle.net/Exceeder/Z6SFH/embedded/result/ on your Android device)
Other than writing a PhoneGap-like wrapper to control imeOptions of the keyboard, I am not aware of any solution that can solve this problem.

Flex 4.6 hide/dismiss softkeyboard

I'm having some issues with the softkeyboard behaviour in flex 4.6 and air 3.1
I have a list with a search bar on top. When a user selects the TextInput component the softkeyboard pops up like it should.
Now when the user is done typing his text and presses the return (or the done/search/...) key I want the softkeyboard to disappear.
What I've tried so far:
I've set the returnKeyLabel property to "done" and the button shows
up accordingly. However it only dismisses the keyboard on Android, on
IOS the keyboard just stays up.
I then tried by not setting the returnKeyLabel and manually
catching the Return key and setting the focus to another element that
does not require a softkeyboard but that didn't work either.
I also tried by dispatching my own "faked" click events when the Return key was pressed but this also didn't work.
As part of searching about this problem I found this Dismiss SoftKeyboard in Flex Mobile but that didn't work either. Or at least not in flex 4.6
Now does anyone know of a good way to hide the softkeyboard or make the returnKeyLabel "done" work on IOS that will work with flex 4.6/air 3.1?
Have you tried something like this?
<s:TextInput prompt="First Name" returnKeyLabel="done" enter="handlerFunction()"/>
private function handlerFunction():void{
stage.focus = null
}
For flex mobile android apps I have mimicked the intuitive ios way of tapping on the background to remove the softkeyboard as follows:
import spark.components.supportClasses.*
protected function application1_clickHandler(event:MouseEvent):void
{
if(event.target is StyleableTextField || event.target is StyleableStageText){
// ignore because came from a textInput
}else{
stage.focus = null
// to remove the softkeyboard
}
}
<s:TextInput prompt="First Name" returnKeyLabel="done" enter="{stage.focus = null}"/>
This is the same as Francis' answer, but it saves having to make a new function

Categories

Resources