Going back to previous page works in simulator not on iOS device jquerymobile

Question

I am changing the page with this method

$.mobile.changePage("Preview.html", {
        transition : "slide",
        role : "page",
        changeHash:true                            
    });

this is how my preview page looks like

    <div data-role="page"  data-name="preview" class="prew">
        <div data-role="content">
            //content
       </div>
    </div>

now when i touch the screen i have to go back to previous page.

so i created this function

$('.prew').live('tap', function() {
         alert('clicked');
         history.go(-1);//<--this works in simulator not in device.
         //window.history.back() ;//<--this also works in simulator not on device.
         //navigator.app.backHistory();<--this works fine on android not on iOS.
    });

edit: i have used a plugin called photoswipe which causes the issue . the history.go(-1),history.back() or data-rel="back" works fine on other pages.

photoswipe is preventing from getting back to previous page.

Omar · Accepted Answer · 2013-03-26T16:04:37.570

6

Here is a method you could use. However, pages should have a unique ID in order to have this working.

Test it here.

$('.prew').on('tap', function() {

 // get the ID of the previous page
 var previous = '#' + $.mobile.activePage.prev('div[data-role="page"]')[0].id;

 // move to previous page with reverse effect
 $.mobile.changePage(previous, {
    transition: 'slide',
    reverse: true
 });
});

edited Mar 26 '13 at 16:04

answered Mar 26 '13 at 14:22

Omar

32,302
9
69
112

1

i tried everything what other people posted before posting here but this is the most interesting answer although it doesn't solve my problem.please read my updated question. – Najeeb K Mar 27 '13 at 04:37
@NajeebK so the `tap` event is not working where you have photoswipe loaded? – Omar Mar 27 '13 at 09:48
no the tap event works fine, the back event was not working with the photoswipe i dont know why, so now i am just showing a div with slide effect and then hiding it on tap event.this way i fixed my issue. – Najeeb K Mar 27 '13 at 11:24
Maybe the previous page has no `ID`? @NajeebK – Omar Mar 27 '13 at 11:30
The previous page has ID, when i removed photoswipe it worked like a charm so the problem was with photoswipe – Najeeb K Mar 28 '13 at 04:50

score 5 · Answer 2 · answered Mar 26 '13 at 11:47

I wouldn't recommend data-rel="back". With my experience this seem to cause problems (especially when user manually force reloads using ctrl + f5).

If you have handled the history properly then I would suggest you to use history.back() function.

$('.prew').live('tap', function() {
    alert('clicked');
    history.back();
});

Also I think its better to use ID than class in Page tag (e.g. id="prew").

score 3 · Answer 3 · answered Mar 26 '13 at 07:08

3

So instead of using a javascript approach to go to previous page. Why not add data-rel="back" attribute to the button/link.

Everything then will be taken care by jQuery Mobile (JQM) itself.

<a href="#" data-rel="back">Back</a>

answered Mar 26 '13 at 07:08

msapkal

8,268
2
31
48

i don't want to display the back button although i m using it on all pages but on this page its not the requirement so i have to manage it with code i did added the above line and then replaced the above history.go(-1) to this $(this).find('.backBtn').trigger('click'); but this also didn't worked on device , but i don't know why it works on simulator – Najeeb K Mar 26 '13 at 07:36
data-rel="back" will do the trick, no need to add the tap event listener on this. – msapkal Mar 26 '13 at 08:22

Going back to previous page works in simulator not on iOS device jquerymobile

3 Answers3

Linked