问题

I want to open a jquery-mobile dialog programmtically. I tried to do:

$("#jenia-dialog").dialog()
#("jenia-dialog").dialog("open")
Error: no such method 'open' for dialog widget instance

This is my html file:

<!DOCTYPE html>
<html>
    <head>
    <title>Page Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>Sample</h1>
    </div>
    <div data-role="content">
        <p></p>
        <p><a href="dialog.html" data-rel="localhost/static/dialog" data-role="button">Is this a question?</a></p>
    </div>
</div>
<div data-role="page" data-url="dialog.html" id="dialog-jenia">
    <div data-role="header">
        <h1>Dialog</h1>
    </div>
    <div data-role="content">
        <p>Is this an answer?</p>
    </div>
</div>
</body>
</html>

This is my jsfiddle page: http://jsfiddle.net/kK24p/

All I want to do is open the dialog using js instead of the button.

If someone could help me it would be great.

Thanks a lot in advance.

回答1:

Working examples:

Solution 1

Page 1: - index.html

<!DOCTYPE html>
<html>
    <head>
    <title>Page Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>Sample</h1>
    </div>
    <div data-role="content">
        <p></p>
        <p><a href="dialog.html" data-rel="dialog" data-role="button">Open dialog</a></p>
    </div>
</div>
</body>
</html>

Page 2: - dialog.html

<div data-role="page">
    <div data-role="header">
        <h1>Dialog</h1>
    </div>
    <div data-role="content">
        This is dialog content
    </div>
</div>

Solution 2

<!DOCTYPE html>
<html>
    <head>
    <title>Page Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
    <script>
    $(document).on('pagebeforeshow', '#index', function(){ 
        $(document).on('click', '#open-dialog', function(){ 
            $.mobile.changePage("#jenia-dialog", {transition: 'pop', role: 'dialog'});  
        });
    });
    </script>
</head>
<body>
<div data-role="page" id="index">
    <div data-role="header">
        <h1>Sample</h1>
    </div>
    <div data-role="content">
        <p></p>
        <p><a id="open-dialog" data-role="button">Onen dialog</a></p>
    </div>
</div>
<div data-role="dialog" id="jenia-dialog">
    <div data-role="header">
        <h1>Dialog</h1>
    </div>
    <div data-role="content">
        This is dialog content
    </div>
</div>  
</body>
</html>

Correct way of programatically opening dialogs requires changePage function, like this:

$.mobile.changePage("#jenia-dialog", {transition: 'pop', role: 'dialog'});

Same thing works if you need to open external dialog:

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

回答2:

I did couple of changes to your code please refer it. I removed the closing tag for opening div <div data-role="content"> in first page. It is wired but solve it in the future and the next point is you cannot load external page like that in a popup. Please refer this link How to load an external page in JQM popup

<div data-role="page">
    <div data-role="header">
        <h1>Sample</h1>
    </div>
    <div data-role="content">

        <a href="#dialog-jenia" data-rel="popup" data-role="button">Is this a question?</a>


</div>
<div data-role="popup"  id="dialog-jenia">
    <div data-role="header">
        <h1>Dialog</h1>
    </div>
    <div data-role="content">
        <p>Is this an answer?</p>
    </div>
</div>

来源：https://stackoverflow.com/questions/24071669/jquery-mobile-cant-open-the-dialog-programmatically-tried-everything-i-could

标签

javascript