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

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'});
});

Related

how to fix frozen loading GIF on submit click for mobile,and fix loading GIF displayed on back click

I have created a web page that has a form that prompts the user for two text-inputs and 1 radio-input. Once the user clicks submit, I have a function that is run OnClick that will use jQuery to hide() the form and show() the loading GIF.
<input type="submit" value="Submit" id="submitinput" onClick="loading();">
function
<script>
function loading(){
$("#form1").hide();
$("#loadingGIF").show();
}
</script>
On a desktop/laptop computer everything works fine (using Chrome for both), but on a tablet or phone (tested in Safari and Chrome) things go wrong. In the CSS stylesheet, I have the loading GIF set to display:none. I have tried to use the $(document).ready() function. I had the thought to have another function to maybe auto-refresh, but I'm not confident how to do that yet.

jQuery Mobile page implementation and hash navigation conflict

I am using jQuery 1.9.1 and jQuery Mobile 1.4.2.
I have a problem with my jQM site that causes data-rel="back" links to break. Originally I thought this was some other problem but I have found the cause of this.
My website consists of an index page which contains the header and the body, which looks like:
<div data-role="header">
</div>
<div data-role="page" id="login">
</div>
<div data-role="footer">
</div>
The login page does contain login forms and other elements but that is not important for this problem.
The other pages are simply html files that have:
<div data-role="page" id="pageId">
content
</div>
My javascript file then loads those files into the DOM:
$("body").pagecontainer("load", "page.html");
Then, all links do their usual navigation:
Link
And that performs normally.
The problem is that if you refresh on a page, for example #pageThree, the site reloads, and takes you to the login page, but the URL keeps #pageThree, but since it doesn't exist at load time it is ignored. This is my desired behavior. However, I then use the link
Link
to go to #pageFour which has a link:
Back to pageThree
Now, if I press that "back" button, it should take me to #pageThree, however since I refreshed on that page, the back button takes me back to the login page.
So in short: If I refresh on a page with a hash navigation, any back buttons that point to that page redirect to the initial login page instead.
I may have done an improper implementation of pageload and am open to suggestions, as long as it makes back buttons work properly.

Using JS window.print() breaks back button in chrome

I let visitors click on an image to print the page
The site includes jQuery 1.6.3
In my script I've written the following:
$(window).load(function() {
$('#printButton').click(function(e) {
print();
return false;
});
});
Where 'printButton' is appears in my html as
<img src="#"
id="printButton"
... />
The print dialog opens when the user clicks on the 'printButton.' So far so good.
But my back button no longer works in chrome. The browser doesn't go back to the
previous page until I close the print dialog. I just get the little grey spinner on the tab.
This doesn't happen if I just click CTRL-P. I can go back to the previous page even when
the print dialog is still open.
I've tried this on Chrome Version 32.0.1700.107
Any ideas on how to fix my back button?
Congratulations, it appears like you've found a bug in Google Chrome. In that case there isn't much you can do about it, other than report or forget it.

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.

Button OnClick Fired Multiple Times on Mobile Devices

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.

Categories

Resources