.popup('open') not working after navigate next page

neugebaue..

Re: .popup('open') not working after navigate next page

10 years ago

Hi, I think I had the same Problem and solved it this way:

$('#ID_OF_POPUP_ELEMENT').popup('close');
try {
$.mobile.popup.active = null;
delete $.mobile.popup.active;
} catch (e) { }

Hope this works for you too :)

haga0054

Re: .popup('open') not working after navigate next page

10 years ago

There is definitely a bigger problem here. We need a lot more information than what you have provided, like perhaps a working example? I would search on the forums for "How to ask a question" and look at the thread about it. There are some solutions to common problems as well.

Also check this out: http://jsfiddle.net/4xu4W/

This is an example I created showing the navigation between pages and that it won't break the popup functionality. Please modify and re-create your scenario if possible.

lapieuvre

Re: .popup('open') not working after navigate next page

10 years ago

Hi everyone,

I'm currently facing the same issue and was wondering if someone has an idea of what's going on ?

I use a single page template (the jsfiddle link from haga0054 shows a multi-page template), and a few buttons that dynamically "reload" this page with different GET parameters, so a different content.

On first page load (no ajax) my popup works fine, but then it doesn't work anymore once I clicked a link that dynamically reloaded my page (ajax call).

#&ui-state=dialog is added to the url, but the popup doesn't show up.

If I simply load my page directly, everything's fine again.

I've read somewhere in the documentation that widgets are supposed to automatically initialize on pageInit.

Is that right ? Do I need to do something else when this event is fired to "reset" the popup widget ?

Here is my code :

<div data-role="page" id="wrapper">
<div data-role="content" id="content">
<a href="#popupBasic" data-rel="popup" data-position-to="window" data-role="button" data-icon="plus" data-theme="b" data-iconpos="right" data-transition="fade" data-prefetch>Add</a>
<div data-role="popup" id="popupBasic" data-overlay-theme="a" style="width:600px;">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<form>
<div style="padding:10px 20px;">
<h3>Please sign in</h3>
<label for="un" class="ui-hidden-accessible ui-input-text">Username:</label>
<input type="text" name="user" id="un" value="" placeholder="username" data-theme="a" class="ui-input-text ui-body-a ui-corner-all ui-shadow-inset">
<label for="pw" class="ui-hidden-accessible ui-input-text">Password:</label>
<input type="password" name="pass" id="pw" value="" placeholder="password" data-theme="a" class="ui-input-text ui-body-a ui-corner-all ui-shadow-inset">
<input type="submit" value="Submit Button" />
</div>
</form>
</div>
</div>
</div>

Thank you very much for your time !

Cédric

rrndzg1970

Re: .popup('open') not working after navigate next page

9 years ago

@haga0054

If you copy '<a href="#popupBasic" data-rel="popup" type="button">Open Popup</a>' in page 2 you will reproduce the problem. The popup is not shown.

I have the same problem

watusiware

Re: .popup('open') not working after navigate next page

9 years ago

Well, yes, of course this will not work.

You can't have two elements in the document with the same ID.

If page 1 and page 2 are both in the document at the same time (which they will be if you transition between them) this will not work consistently.

Which popup should it open? And how would the browser know which popup to open?

If you have the same ID appearing twice, and you try to find the element with that ID, the browser has to punt, and it will either give you the first one, the last one, a random choice, or none. Depends on the browser.

Rob Beach

Re: Re: .popup('open') not working after navigate next page

9 years ago

So does that mean that you can't have page1.html and page2.html both with the same pop up menu, even though in the pop up menu all you have is a standard <a> tag in a list view ?

if you click a link from page1.html to page2.html that is in a popup, the menu button on page2.html will not work any more.

It is as if jquery mobile stops the normal browser page change from page1 to page2 and loads both pages in one doubling up the popup element and adding #&ui-state=dialog on the end of the url.

Surely page1.html and page2.html both need the menu popup element otherwise if someone goes to the site directly to one of them pages the popup will not be there to start off with.

Or do you have to make an entirely new popup / menu for every single page ?

watusiware

Re: .popup('open') not working after navigate next page

9 years ago

There are two separate issues here:

1. You cannot duplicate an ID in the DOM. This has nothing to do with jQuery Mobile. It is basic browser functionality. No browser can properly deal with a duplicated ID. They punt the best they can. You should never duplicate an ID. It is non-obvious to developers, though, that in JQM you should not duplicate an ID anywhere in your entire site, and so a lot of developers have trouble with this.

2. Prior to JQM 1.4, popups have to be defined within the page in which they are used. I believe in 1.4 the popup could be on another page, but unsure of the details, as documentation is incomplete since 1.4 is still in beta. Of course, if you were to reference a popup that's defined on another page, you need to insure that the other page is actually loaded in the DOM. Normally, pages are removed once they are no longer needed.

Shai Petel

Re: .popup('open') not working after navigate next page

9 years ago

Well, watusiware,

JQM could do this:

once a page is loaded in transition, before adding all it's pages as divs to the dome - perform a simple check:

if a page div with that ID already exists - replace it's content.

if not - add it.

this will solve a lot of problems for everyone.

P.S. I have this issue and my popups are uniquely named in each page. I get it when I browse to page1.aspx, it works.

I go to do some action on page2.aspx and then navigate back to page1.aspx - popups no longer work.

Any help would be appreciated.

watusiware

Re: .popup('open') not working after navigate next page

9 years ago

if a page div with that ID already exists - replace it's content.
if not - add it.

Has nothing to do specifically with page IDs. The problem occurs with any ID used for any purpose.

Your fix would make it impossible to do a same-page transition, and, as well, doesn't fix the problem.

