I am new to Jquery mobile I have develop a website that work fine in Iphone safari browser but when i make its home screen shortcut and run it as web app then if i move a step back its work fine but when i move two steps back its not working its refreshes the webpage.
e.g. I have three pages in my website A,B,C when I move from A to B and then going back to A its work fine same as when move from B to C and then going back to B its work fine. But when i move A to B and then C and then going back to B its work fine but when i move to A its refreshes the page rather than getting page from history. My back button code as below
<a href="SearchMembers.aspx" data-rel="back" direction="reverse" id="btnBackMemberDetail"
class="back-button" data-inline="true">Back</a>
Can anybody help me in this regard. Thanks in advance.
try to change href="SearchMembers.aspx" in to href="/"
edit:
<a href="/" data-icon="back" data-rel="back" class="ui-btn-left" data-role="button" data-iconpos="notext" >Back</a>
I use this and this works fine for me.. I use jquery.mobile-1.1.1.min.js
Related
I have developed a mobile application. Most of the functions are inside, but I have some very strange behaviour inside the app on iOs (not tested on android yet).
When I click on an item: the event after the click is called twice. This isn't happening the whole time, but happens now and then. This is a problem for when I try to go to the next slide (he things he should move twice to a next slide), but also when I try to open the gallery for selecting photos, he opens the gallery twice, login for facebook happens twice etc... The strange thing is, that this isn't the whole time the case.
I have normal buttons like
<button ion-button color="black" class="skip-button"
(click)="nextStep()" [hidden]="lastSlide">Next</button>
so I don't think that the coding is wrong (or is it wrong).
I use this version:
ionic --version
2.1.18
In the beginning of the development I hadn't this issue. I think that I was using an older version of ionic2 then. Is there a way to go back perhaps?
I was in the meantime working on another project without having this issue (in that project). My last try was to copy the other project and copy pages and providers from the project with the error. The error is now gone, but still no clue why there was such an error.
I have a webapp used by jquery mobile, there is lots of pages this webapp. also added home screen button its feel like native app fullscreen, so i used common header for each pages, i don't want duplicate header every pages. there is a "Back" button this header, used following codes
<div data-role="header" data-theme="g" data-position="fixed" data-tap-toggle="false">
<a onclick=history.back() data-icon="back" data-direction="reverse" data-role="button">Back</a>
</div>
i used php cookies store function also each pages, that point when user resume this webapp return to previous position...
my problem is when user come back previous position my back button not working, is it possible to fix.? or iPhone not allow this function for webapp.?
Why do you set onclick=history.back() manually?
The framework automatically generates a "back" button on a header when the page plugin's addBackBtn option is true.
Source: http://jquerymobile.com/test/docs/toolbars/docs-headers.html (jump to "Adding Back buttons")
My own experience
I never ran into trouble with automatically generates back buttons on iPhone in my jQuery Mobile projects.
Ok, weird issue:
1) Go here on an iPhone (Safari browser): http://powellcreative.com/our-team/
2) Click any of the team images to get to the team member page
3) Click the back button on the browser
4) The image is disappeared on the Team page now
I know this question is kind of old, but I was looking for a solution to a similar problem and after searching, I found a solution. Hopefully this helps other people with the same problem. The problem is when you give iOS a javascript event like onmouseover or onmouseout it doesn't like it, mainly because when your finger is "mousing over" an element in iOS, you are actually clicking on it, so this is the solution I came up with that seems to reload images after hitting the back button in iOS.
Here it is:
Make sure all images are in their own separate div with a distinctive name.
Example:
<div name="div1"><img src="yourimage" onmouseover="javascript:this.src='yourimage2';" onmouseout="javascript:this.src='yourimage';"></div>
In the javascript head part of your page you want to insert this:
window.onpageshow =
function(event){
if (event.persisted){
//for every div and image you want changed back you can add a loop here to change all at once or just one div by name//
document.getElementById('div1').innerHTML = '<img src="yourimage" onmouseover="this.src="yourimage2";" onmouseout="this.src="yourimage";">';
}
}
This will check for page back since Mobile Safari uses bfcache and reload your image into the div. Hopefully this helps OP or someone else.
I have a very strange error. I have an webpage that runs in Appmode (when you add to homescreen on iOS). I have one A element that transfer to another page in the same domain (test2.html). If I click on it, the appmode is quited and a new browser window opens.
However if I make a location.href = 'test2.html' it works. And now the strange part, on test2.html I just have one A element with href="test1.html", and now it works.
I have a thesis that every link will work in your own domain if you sometime have done a location.href before clicking any other link.
My test case:
Test2.html
Test1
<script>
function transfer(){
location.href = "test1.html";
}
</script>
Test1.html
Test2
You can change Test2 so it similar to Test1 and just change the href and it will broke.
I really have no ide why this is happening. Why does it work just after you have done a location.href in the same domain?
I've had exactly the same problem. For now, I solved it simply by making my link return false:
<a href='#' onclick='doSomething(); return false;'>test</a>
EDIT: This seems like a better answer: iPhone Safari Web App opens links in new window
Has anyone seen this before. It works perfectly in Chrome, Safari, FF etc. It's like it's a background image that does not recognise the constraints of it's containing div. I put the div around it to constrain it but no difference.
http://nicerworld.com/static/images/ie_error.png
<div style="width:200px;height:25px;"><fb:login-button registration-url="http://nicerworld.com/fb_reg_step_1/" on-login="fb_login(arguments);">{% trans "login with Facebook" %}</fb></div>
I hate IE so much it's not funny!
Hope one of you can stop me doing something silly!
The </fb> on the end was the problem. It should have been </fb:login-button>!!
It worked in all other browsers. As usual, MS cost me loads of time.
Rich