External panels need to be external. Yours is inside your first
page!
It needs to go OUTSIDE of any page.
Unfortunately, that means that you need to duplicate it in every
document, because otherwise it would fail if the user bookmarks the
page and comes back, refreshes the browser, etc.
When loading a page with Ajax, JQM loads the first page found,
and ignores everything else. So, in normal navigation, the duplicate
panel delivered with every document is a bit of wasteful bandwidth
that is ignored.
You can avoid
the duplication by having your server not send it for Ajax
requests. (You can do the same for <head> content,
as well.
As well, in hybrid mobile app environments - where there is no
browser reload, no way to bookmark a page, etc. etc. you can just
include
<head> and external widgets on the first page only.
BTW, I wouldn't put all that JS code directly in <head>, because
then you must duplicate it in every document. (At least for a web
environment). Always link to CSS and JS files, and then the wasteful
overhead is limited to just the tags with the link URLs, rather than
all of the JS itself.
If you use a multi-page document, then external panels and popups
are a breeze. It's also a garden path you don't want to go down...