CODEWITHSUNDEEP
jquery-mobiledialog
saj-and
saj-and

Reputation: 479

Jquerymobile dialog using mobile.changepage doesn't work on second page

I have a dialog (not external html), which is displayed when I click on a button on the page, it works fine if the html containing the dialog is the first page to be accessed , but if that file is opened by clicking on an href from another page, the dialog doesn't show up when I click the button.

Here is the code for the page containing the dialog ... The alert in the click event of the button is showing up even when this is the not the first page to be accessed, but the dialog doesn't show up.

<!DOCTYPE html>
<html>
<head>
<title>Create Team</title>
<link rel="stylesheet"
    href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

</head>
<body>

    <!-- Page starts here -->
    <div data-role="page" data-theme="b" id="page1">
        <div data-role="header" id="hdrMain" name="hdrMain"
            data-nobackbtn="true">
            <h1>Test screen</h1>
        </div>
        <div data-role="content" id="contentMain" name="contentMain">
            <div id="fullnamediv" data-role="fieldcontain">
                <label for="fullname" id="fullnameLabel" name="fullnameLabel">Team
                    Name*</label> <input id="fullname" name="fullname_r" type="text" />
            </div>
            <div id="submitDiv" data-role="fieldcontain">
                <a id="buttonSave" name="buttonSave" href="#" data-role="button"
                    data-inline="true">Save</a>
            </div>
        </div>
        <!-- contentMain -->
        <div data-role="footer" id="ftrMain" name="ftrMain"></div>
        <script>
            $("#page1").bind("pagecreate", function() {
                $('#buttonSave').click(function() {
                    alert("aaaa");
                $.mobile.changePage('#successdiv', {
                    transition: 'pop',
                    reverse: false,
                    changeHash: true
                });
                    alert("after change");
                    return true;
                });
            });
        </script>

    </div>
    <!-- page1 -->

    <div data-role="dialog" data-theme="a" id="successdiv">
        <div data-role="header" data-theme="f">
            <h1>Error</h1>
        </div>
        <div data-role="content">
            <p>This is Page 2</p>
            <button type="submit" data-theme="e" name="successok"
                value="submit-value" id="successbutton">Close Dialog</button>
        </div>
    </div>
    <!-- Page ends here -->
</body>

</html>

Upvotes: 3

Views: 5532

Answers (3)

Clarence Liu
Clarence Liu

Reputation: 4019

dfsq is right, only the div[data-role="page"] is loaded when you link to this page from another page. I'd suggest moving the dialog into its own html file and opening it either via 

<a href="your_dialog.htm" data-role="dialog">open dialog</a>

or

$.mobile.changePage('your_dialog.htm', {role: 'dialog', transition: 'pop'});

Upvotes: 1

JoshRoss
JoshRoss

Reputation: 335

When I jump from one jquery mobile page to another via a hrefs, I have to set the rel attribute to external, like this:

<a href="page2.html" rel="external">page2</a>

Upvotes: 1

dfsq
dfsq

Reputation: 193291

You use jQuery Mobile v1.0 but at the same time you pass incorrect arguments to $.mobile.changePage like if it were say v1.0 alpha. Not sure if it solves your problem but worth trying:

$.mobile.changePage('#successdiv', {
    transition: 'pop',
    reverse: false,
    changeHash: true
});

Upvotes: 2

Related Questions