JQuery Mobile 1.4 Close dialog programmatically

Question

Since JQM 1.4 has changed some widgets, in order to use "dialog" widget, there are 2 options:

data-role="page" data-dialog="true"
data-rel="popup"

I'm using first approach, so when user clicks "OK" button of my dialog, I update database and if all is ok, I would like to close the dialog.

As mentioned in JQM doc I've tried using $( ".selector" ).dialog( "close" ) but it throws Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'. Some example code:

Dialog HTML

<div id="manage-page" data-role="page" data-dialog="true" data-corners="false" data-close-btn="right" data-overlay-theme="b"> 
    <div data-role="header">
        <h1>Manage</h1> 
    </div>
    <div data-role="content">  
        <h3>Title</h3>
        <input type="text" id="title" value=""/>
        <a href="#" id="saveTitle" data-role="button">Save</a>  
    </div>
</div>

Dialog JS

$(document).on('click', '#saveTitle', function(){
    var title= $('#title').val();

    $.ajax({
        type: "POST",
        url: CUSTOM_URL,
        success: function(data) {
            if(data != -1)
                $('#manage-page').dialog('close'); 
            else
                // Some stuff
        },
        error: function() {
            console.log("ERROR saving title");
        }
    });
});

What is wrong? Thanks

UPDATE

I've solved using data-rel="back"in my open button and removing $('#manage-page').dialog('close');

Yeah. It works well in general (it's a very small piece of the whole project) — Hugo, Jul 11 '14 at 07:55
http://stackoverflow.com/questions/13520139/jquery-ui-dialog-cannot-call-methods-on-dialog-prior-to-initialization — Oliboy50, Jul 11 '14 at 07:58
I'm opening the dialog throw `$.mobile.changePage(domain() + '/private/manageDialog');` not using javascript. — Hugo, Jul 11 '14 at 08:00
use popup instead, dialog is deprecated and will be removed on 1.5 — Omar, Jul 11 '14 at 09:32
Mmmm regarding to jqm doc the dialog widget it's deprecated, that is `data-role="dialog"`... isn't it? I'm using `data-role="page" data-dialog="true"`. — Hugo, Jul 11 '14 at 09:58
@Fabien you mean to say adding data-rel="back" in your save button ? — Iftikar Urrhman Khan, Aug 10 '16 at 07:03

score 0 · Answer 1 · answered Jul 11 '14 at 08:01

0

I reproduced the error. Your dialog code is ok, but you have to fix the way you use to open the dialog. You have to add the option:

$.mobile.changePage(domain() + '/private/manageDialog', {role:"dialog"});

Or add the data-rel property:

<a href="#manage-page" data-rel="dialog">Open dialog</a>

answered Jul 11 '14 at 08:01

Sga

3,608
2
36
47

Your first option makes my dialog ugly (dialog's position changes, close button overlays, ...) and when I try closing the dialog I get blank page. Second one, I'm still getting the same error. Thanks! – Hugo Jul 11 '14 at 08:24
uhm, it works in my test; the blank page seems like a page/hash problem. Can you try adding `data-history="false"` to your dialog? – Sga Jul 11 '14 at 08:33

JQuery Mobile 1.4 Close dialog programmatically

1 Answers1