Button OnClick Fired Multiple Times on Mobile Devices - javascript

I have a page that has a menu and a content area. I dynamically load content into this area via ajax.
<div id="content" style="visibility: visible; overflow: hidden; top: 0px;"></div>
The ajax call looks like the following.
$('#content').load('content/contactform.html',function(){ ...some code...}
The page that is loaded into the content box is a form that has a Button defined with an onClick method
<div>
<h2>Phone Numbers</h2>
<div id="form">
</div>
<button id="addPhoneBtn" onclick="alert('click')">Click Me</button>
</div>
Normally it would add a new input field to allow the user to enter more phone numbers. But for testing it just prints an alert.
When I now click that button on a mobile device such as an IPad, the event is fired three times. I have read that on touch devices don't have mouse events. They have touch events.
But the strange think is that if I copy that page directly into the content, the onClick event is only fired once. Am I missing something ?
Update: I'm using Iscroll to make the content that is inside the div scrollable.

I found the problem. I was using iscroll-4 to achieve the scrolling on touch devices.
Removing this library and switching to the dojo framework, solved this issue.

Related

jQuery mobile button sometimes only gets selected but no page transition happens

In a Phonegap Application with jQuery mobile, there are times that I click a button but it only gets selected and doesn't transition to the other page, it has happened even with the back buttons that are generated automatically by the library, I have to click it again to get it work. It's strange because the problem is not always reproducible. At first I thought it was the phone but I tried in another one and the same thing happened.
jQuery mobile 1.4.3
Phonegap (Cordova) 3.5.0
Android 4.4.2 and 4.1.2
HTML:
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-add-back-btn="true" data-back-btn-text="Back">
<h1>Test</h1>
</div>
<div data-role="content">
</div>
After diferents test, I discard the use of rel="back".
My button are this:
Back
Whithout the 'rel="back"' works but sometimes when click the button selected and not back, and when click one more time the back button works.
Finally I catch the tap and execute the change of page manually
$('a[data-direction="reverse"]').on('tap', function(event) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
$('#loading').hide(); // stop loading icon in case of click back when loading data
$.mobile.changePage($(this).attr("href"),{transition:'fade'});
});

Phonegap onclick executes without click

I have this code in a phonegap html page:
<div class="row">
<div class="small-12 columns" onclick="window.open('http://www.something.com/');">
<h3>some text</h3>
<a href="#" onclick="window.open('http://www.something.com');" class="read-more">read
more
</a>
</div>
</div>
I have a menu page that links to this page (which works fine):
<a href="page.html">
<h2>page</h2>
</a>
I build the apk, when I open it on my smartphone, I get the menu. When I click the page item, the page opens, but then the onclick event fires immediately, without even clicking it.
Can someone help me out
This is an issue with how Android webviews handle click actions. It is best not to use onclick if possible. I have had the best luck with the touchstart event but in some rare cases I have had to implement a hack with the following steps:
onclick/touch append a div element that covers the entire screen and it's z-index is above all elements (but is transparent)
use setTimeout to remove this div element after 301 milliseconds
run the action you want to trigger directly after creating the setTimeout method
This is not a great solution, but if nothing else works this will.

the mobile page will go above after clicking on the text box

I'm building a site which has a mobile branch .
I succeed to build the site as many browsers from PC's can take the same view and work fine .
now I'm moving to build the site as the mobile can browse the site from maybe mobile chrome or Firefox mobile. I did that but I'm facing a small problem .
many pages of the site has text boxes which you know if you click on it using the mobile
-for example galaxy note 2 - the soft keyboard will show it self on the screen ,two things happens during this process :
1- the screen will zoom itself until reach the specific text box that you have clicked on.
solution : I solve it by this command
,so now the screen will not zoom itself.
2- If I have a page which have an including file ,the main div will change his position until reach the above div -included file- and the hall page will be not ordered .
first I will she a brief example about what I mean :
note :my back end is php using Yii framework ,just for info ^_*
page.php:
<div id="div1" style="width:100%;position:relative;margin-bottom: 10px"><?php
if (Yii::app()->user->isGuest)
include 'flash.php'; ?></div>
<div id="div2" style="width:100%;position:relative;margin-bottom: 10px">
<form action="getup" method:"post">
<input type="text" name="text1" >
<input type="text" name="text2" >
// submit button
</form>
now after this brief code , i will show you exactly what is happening , when browse the page from mobile chrome browser the page will be ordered ,but if you click on any text box as text1 for example , what occurs is that DIV2 will move itself up above DIV1
-included file- because the soft keyboard will show it self on the second half on the screen.
after this example i will oppose my question :
my question is : is there any code -CSS or Java Script - will stop the rising process which is happening to the DIV2 after the soft keyboard show it self on the mobile screen?
Perhaps this behavior is related to css you're using? Try removing position:relative from your inline style, maybe it will help. Another thing is that input should be self closing tags and div2 closing tag is missing. You don't need to set width of the div tag to 100% as it is its default value.

jQuery mobile: Popup and vclick event

I'm using jQuery mobile for a project and need to react to vclick events when a popup is opened.
My problem is that the vclick event is just fired inside the popup, not on the whole page.
You can find a minimal example here.
Thanks in advance for your help!
Your code works correctly, I dont know if this was your intention but you are using popup overlay panel. Unlike normal panel in jQuery Mobile 1.3 version, popup overlay panel has an hidden div witch stretches full width and full height of the screen.
What looks like a click on a mail page is just a click on a hidden overlay div.
You can even test this, use Firefox or Chrome and take a look at a popup HTML, you will find that DIV.
In your case this DIv is a problem:
<div id="panelPopup-screen" class="ui-popup-screen in" style="height: 611px;"></div>
You can always switch to jQuery Mobile 1.3 RC1, use its panel, just make it semi transparent.
EDIT :
Found a solution for you, here's a live working jsFiddle example: http://jsfiddle.net/SC8hH/
This will fix your problem:
#panelPopup-screen {
display: none;
}

Facebook Like button - prevent XFBML version from resizing height

I'm trying to use the XFBML version of the Facebook Like button. On a page with zero likes, the main problem is the order of events when the page loads:
HTML loads
Like button loads
Button expands height, pushing content below it down
Button sees it has no likes
Button reduces height, moving content below back up
This happens regardless of how the Javascript SDK is loaded (standard or asynchronous) and if "show faces" are enabled/disabled.
Is there a way to prevent this distracting automatic resizing from happening?
Here's a test page showing the behavior.
I have been frustrated by this many times over. I finally cooked up a hack in jQuery. It works in Chrome, FF and Safari. Sorry I am not near an IE computer.. but the concept should remain.
HTML
<div style="display:block;float:left;width:450px;min-height:35px;">
<div id="like" style="display:none;float:left;width:450px;height:35px;overflow:hidden;">
<fb:like href="" show_faces="true" width="450" font=""></fb:like>
</div>
</div>
jQuery
$('#like').delay(500).fadeIn(500,function(){ $(this).css({'height':"inherit",'overflow':"inherit"}); });
Explanation
First, create a div with a min-height of 35px, then create a child div with an id of like, display of none, height of 35px and overflow of hidden.
With jQuery, reference the like div and delay a fade in. Upon completion of that fade in, reset the css attributes (height and overflow) to inherit.
In theory this allows the like button do it's little freak out behind the scenes and then gracefully brining it into the page.
Hope this helps, and or Facebook just fixes this.
You could "double-store" the likes and Facebook user ids on your side (using FB.Event.subscribe('edge.create', function(response) { ... });) and then check if your logged-in Facebook user has friends who liked your page.
That may be overly complex, though.

Categories

Resources