Диалог Jquerymobile с помощью mobile.changepage не работает на второй странице - PullRequest
Новая
       25

Диалог Jquerymobile с помощью mobile.changepage не работает на второй странице

3 голосов
/ 14 января 2012

У меня есть диалоговое окно (не внешний html), которое отображается, когда я нажимаю на кнопку на странице, оно работает нормально, если html, содержащий диалоговое окно, является первой страницей, к которой осуществляется доступ, но если этот файл открывается при щелчке по ссылке на другой странице, при нажатии кнопки диалоговое окно не отображается.

Вот код для страницы, содержащей диалоговое окно ... Предупреждение в событии нажатия кнопки отображается, даже если это не первая страница, к которой осуществляется доступ, но диалоговое окно не отображается. 

<!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>

Ответы [ 3 ]

2 голосов
/ 14 января 2012

Вы используете jQuery Mobile v1.0, но в то же время вы передаете неправильные аргументы $.mobile.changePage, как если бы это было, скажем, v1.0 alpha. Не уверен, решит ли это вашу проблему, но стоит попробовать: 

$.mobile.changePage('#successdiv', {
    transition: 'pop',
    reverse: false,
    changeHash: true
});
1 голос
/ 31 января 2012

Право dfsq, только div [data-role = "page"] загружается, когда вы ссылаетесь на эту страницу с другой страницы. Я бы предложил переместить диалог в собственный HTML-файл и открыть его через 

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

или 

$.mobile.changePage('your_dialog.htm', {role: 'dialog', transition: 'pop'});
1 голос
/ 16 января 2012

Когда я перехожу с одной мобильной страницы jquery на другую с помощью hrefs, я должен установить атрибут rel как внешний: 

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