Popups, Dialogs, Pages Hide Problems, Workarounds
Hi All:
I am trying to move to the new Version 1.4.2 and have encountering some problems, some of the problems the older version also has. I would appreciate any comment, etc.
(1) Popups
Popups cannot open popups. I understand this is a restriction of the older version and I read somewhere that this restriction will be removed. but somehow it is not removed.
I like to have a popup (for example, a user login), and if an error occurred, another popup comes out and displays the error. Now it is not possible. If it is possible, please let me know. And removing this restriction should be possible because JQuery UI's dialogs are just popups and these popups can open more popups. I have the feeling that the development of jQuery mobile and jQuery ui are somehow related in some way.
Because of this restriction, I am using dialog pages for some of the things I would prefer to use popups.
(2) Dialogs
I prefer to create dialogs programmatically through javascript by inserting a div into document.body and removing the div upon closing of the dialog.
This div must have an ID and the pagecontainer's change page method must accept this id instead of the jQuery object of this div. The reason is that otherwise, the hash is never updated and the back button (or $.mobile.back()) does not move. so I cannot close the dialog anymore.
As we all know that making more and more unique element id's in jQuery mobile is not a very nice way as conflicts of id's may appear if the project involves lots of pages. But I do not see any way of getting out of this (I reported a problem with closing dialog in another post, now i found it is because i was not passing the "#divid" to the change page method, instead I just passed jQuery(divelement)).
Geneting a unique id might not be that much of a problem, as you can incrementally generated id's like
my-dialog-1, my-dialog-2, etc. But at the closing of the dialog, I need to remove these div's. otherwise, my dom is just getting bigger and bigger and possibly slowing things down, etc. But how to remove this div?
We must bind some function to the page hide event of the dialog.
(3) Page - hide?
In the old version, one can bind something like
$("#dialog-1").on("pagehide", function(){$(this).remove();});
so when the dialog is hidden, the element and its descendents will be removed.
Now we do not have a "pagehide" event on a page. Instead, we are advised to bind to a "pagecontainerhide"
on the pagecontainer. We supposed to have only one pagecontainer. If I just bind to this event, every time a page changes, it will be fired, including the time when the dialog opens. I am not sure about how to do this. I tried
$("#dialog-1").on("pagecontainerhide", function(){...});
and it does not work.
How do I bind a function to the hiding of a particular page to remove the div of that page correctly?
Thanks all in advance. If you have any suggestion on how to open popups in popups, I would be very much interested. Also, if you have a way of not giving a unique id to a div and create a dialog that can be closed, I will be happy to listen to.