admin管理员组

文章数量:1304235

I'm trying to get a div with data-type 'dialog' to display in JQuery Mobile, fired by a Javascript event. The button click in the example below is purely to fire the event.

<head>
    <link rel="stylesheet" href=".2.1/jquery.mobile-1.2.1.min.css" />
    <script src=".9.1/jquery.min.js"></script>
    <script type="text/javascript" src=".3.0/jquery.mobile-1.3.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            //$.mobile.changePage('#addCatForm');

            $('#createEvent').click (function () {
                console.log('Prove event fired');

                $.mobile.changePage('#addCatForm', {
                    transition: 'pop',
                    changeHash: false,
                    role: 'dialog'
                });
            });

        });
    </script>
</head>
<body>
    <div data-role="page" id="mainPage">
        <button id="createEvent">Create Event</button>
        <div data-role="dialog" id="addCatForm" data-theme="c">
            <p>here is some text</p>
            <div data-role="content">
                <input type="text" id="catText" data-theme="c"/>
                <input data-role="button" data-mini="true" data-theme="b" data-inline="true" type="submit" id="addCat" value="Add Category">

                <button data-role="button" data-mini="true" data-theme="c" data-inline="true" id="canCat">Cancel</button>
            </div>
        </div>
    </div>    
</body>

The console.log output correctly fires, but nothing I can do seems to get the dialog to display.

Any help appreciated.

Thank you,

I'm trying to get a div with data-type 'dialog' to display in JQuery Mobile, fired by a Javascript event. The button click in the example below is purely to fire the event.

<head>
    <link rel="stylesheet" href="http://code.jquery./mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
    <script src="http://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery./mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            //$.mobile.changePage('#addCatForm');

            $('#createEvent').click (function () {
                console.log('Prove event fired');

                $.mobile.changePage('#addCatForm', {
                    transition: 'pop',
                    changeHash: false,
                    role: 'dialog'
                });
            });

        });
    </script>
</head>
<body>
    <div data-role="page" id="mainPage">
        <button id="createEvent">Create Event</button>
        <div data-role="dialog" id="addCatForm" data-theme="c">
            <p>here is some text</p>
            <div data-role="content">
                <input type="text" id="catText" data-theme="c"/>
                <input data-role="button" data-mini="true" data-theme="b" data-inline="true" type="submit" id="addCat" value="Add Category">

                <button data-role="button" data-mini="true" data-theme="c" data-inline="true" id="canCat">Cancel</button>
            </div>
        </div>
    </div>    
</body>

The console.log output correctly fires, but nothing I can do seems to get the dialog to display.

Any help appreciated.

Thank you,

  • javascript
  • jquery
  • jquery-mobile
  • jquery-mobile-dialog
Share Improve this question edited May 21, 2013 at 9:56 Gajotres 57.3k16 gold badges105 silver badges131 bronze badges asked Apr 11, 2013 at 10:47 JonRedJonRed 2,9815 gold badges30 silver badges37 bronze badges 1
  • Put the dialog div outside the data-role=page. only popups can be inserted inside data-role=page. Treat it as a page but with data-role=dialog instead. – Omar Commented Apr 11, 2013 at 10:50
Add a ment  | 

2 Answers 2

Reset to default 5

Working example: http://jsfiddle/Gajotres/Jx9xM/

$(document).ready(function() {    
    $('#createEvent').click (function () {
        console.log('Prove event fired');

        $.mobile.changePage('#addCatForm', {
            transition: 'pop',
            changeHash: true,
            role: 'dialog'
        });
    });
});

Dialog must be on a same level as a page and not a part of the page. I this case I have moved dialog outside of a page.

Your structure should look like this, data-role=dialog outside data-role=page.

<!-- Page -->
<div data-role="page" id="mainPage">
 <button id="createEvent">Create Event</button>
</div> 
<!-- /Page -->

<!-- Dialog -->
<div data-role="dialog" id="addCatForm" data-theme="c">
 <p>here is some text</p>
 <div data-role="content">
  <input type="text" id="catText" data-theme="c"/>
  <input data-role="button" data-mini="true" data-theme="b" data-inline="true" type="submit" id="addCat" value="Add Category">
  <button data-role="button" data-mini="true" data-theme="c" data-inline="true" id="canCat">Cancel</button>
  </div>
 </div>
 <!-- /Dialog -->

本文标签： javascriptCan39t Get Dialog to show programmatically in JQuery MobileStack Overflow

版权声明：本文标题：javascript - Can&#39;t Get Dialog to show programmatically in JQuery Mobile - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741781887a2397357.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。