Home/ Questions/Q 8179759
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T00:04:13+00:00

Here’s my code in the <head></head> : <link rel=stylesheet href=http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css /> <script type=text/javascript src=http://code.jquery.com/jquery-1.7.1.min.js></script>

  • 0

Here’s my code in the <head></head>:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
// <![CDATA[
$(function() {
});

$(document).ready(function () {
    $('#dialog1')
        .dialog({
          position: 'center',
          modal: true,
          autoOpen: false
        })
        ;
    $('.panier')
        .unbind('click')
        .click(function(event) {
            event.preventDefault();
            $('#dialog1').dialog('open');
        });
});

// ]]>
</script>

And the html code:

    <div data-role="page">
        <div data-role="header">
            <h1>Choisissez vos pizzas&nbsp;!</h1>
        </div>
        <div data-role="content">
            <div data-role="footer">
                <div data-role="navbar">
                    <ul>
                        <li><a class="panier" href="/" data-role="button" data-icon="search">Voir panier</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div data-role="dialog" id="dialog1" class="app-dialog">
        <div data-role="header">
            <h3>A dialog</h3>
        </div>
        <div id="content" data-role="content">
            <p>I am a dialog....!</p>
        </div>
    </div>

When I launch my page everything’s fine until I click on the “panier” button: the error raised is:

Uncaught no such method 'open' for dialog widget instance

I really don’t know why this doesn’t work, because a dialog widget instance should have an open() method.

Any idea?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you are confusing the jquery mobile dialog with the jquery UI dialog. A jquery mobile dialog is really another JQM page just styled to look a bit more like a dialog (overlay, rounded corners). To display a JQM you just use the $.mobile.changePage('#yourDialog', optionalTranistion) method. That said JQM dialogs do have a close method (I’m not sure but there may have also had an open method at some point).

    So for your code, 

     $(document).ready(function () {
        /*  $('#dialog1')  this is JQUI code
        .dialog({
        position: 'center',
        modal: true,
        autoOpen: false
        })
        ;*/
        $('.panier')
        .unbind('click')
        .click(function (event) {
            event.preventDefault();
            //$('#dialog1').dialog('open');
            $.mobile.changePage('#dialog1');
        });
    });

    There is also a popup widget for JQM that is in development (and has been for a little while now).

    You may also be interested in the simple dialog plug in for JQM.

    • 0