jtsage/jquery-mobile-simpledialog

issue simpledialog2 additional simpledialog

bmcharek opened this issue · 4 comments

Hi Jonathan,

In my code I use an additional feature to the dialog. If user changes input of textarea, a bool (now button) mode simpledialog pops-up with a warning. This used to work in the previous version.
In the newest version I built this feature in the callbackClose, such as that clicking either the 'ok' or 'cancel' button returns either true or false. The popup appears shortly and fades. Somewhere it is destroyed, before a button is clicked.
It goes something like this:
$(document).delegate('#opendialog', 'click', function() {
// NOTE: The selector can be whatever you like, so long as it is an HTML element.
// If you prefer, it can be a member of the current page, or an anonymous div
// like shown.
$('

').simpledialog2({
mode: 'blank',
headerText: 'Some Stuff',
headerClose: true,
callbackClose: function () {

                $('<div>').simpledialog2({
                mode : 'button',
                headerText: ' ',
                headerClose: true,
                buttonPrompt : 'Somethin something text?',

                buttons : {
                    'OK': {
                        click: function () {

                            return true;

                        },
                        icon: "delete"
                    },
                    'Cancel': {
                        click: function () {

                            return false;
                        },
                        icon: "delete",
                        theme: "c"
                    }
                }
            })
            },
blankContent : 
  "<ul data-role='listview'><li>Some</li><li>List</li><li>Items</li></ul>"+
  // NOTE: the use of rel="close" causes this button to close the dialog.
  "<a rel='close' data-role='button' href='#'>Close</a>"

})
})

Could you please have a look at it?
cheers

Ok - the short answer is that chaining like this was never an intended option - the way that simpledialog cleans up after itself is rather agressive.

So what you are seeing happen is a time-delayed cleaning function nuking your new dialog (it's delayed so the animations work correctly).

You have a few options until I can address this in a clean way:

1.) turn off animation on the first one - it will drop the time delay, and should work. I think.
2.) time-delay opening the second one - assuming that the line:

rtrn = newdialog(n_wuhz);

is what is opening the dialog, try something like:

setTimeout("newdialog(n_wuhz);", 1200);  // Anything slightly over a second should work.

I will work on this - I'm not sure how I want to go about it just yet.

Good one. Works so far. Thanks!

Update: For clicking ok, it works nicely. However, if you cancel another problem arises. This is due to the order of events.
It goes something like:
Get main dialog,->close->Close main dialog->open check dialog->return check->close check dialog->go back to original page.
What you want is, close check dialog, if return==true: go back to main page
else if return ==false: go back to main dialog.
It seems like the close button has higher priority. Whatever you do, the dialog is closed.

Hi,

So this is how I kind of solved it. The thing is role="close" in the ui-btn-left causes the dialog to close, before the callbackonclose is applied.
I added two options:
hasclosebuttonOption: false,
closebuttonOption: 'console.log("no closebuttonOption")',

and furtherone I do a check before creating the close button:
-->line 88,
if(o.hasclosebuttonOption){
$("

<  a class='ui-btn-left' onClick=' "+ self.options.closebuttonOption +"' href='#'>Close
").appendTo(self.sdHeader).buttonMarkup({ theme : o.themeHeader, icon : 'delete', iconpos: 'notext', corners: true, shadow : true });
}
else{
$("
<  a class='ui-btn-left' rel='close' href='#'>Close
").appendTo(self.sdHeader).buttonMarkup({ theme : o.themeHeader, icon : 'delete', iconpos: 'notext', corners: true, shadow : true });
}

I am sure you will come up with a neater solution, and I rather not mess with jquery.mobile.simpledialog2.js file. So I am anxious to see how you would solve this.

cheers