I'm using change page for page redirection
$.mobile.changePage('../user/user_dashboard.html');
Then i have back button in the pages
<a href="#" data-icon="back" data-iconpos="notext" data-rel="back" class="ui-btn-right backFun" data-theme='a'>Back</a>
Here my problem is.
consider the pages are 1 & 2
Now im going from 1 to 2. Then came back from 2 to 1 by back button. Then going from 1 to 2, then from 2 to 1 by back button.
So this time, page is redirected from 1 to 2 automatically.
In 1 & 2 pages im using
e.stopPropagation();
e.preventDefault();
Still same issue
What is the solution of this one?
Related
When I access at this link from iOS the button with the symbol of the clock needs to be tapped twice in order to show the opening hours. This problem affects also the other buttons.
The first tap is handled like a mouseover event.
How can I fix this problem?
This is the code of the button with the clock:
<li><a href='#openinghours' data-toggle='tab' title='Opening hours'>
<span class='round-tabs four'><i class='fa fa-clock-o'></i></span>
</a></li>
<div class="tab-pane fade" id="openinghours">
<!--html content of the opening hours-->
</div>
On the desktop version of the website everything is working well.
I don't have enough rep to comment, but I would clear all your JS errors on your page before you start to debug this. You seem to have around 6 console errors and 2 warnings.
I've tried this in my Simulator, and it behaves as you say - however the W3C Bootstrap 4 Nav Tabs are fine. Therefore, I'd suggest looking at the difference (as well as seeing if any errors are interfering)
Link to w3 Schools:
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_nav_tabs_toggleable&stacked=h
I implemented swipe for history back/forward, together with caching the DOM.
Say this is the page structure
Homepage
Page 1
Page 1A
Page 2
When you navigate as follows:
Homepage > Page 1 > Page 1A
The 3 pages are cached
<div data-url="home.aspx">...
<div data-url="page1.aspx">...
<div data-url="page1a.aspx" class="ui-page-active">...
If you then go back twice (to the Homepage) and go to Page2, Page 1 and 1A are still cached :(
<div data-url="home.aspx">...
<div data-url="page1.aspx">...
<div data-url="page1a.aspx">...
<div data-url="page2.aspx" class="ui-page-active">...
If you now swipe back from Page 2, you will get to Page 1A. This will also make the cache huge.
How do you clear Page 1 and 1A out of the cache as soon as you go to Page 2?
So it should be like this:
<div data-url="home.aspx">...
<div data-url="page2.aspx" class="ui-page-active">...
In other words, I want the swipe to work exactly like any browser back/forward button.
(I need the swipe for improved UX because there are no dedicated back/forward buttons on mobile phones)
This seems to solve the problem.
$("body").on("pagecontainerbeforeload", function(event,ui) {
$('div.ui-page-active').nextAll('div[data-role="page"]').remove();
});
So everytime you click a link it will delete all pages after the currently active node.
This is my first post on Stack Overflow. I have searched google for a solution to this issue and have tried many workarounds but to no avail. Here is my case.Please note that this code is running fine on iOs 5 on a client iPads. My issue is only with iOs 6
I have a ul tag and within that I have multiple list items and on clicking each list item I would navigate the usetr to a different page.Please look at the code below.Sorry if the code is not formatted. I am in such a hurry.
<ul class="tp-breadcrumb" style="float: left; width:91%;">
<li class="current">Definition</li>
<li id="brdDateTimeRepSpeaker"><a style="padding-top:1px;height:30px" class="ui-link">Date, Rep,<br>Speaker</a></li>
<li id="brdVenueManagement"><a style="padding-top:8px;height:23px" class="ui-link">Venue</a></li>
<li id="brdAudienceSupport"><a style="padding-top:8px;height:23px" class="ui-link">Audience</a></li>
<li id="brdSummary"><a style="padding-top:8px;height:23px" class="ui-link">Summary</a></li>
</ul>
I am trying to fire the click for the list item(The anchor tag is a blank one with href="#"). It will fire the first time. But after navigating to another page and then coming back, the click event is not firing.
However, if I click on a textbox or any other control on the page and then click the list item the click is firing fine the second time.Below is the click code
$("#brdVenueManagement").live("click", function () {
alert('click');
});
I have tried the following.
Adding an onclick="" handler to the list item
Moving the click event to the hyper link instead of the list item and
specifying onclick="" and href="#"
Have tried tap and touchstart events.
Giving focus to the (Since my li's are dynamically generated)
In all of the above cases it works fine before navigating to another page. On coming back, the click is fired only if i click on some control in the page and then click the list item
Please help me out here guys. I am at a loss as to why this is not working on iOS 6. Its working fine on desktop browsers as well as iPads with iOs5 or lower.
Thanks,
Sriram
Never mind,
I fixed it myself. It was a position:relative on my li that was causing the events not to fired. I removed it and everything's fine.
Sriram
I am using the fastklick plugin for iOS what is very popular on the net for speeding the click event on jquery mobile apps with phonegap on iOS.
The buttons and links are working very well except the back button from jquery.
If I use this:
<div data-role="page" id="test" data-add-back-btn="true">
then if I want to click on the button, there is already the delay from iOS. The button is getting blue at first and after that the page is sliding. How can I prevent this so this button is working fast like the other buttons I am creating with
<button>...</button>?
Is it possible to create my own back button and apply an event to it?
First remove data-add-back-btn="true" then you can try this:
<a class="ui-btn-left" data-icon="arrow-l" href="javascript:history.back(1) " data-theme="a">Back</a>
or this:
<a class="ui-btn-left" data-icon="arrow-l" href="#" data-theme="a" id="back-btn">Back</a>
$('#back-btn').bind('touchstart', function(e) {
$.mobile.changePage("#pageID");
});
Just change #pageID to your real page ID. touchstart event is great for back button if you are just doing it and not a page scrolling.
In jQuery mobile I am using an iframe. When you press the back button (in the app or the browsers back button) the iframe content goes away. Then when you press the back button again the app transitions to the previous page.
The iFrame is getting added to history. I thought this was never supposed to happen.
A jsFiddle has been created that illustrates the puzzle in as simple a form as possible.
In it you will find a fragment of HTML that creates two jQuery Mobile pages. On the first page there is a link to go to the second page. On the second page,there are two back buttons (one on the header and one as a button on the page) and also a button to reload the <iframe>. To recreate the problem:
From page 1 follow the link to page 2
On page 2, click the button to load the <iframe>
Click either of the back buttons
You will notice that you do not go back to page 1.
Here is the HTML:
<div data-role="page">
<p>This is page 1</p> Go to page 2
</div>
<div data-role="page" id="page2">
<div data-role="header" data-add-back-btn="true">
<h1>Page 2</h1>
</div>
<p>This is page 2</p>
<p>What follows is the iFrame</p>
<iframe id="i1" width="500" src="http://www.ibm.com"></iframe>
<p>This button issues a programmatic back</p>
<button id="backButton">Go Back</button>
<p>This button loads new content into the iframe</p>
<button id="reloadButton">Reload iFrame</button>
</div>
Here is the JavaScript
$(function () {
$("#backButton").click(function () {
jQuery.mobile.back();
});
$("#reloadButton").click(function() {
$("#i1").attr("src", "http://www.microsoft.com?x=" + Math.random());
});
});
(This is the code you will find in the jsFiddle).
I'm guessing it is because JQM programatically manipulates the history with replaceState. You can read more about how they track history in an ajax environment in the docs
Show me some code or a fiddle and I may be able to give you a more detailed answer.
One answer that seems to work (so far) is not to attempt to reload the <iframe> via changing its src attribute but instead, inserting a brand new <iframe> element to replace the one that was previously there. The logic to achieve this might look as follows:
$("#frameLocation").html('<iframe id="i1" width="500" src=' + newURL + '"></iframe>');
A corresponding jsFiddle showing it working is available.
This has been tested on Chrome 38.0 and Internet Explorer 11.0.