In my Android application, I am using a WebView to render a list of locations. For some reason, when I click on a list item, it interprets it as a "geo:" address and opens the default browser to show the location. How can I configure the WebView to not interprete the location's addresses.
I don't want the "geo:" handling to swallow the "normal" list item touch event. If I tap carefully just on the location name then the "normal" list item touch event is fired. The WevView must interprete addresses automatically, since I don't add the "geo:" markup.
Sample content:
Southport Open Storage
3080 Promenade St, West Sacramento, CA 95691, USA
Sample content html:
<li class="ui-li ui-li-static ui-body-c">
<span class="location-address-name">D And L Heating And Air - HVAC Contractor</span><br>
<span class="location-formatted-address">3236 Malcolm Island St, West Sacramento, CA 95691, USA</span>
</li>
Additional Info:
Using jQueryMobile 1.0-b2 to for all UI components
jQuery 1.6.2
I saw some posts about "geo:" but they mostly dealt with WebViewClient.shouldOverrideUrlLoading(...) which seems no relevant to the above issue.
Looks like you want to add this to your <head>:
<meta name="format-detection" content="address=no" />
See also this similar question:
Disable the automatic Linkify of Webview
Related
I'm using JQuery Mobile + PhoneGap for my mobile app.
I have some links and buttons with onClick event attached
<li onclick="func();"></li>
I having problems when user double tap, can I somehow disabled it for current DIV ?
Give a id to your <li id="someid">
Then
$('#someid').dblclick(function(e){
e.preventDefault();
})
To prevent double click on multiple tags, just use a class on those li tags, and use the same code
$('.someClass').dblclick(function(e){
e.preventDefault();
});
I am trying to develop a shopping cart system using kendo-ui mobile and phonegap. First I am listing all the items in a list view. In each listview item, there will be one plus button, minus button and a label.I am using this combination for selecting the quantity of items.So, if we click plus button, the label value should be 0+1=> 1 and when we click minus, it should be like 1-1=>0 .To change the value of label when clicking button, I am passing the id of label to change the corresponding label value. But I am not able to pass the id form html to javascript, like I do in web development. Here is my code,
My listview item template,
<script type="text/x-kendo-tmpl" id="endless-scrolling-template">
<div class="product">
<img src="images/image.jpg" alt="#=ProductName# image" class="pullImage"/>
<h3>#:ProductName#</h3>
<p>$#:kendo.toString(UnitPrice, "c")#</p>
<a id="minus" data-role="button" data-click="minus(#:ProductID#)" >-</a>
<label id=#:ProductID#>0</label>
<a id="plus" data-role="button" data-click="plus(#:ProductID#)" data-name="plus">+</a>
<a id="loginButton" data-role="button" data-click="login">Add to Cart</a>
<div class="console"></div>
</div>
and my javascript functions,
<script>
function plus(itemid) {
var quantity=document.getElementById(itemid).innerHTML;
document.getElementById(itemid).textContent = parseInt(quantity)+1;
}
function minus(itemid) {
var quantity=document.getElementById(itemid).innerHTML;
document.getElementById(itemid).textContent = parseInt(quantity)-1;
}
</script>
Can anyone please tell me what Iam doing wrong here? Or can you provide an alternate solution?
When using Kendo, you can use Kendo MVVM. When JS objects are wired up in views using Kendo MVVM, when the value of the input elements change, the value of the JS objects reflects the change automatically. So what you need to do is to create a JS model for your view and set it as your view's model using data-model="yourModel". See this link: http://docs.kendoui.com/getting-started/mobile/mvvm
In your scenario here I think this link will help you: http://demos.kendoui.com/web/mvvm/source.html
This behavior is explained in the Kendo mobile book I wrote and you can see the checkout screen of the sample application built for the book here: http://movies.kendomobilebook.com/
I am creating "Highlighter" for Android in WebView.
I am getting XPath expression for the selected Range in HTML through a function as follows
/HTML[1]/BODY[1]/DIV[1]/DIV[3]/DIV[1]/DIV[1]/text()[5]
Now i am evaluating the above XPath expression through this function in javascript
var resNode = document.evaluate('/HTML[1]/BODY[1]/DIV[1]/DIV[3]/DIV[1]/DIV[1]/text()[5]',document,null,XPathResult.FIRST_ORDERED_NODE_TYPE ,null);
var startNode = resNode.singleNodeValue;
but I am getting the startNode 'null'.
But, here is the interesting point:
if I evaluate this '/HTML[1]/BODY[1]/DIV[1]/DIV[3]/DIV[1]/DIV[1]' XPath expression using the same function, it gives the proper node i.e. a 'div'.
The difference between the two XPaths is the previous ones contains a textNode and later only div.
But the same thing is working fine on Desktop browsers.
Edited
Sample HTML
<html>
<head>
<script></script>
</head>
<body>
<div id="mainpage" class="highlighter-context">
<div> Some text here also....... </div>
<div> Some text here also.........</div>
<div>
<h1 class="heading"></h1>
<div class="left_side">
<ol></ol>
<h1></h1>
<div class="text_bio">
In human beings, height, colour of eyes, complexion, chin, etc. are
some recognisable features. A feature that can be recognised is known as
character or trait. Human beings reproduce through sexual reproduction. In this
process, two individuals one male and another female are involved. Male produces
male gamete or sperm and female produces female gamete or ovum. These gametes fuse
to form zygote which develops into a new young one which resembles to their parent.
During the process of sexual reproduction
</div>
</div>
<div class="righ_side">
Some text here also.........
</div>
<div class="clr">
Some text here also.......
</div>
</div>
</div>
</body>
</html>
getting XPath:
var selection = window.getSelection();
var range = selection.getRangeAt(0);
var xpJson = '{startXPath :"'+makeXPath(range.startContainer)+
'",startOffset:"'+range.startOffset+
'",endXPath:"'+makeXPath(range.endContainer)+
'",endOffset:"'+range.endOffset+'"}';
function to make XPath:
function makeXPath(node, currentPath) {
currentPath = currentPath || '';
switch (node.nodeType) {
case 3:
case 4:return makeXPath(node.parentNode, 'text()[' + (document.evaluate('preceding-sibling::text()', node, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotLength + 1) + ']');
case 1:return makeXPath(node.parentNode, node.nodeName + '[' + (document.evaluate('preceding-sibling::' + node.nodeName, node, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotLength + 1) + ']' + (currentPath ? '/' + currentPath : ''));
case 9:return '/' + currentPath;default:return '';
}
}
I am not working with XML but with HTML in webview.
I tried using Rangy serialize and deserialize but the Rangy "Serialize" works properly but not the "deserialize".
Any ideas guys, whats going wrong?
UPDATE
Finally got the root cause of the problem (not solution yet :( )
`what exactly is happening in android webview. -->> Somehow, the android webview is changing the DOM structure of the loaded HTML page. Even though the DIV doesn't contains any TEXTNODES, while selecting the text from DIV, i am getting TEXTNODE for every single line in that DIV. for example, for the same HTML page in Desktop browser and for the same text selection, the XPath getting from webview is entirely different from that of given in Desktop Browser'
XPath from Desktop Browser:
startXPath /HTML[1]/BODY[1]/DIV[1]/DIV[3]/DIV[1]/DIV[1]/text()[1]
startOffset: 184
endXPath: /HTML[1]/BODY[1]/DIV[1]/DIV[3]/DIV[1]/DIV[1]/text()[1]
endOffset: 342
Xpath from webview:
startXPath :/HTML[1]/BODY[1]/DIV[1]/DIV[3]/DIV[1]/DIV[1]/text()[3]
startOffset:0
endXPath:/HTML[1]/BODY[1]/DIV[1]/DIV[3]/DIV[1]/DIV[1]/text()[4]
endOffset:151
Well in your sample the path /HTML[1]/BODY[1]/DIV[1]/DIV[3]/DIV[1]/DIV[1]/text()[5] selects the fifth text child node of the div element
<div class="text_bio">
In human beings, height, colour of eyes, complexion, chin, etc. are
some recognisable features. A feature that can be recognised is known as
character or trait. Human beings reproduce through sexual reproduction. In this
process, two individuals one male and another female are involved. Male produces
male gamete or sperm and female produces female gamete or ovum. These gametes fuse
to form zygote which develops into a new young one which resembles to their parent.
During the process of sexual reproduction
</div>
That div has a single text child node so I don't see why text()[5] should select anything.
I have this weird issue with JQM 1.3, JQ 1.9.1, Android 2-4, and mainly Motorola devices, but can replicat on some HTC.
First let me preface that this code seems to work in most mobile browsers.
The code is in a standard JQM content div, in a page:
<div style="width:80%; max-width:800px; text-align:center;">
<!-- First Name -->
<label for="txty" class="ui-hidden-accessible">First Name</label>
<asp:TextBox ID="txty" runat="server" datafield="FirstName" collectInfo="true" CssClass="" Columns="50" placeholder="First Name"></asp:TextBox>
<!-- Last Name -->
<label for="txtx" class="ui-hidden-accessible">Last Name</label>
<asp:TextBox ID="txtx" runat="server" datafield="LastName" collectInfo="true" CssClass="" Columns="50" placeholder="Last Name"></asp:TextBox>
..// more fields
<!-- BUTTONS -->
<button data-role="button" id="btnSubmit" name="btnSubmit" data-icon="alert" class="btn"><span>Submit</span></button>
<button data-role="button" id="clear" name="clear" class="clear btn" data-icon="alert"><span>Clear</span></button>
</div>
The results (I am zoomed in so you can see the form):
The issue:
** NOTE The page does not display the below error UNLESS a user scrolls and then tries to input text into a texbox **
After a user scrolls and taps on an input, the input displays in two spots...
Thanks!
Well after searching for days about this, I posted here and found my answer shortly thereafter.
This is a known issue in the internal Android Browser in Jellybean.
Src:
https://code.google.com/p/android/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars&groupby=&sort=&id=30964
There is a workaround with some trade-offs. Such as losing the ability to scroll in text areas, but if you have this issue, then this is a good workaround.
The workaround is to add this to your main CSS file:
/*
Prevents a bug in Android 4.0-4.1 that duplicates text inputs onFocus ANDROID BUG# 30964
Link to Bug Tracker: http://j.mp/YhydH6
Remove when no longer needed...
*/
input {
-webkit-user-modify: read-write-plaintext-only;
}
We are developing a mobile web app in jQuery Mobile 1.0.1 and Phonegap 1.4.1 and have run into issues with the keyboard on the galaxy s2.
We have a menu which slides out and contains a search input:
<input type="search" placeholder="Search..." name="search" id="menu_search" data-role="none" />
When we tap in the input so that it gains focus, the keyboard opens but does not allow us to type anything in. I guess a clue here is that its giving us a regular text keyboard and not the search keyboard (which has a magnifying glass as the enter key)
If we focus the input when the menu opens: $("#menu_search").focus() - The search keyboard is open when the menu displays and we are able to search BUT as soon as we tap in the input the keyboard changes to a regular keyboard and we a not able to type anything.
Another clue is that while typing in the keyboard the auto-predict works but when tapping on the correct option only a space is added to the input and none of the other characters.
We have tried a bunch of other attribues on the search input to no avail:
<input type="search" placeholder="Search..." name="search" id="menu_search" value="" data-role="none" autocomplete="off" autocorrect="off" autocapitalization="off" role="textbox" aria-autocomplete="list" aria-haspopup="true" style="-webkit-appearance:searchfield;" class="ui-autocomplete-input" />
This all works fine on a HTC Desire running 2.2 and a desire running CM7 (Android 2.3.7)
We even tried changing the input to a textarea but this did pretty much the same thing :(
I also tried:
$("#menu_search").live('focus',function(event){
event.preventDefault();
});
to see if that would prevent it from changing keyboards but no luck either.
We do however have another search input elsewhere in the app which works fine, the only difference being that the other search is in a "propper" page: data-role="page" and the menu is outside of all of the other pages and in its own just set to hidden initially.
Please help, im crying blood atm!
You probably have
-webkit-user-select: none;
In your CSS somewhere. If you enable text selection for inputs
input, textarea { -webkit-user-select: text; }
it works again!
Did you try adding data-native-menu="false" attribute to your search input tag.
If you're still stuck on this, try updating to phonegap 2.0. It fixes some input problems.
$('#pageid').live('pageshow', function(event, ui) {
$(this).delegate('input[data-type="search"]', 'keyup', function () {
if($(this).val().length != 0)
keyword = $(this).val();
});
});
i'v create an app using phonegap + jequery you look for it in playStore "AssignmentReminder" or type in the search field koshWTF.
anyway. i'd encouraged this issue before and haven't fixed it as i guess its 4.0.1 issue not the phone gap nor jquery mobile , because i still can type under 4.0.4 and lesser. hope you find the answer for it because i did search aloot last time and couldn't find it.
I have/had the same issue on my Note II running 4.1.1 rooted using Phonegap 2.6.0 (though I can also replicate it in 2.5.0), jQuery Mobile 1.2.0, and jQuery 1.7.2. My keyboard is SwiftKey 4.0.1.128.
Except rather than just one input causing me issues, my form has multiple inputs that eventually cause me trouble. It's a real headache because it's hard to replicate - the input always works at first, but if you switch between inputs randomly and long enough, it eventually stops working at a random time.
This error used to happen fairly quickly, so that it would make it a pretty significant issue considering I would have to restart the app to get the form working again, which would eventually stop working yet again. My new form structure seems to work well; the error occurs after literally minutes of typing long strings and randomly switching inputs, which I assume no user will be doing; but it still upsets me that the error is there.
I tried to get help on this error on the jQuery Mobile forum, but they gave me some snarky comment about how it's likely just my element ID usage, because apparently 99% (probably not even realistic) of JQM errors are from incorrect ID usage. I know for a fact my IDs are all unique across every page, but they insist it's an ID error without even trying to correctly diagnose the issue, but I digress.
I should also note that I found the CSS solution that was provided in another answer in many other similar issues across the web, but not this exact issue; while I understand its usage, the CSS did not fix the issue for me.
My form is dynamically loaded into a data-role="content" DIV inside of a data-role="page" DIV, so:
<div data-role="page">
<div data-role="content" id="my-form-holder">
</div>
</div>
I've found the best form structure, at least in my application, to cause the error least frequently is:
<form id="account-add" action="add-edit-account.php" method="post" data-ajax="false" autocomplete="off">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="custom-name">
</label>
<input name="custom-name" placeholder="Account Name" value="Service Name Here" type="text"><br>
<label for="custom-1">
</label>
<input name="custom-1" placeholder="User ID" type="text"><br>
<label for="custom-2">
</label>
<input name="custom-2" placeholder="Password" type="password"><br>
<input type="hidden" name="action" value="add-2">
<input type="hidden" name="newserviceid" value="3">
<input type="hidden" name="userid" value="1">
<input id="account-add-submit" type="submit" name="account-add-submit" value="Add Account">
</div>
</form>
The form HTML is fetched via AJAX and loaded into the DIV by:
$(ajaxData).appendTo("#my-form-holder").trigger("create");
Naturally, your form will be a bit different, and you may not even have a form since you just have a search input (getting to that in a moment). But if you do have a form, that's what works best for me.
Since you're in Phonegap, you may not even need an action theoretically since you likely have jQuery to handle the input, but jQuery Mobile docs state forms must have action and method attributes, so I didn't want to go against that. Also, jQuery Mobile usually has a data-role="field-contain" DIV around each label/input group, but I found that the error occurred sooner if I did this. Again, the error occurs at an arbitrary moment that is never the same, so I don't know if it's directly related to the DIV.
I also have an input hard-coded into another page:
<div data-role="fieldcontain" class="ui-hide-label">
<label for="service-search-input">
</label>
<input name="service-search-input" id="service-search-input" placeholder="Enter a service to search for" type="search">
</div>
This seems to work fine. However, there are no other inputs to switch to, so the best I can do to try to replicate the error is focus/unfocus the input by tapping elsewhere on the page. Though, I am always able to type initially whereas your error doesn't let you type at all if I understand correctly. You may want to try that HTML structure and see if it works. There is no form tag surrounding that input.
Our issues are a little different (I have most of my issues with a dynamically injected form whereas yours is hard-coded from what I gather), but this is the only page I could find anywhere that directly addresses this exact issue, so hopefully this helps and we can get some further insight on this issue.