CODEWITHSUNDEEP
javascriptjquery-mobile
Valery Bulash
Valery Bulash

Reputation: 413

jQuery mobile dialog not closing as it should be by default

Has the following dialog definition:

<div data-role="dialog" id="operator-delete" data-theme="b" data-title="Delete record">

    <div data-role="header" data-theme="b">
        <h2>Confirm deletion</h2>
    </div>

    <div data-role="content">
        <p><div id="delete-confirm">Do you really want to delete record?</div></p> 
        <table border="0" cellspacing="30" width=100%>
            <tr>
                <td valign="center" halign="left"><a href="#" id="delete-cancel" data-role="button" data-inline="true" data-theme="b" data-rel="back" data-icon="arrow-l">No</a></td>
                <td valign="center" halign="right"><a href="#" id="delete-confirm" data-role="button" data-inline="true" data-theme="b" data-icon="delete">Yes</a></td>
            </tr>
        </table>
    </div> <!-- /content -->
</div> <!-- /dialog -->

This dialog called by jQuery button:

<a href="#operator-delete" data-rel="dialog" data-transition="pop" 
id="delete-user" data-role="button" data-inline="true" data-theme="b" data-icon="delete" class="ui-btn-right">Delete</a>

Dialog appeared as it was required, but is not react on "No" button and close button in dialog header. Meantime jQuery doc said: "When any link is clicked within a dialog, the framework will automatically close (!!!) the dialog...". I saw jQuery samples sources - they don't put additional efforts to close sample dialogs. What's wrong?

Upvotes: 0

Views: 1568

Answers (1)

msapkal
msapkal

Reputation: 8346

I implemented your code, however i didn't had any issue closing the dialog. Please check the fiddle. I feel that there is something wrong with your HTML structure.

<div data-role="page">
    <div data-role="content">
            <a href="#operator-delete" data-rel="dialog" data-transition="pop" 
id="delete-user" data-role="button" data-inline="true" data-theme="b" data-icon="delete" class="ui-btn-right">Delete</a>
    </div>
</div>

<div data-role="dialog" id="operator-delete" data-theme="b" data-title="Delete record">
    <div data-role="header" data-theme="b">
         <h2>Confirm deletion</h2>

    </div>
    <div data-role="content">
        <p>
            <div id="delete-confirm">Do you really want to delete record?</div>
        </p>
        <table border="0" cellspacing="30" width=100%>
            <tr>
                <td valign="center" halign="left"><a href="#" id="delete-cancel" data-role="button" data-inline="true" data-theme="b" data-rel="back" data-icon="arrow-l">No</a>
                </td>
                <td valign="center" halign="right"><a href="#" id="delete-confirm" data-role="button" data-inline="true" data-theme="b" data-icon="delete">Yes</a>
                </td>
            </tr>
        </table>
    </div>
    <!-- /content -->
</div>
<!-- /dialog -->

http://jsfiddle.net/maheshsapkal/aeWAE/

Upvotes: 1

Related Questions