I don't know why your popup doesn't work. I'm a horrible clairvoyant.

Don Langh..

Re: .popup('open') not working after navigate next page

7 years ago

I had the same problem, and I think I understand the issue (thanks to various explanations in this thread) and a solution (for anyone who may be stumbling through their first jQueryMobile, like I am).

My application is written in C# MVC.

To summarize the issue, I have this basic body layout in my view:

<body>
<div data-role="page">
<div data-role="header"><h1>List 1</h1></div>
<div data-role="main" class="ui-content">
<a href="/myapplication/mycontroller/list2">Link to List 2</h>
<a href="#popupMenu" data-rel="popup" data-role="button" data-icon="action
data-inline="false" data-transition="pop"
data-mini="true">Actions</a>
</div>
<div data-role="popup" id="popupMenu" data-theme="a">
<ul data-role="listview" data-inset="false" style="min-width:210px;">
<li><a href="#">View Ticket </a></li>
<li><a href="#">View Journal</a></li>
<li><a href="#">Add Journal Entry</a></li>
<li><a href="#">Reassign</a></li>
</ul>
</div>
</div>
</body>

The "List 2" calls a different method that returns the same view (only with a different list of items). This means that all of the identified elements in the DOM are being added a second time with exactly the same ID values. So instead of one popup with ID of "popupMenu", there are two popups named " popupMenu". This is the reason why the popup doesn't open when the second page loads.

The way to fix this is to insure that the ID of the popup is unique for each instance you want to reference. I accomplished this by adding the last element of the URL's "SCRIPT_NAME" value to the ID of the popup. When the URL of my page is /myapp/mycontroller/list1, the ID of my popup will be "popupMenu_list1". When the URL is /myapp/mycontroller/list2, the ID becomes "popupMenu_list2". When the list1 page loads, "popupMenu_list1" is added to the DOM. When the list2 page loads, "popupMenu_list2" is added.

Here's my code.

First, I set the value of a variable named pageid to the name of method:

@{
string[] clip = Request.ServerVariables["SCRIPT_NAME"].Split('/');
string pageid = clip[clip.Length - 1];
}

With that I can uniquely identify the popup element:

<a href="#popupMenu_@pageid" data-rel="popup" data-role="button" data-icon="action"
data-transition="pop"
data-mini="true">Actions</a>

Works for me. Your mileage may vary :)

watusiware

Re: .popup('open') not working after navigate next page

7 years ago

While this is a 3-year-old post, this particular issue remains unchanged - it is probably the #1 issue that new JQM developers run into trouble with.

The above ^ solution is only a partial one, I am afraid, and will fail in some edge cases. The script name or page name does not necessarily make the ID unique.

Consider a page with a list of song titles, and you can navigate from the song titles to details about the song. You might have a popup used for some reason on the index page, and also one on the detail page.

If you use an ID of, say, popupIndex on the list page and popupDetail on the detail page, it works so long as your navigation is vertical. It fails, though, if navigation is lateral. That is, navigate from from song detail page directly to the next song detail page.

You often may not discover this immediately. Perhaps you only have vertical navigation to start, but later somebody decides they'd also like lateral navigation. Now, suddenly, what was working no longer works.

The solution is that when you absolutely HAVE to use an ID (I avoid them if at all possible!) they need to be truly unique - across all pages and across an entire user session.

For that, I use a simple sequential ID generator in server code, Static Site Generator code, or client MVC code. e.g. id1, id2, id3, etc.

I use this only where HTML or the client-side framework actually requires an ID, such as when tying a label to an input where you cannot wrap the input with the label, or tying a navigation element to popup content.

Assuming you use some sort of templates, call the unique ID generator and store an ID in a variable in your template. Then, use that variable in the two places needed.

A simple example, in ERB. unique_id is a little function that I wrote in Ruby that returns id1 the first time it is called, id2, the second time, etc. The progression is carried across pages and documents by the server MVC framework. (The sequential number is held in a class variable in a Ruby module.)

<%
username_id = unique_id
password_id = unique_id
%>
<label id='<%= username_id' %>>User Name</label>
<span class='contrived'>This span is just here to contrive a reason for not wrapping the input with the label</span>
<input id='<%= username_id %>' name='username'>
<label id='<%= password_id %>'>Password</label>
<span class='contrived'>Another contrived example</span>
<input id='<%= password_id %>' name='password''>

As you can see, it is a contrived example. Absent the span, you could just wrap the input with the label, and dispense with the ID completely. But many CSS and JS/CSS platforms - for example, jQuery Mobile and Bootstrap - have widgets that aren't friendly toward wrapping inputs with labels. And, so, this is how I deal with necessary IDs.

I NEVER use an ID in a CSS or jQuery selector, though! That is why my IDs never have semantic meaning. These IDs are there for the browser only, and have no meaning to humans. I give them abstract names that hopefully clearly indicate that.

I never give an ID to a page! They get classes. (Often more than one.)

There is almost always a better way than using IDs when you need a selector, typically using CSS classes (perhaps in combination with tags) and localized search.

IMO, IDs have been mis-used by too many web developers for way too many years. CSS classes were introduced in 1995 (along with CSS! IDs predate CSS...). They are more appropriate than IDs for MOST of the places I see IDs used in HTML. Some habits die hard. It's ironic that this is probably done just as much by developers who were only toddlers ( or weren't even born yet) in 1995, and have just adopted the bad habits of those that went before them.

Most uses of IDs just need to die, along with abominations like <font>, <center>, and inline styles! They were mistakes made by the early designers of HTML who just didn't know yet what a bad idea they were.

Response title

Attachments

jQuery Forum