Closing JQuery-mobile Dialog results in crash

Question

I'm working on a mobile app using JQuery-mobile and I'm having problems with my dialogs, every time I try to close the dialog (using the default close button) the app freezes.

Head code:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <!-- JQuery Mobile CSS link -->

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <!-- JQuery Mobile link stored on CDN-->
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> <!-- JQuery Mobile link stored on CDN -->

Relative Home Page Code:

<p><a href="#register" data-role="button" data-rel="dialog" data-transition="pop">Register</a></p>

Dialog Code:

    <!-- Start of third page: #register -->
<div data-role="page" id="register">

    <div data-role="header" data-theme="e">

        <h1>Activation</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="d">    

        <h2>Licence Key</h2>
        <p>Please enter your licence key in order to activate your additional features of 20Keys</p>        

            <div data-demo-html="true">
                <div class="ui-field-contain">
                    <label for="licenseKey">Licence Key:</label>
                    <input type="text" name="licenseKey" id="key" placeholder="Insert Key" value="">
                </div>
            </div><!--/demo-html -->

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

    <div data-role="footer">

        <p><a href="#one" data-role="button" data-inline="true" data-icon="lock">Activate Now</a>   
        <a href="#one" data-role="button" data-inline="true" data-icon="cancel">Cancel</a></p>  
    </div><!-- /footer -->
</div><!-- /page register -->

At the moment the activation button (work in progress) just goes back to the home page. If you spot anything that could be causing this issue I'd appreciate your comment.

The same issue occurred with the Footer buttons when the code was:

<p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="lock">Activate Now....</a>   
    <a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="cancel">Cancel</a></p>

I had to remove data-rel="back" in order to fix that.

I'm using Chrome if that helps answer this. Thank you in advance.

Answer 1

I found out what the problem was...

You can't use data-rel="back" in a dialog page because there's technically no back page to go to for a dialog page because it pops up like a new tab would.

The correct way to do solve my problem would be to either just use href="#one" or possibly data-rel="close" instead of data-rel="back".