CODEWITHSUNDEEP
jqueryjquery-mobilemobile
KevInSol
KevInSol

Reputation: 2610

jquery mobile dialog close going back too in history

I have javascript open a dialog (which is just some text, nothing else) on any/every page someone lands on my site (yes, I know it's a mixture of javascript flavors - still getting to grips with this):

$(document).bind("pageinit", function(){
    if( getCookieValue('instructionseen') == false)
        {
        $.mobile.changePage("/php/instructions_alert.php");
        document.cookie ="instructionseen=yes; path=/;";
        }
    });

The script sets a cookie so that the user only sees the dialog once. So the idea is you come to the site, get a dialog with some instrctions, close it and carry on.

The problem in Chrome v24 (and I'm worried it might occur in mobile browsers that I cannot test on) is that closing the dialog brings me back 2 pages in the history, so I get back to the page with the link I clicked on to get to my site.

For example, say my site is MS, and is it linked to by RS (referrer site)

Desired: RS > click to MS > Dialog opens > close it > MS in view

On Chrome: RS > click to MS > Dialog opens > close it > back to RS

This happens using the X provided by JQM, or this close botton I provide:

<a href='#' onclick='$(".ui-dialog").dialog("close");' data-role='button' data-theme='c'>Close</a>

Dialog source:

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>title..</title>
<link rel='stylesheet' href='/design/mobile_style.css'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css' />
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script src='/js/main_and_JQM_init.min.js'></script> 
<script src='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js'></script>
</head>
<body>

<div data-role='dialog'  id='instructions_alert_div' data-overlay-theme='b'>
        <div data-role='header' data-theme='d'>
            <h1>Important!</h1>
        </div>

        <div data-role='content' data-theme='c'>
        content, just text...
        <a href='#' onclick='$(".ui-dialog").dialog("close");' data-role='button' data-theme='c'>Close</a>

        </div>
</div>

</body>
</html>

Thank you

Upvotes: 2

Views: 3240

Answers (1)

Omar
Omar

Reputation: 31732

There you go.

Markup:

 <!-- Start of first page -->

 <div data-role="page" id="page1">

    <div data-role="header">
    <h1>page1 header</h1>
</div><!-- /header -->

<div data-role="content">   
    <p>page 1</p>

    <a href="#page2" data-role="button">Page 2</a>


</div><!-- /content -->

<div data-role="footer">
    <h4>Page1 Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->


 <!-- Start of second page -->

 <div data-role="page" id="page2">

<div data-role="header">
    <h1>Bar</h1>
</div><!-- /header -->

<div data-role="content">   
    <p>password accepted</p>        
    <p><a href="#test" data-rel="dialog">dialog</a></p>

</div><!-- /content -->

<div data-role="footer">
    <h4>Page2 Footer</h4>
</div><!-- /footer -->
 </div><!-- /page -->

Dialog:

 <div data-role='dialog'  id='test' data-overlay-theme='b'>
    <div data-role='header' data-theme='d'>
        <h1>Important!</h1>
    </div>

    <div data-role='content' data-theme='c'>
    content, just text...
      <a href='#' onclick='$(".ui-dialog").dialog("close");' data-role='button' data-theme='c'>Close</a>

    </div>
</div>

JQM:

$("#page2").on('pageinit', function(event) {
$.mobile.changePage($("#test"), {
    transition : 'pop',
    reverse    : true,
    changeHash : true
});
 });

JSfiddle: dialog

Upvotes: 1

Related Questions