Jquery mobile - custom popup menu

Question

Find below script http://jsfiddle.net/yesvin/Xj8p8/

<ul data-role="listview"> <li data-role="fieldcontain"> <label for="basic">Text Input:</label> <input type="text" name="name" id="basic" value="" /> </li> <li data-role="fieldcontain"> <label for="basic">Text Input:</label> <input type="text" name="name" id="basic" value="" /> </li> <li data-role="fieldcontain"> <label for="pageselect">page select</label> <select name="pageselect" id="pageselect" data-native-menu="false"> <option value="">Choose One</option> <option value="">pageselect opt 1</option> <option value="">pageselect opt 2</option> <option value="">pageselect opt 3</option> </select> </li> <li data-role="fieldcontain"> <label for="basic">Text Input:</label> <input type="text" name="name" id="basic" value="" /> </li> </ul> <a href="#pop" data-rel="popup" data-position-to="window" data-role="button" id="farmer_family_member">Add Popup</a> <div data-role="popup" id="pop"> <ul data-role="listview"> <li data-role="fieldcontain"> <label for="popupselect">popup select</label> <select name="popupselect" id="popupselect" data-native-menu="false"> <option value="">popup select opt 1</option> <option value="">popup select opt 2</option> <option value="">popup select opt 3</option> </select> </li> <li data-role="fieldcontain"> <label for="basic">Text Input:</label> <input type="text" name="name" id="basic" value="" /> </li> <li data-role="fieldcontain"> <label for="basic">Text Input:</label> <input type="text" name="name" id="basic" value="" /> </li> <li data-role="fieldcontain"> <label for="basic">Text Input:</label> <input type="text" name="name" id="basic" value="" /> </li> <li data-role="fieldcontain"> <label for="basic">Text Input:</label> <input type="text" name="name" id="basic" value="" /> </li> </ul> </div> 

The same as on my page, when I look at this page on a mobile phone, you have some problems,

• When I click the "Add Popup" button, a popup window opens. There is a selection menu inside this popup, and data-native-menu = false does not work for this selection menu. How to enable this?

• If I change the popupselect menu inside the popup, the pageselect menu opens. How can I prevent this?

I ask for advice ...

Thanks in advance.

Answer 1

First answer

Short answer: you cannot do this. I know this sounds silly, but jQuery Mobile has some limitations with pop-ups, and the main limitation is that you cannot create pop-ups. Since the custom selection menu is just another popup that cannot be displayed from the popup.

Note. Popup chain not allowed

Currently, the framework does not support the pop-up chain, so it is not possible to embed a link from one pop-up to another pop-up. All links with data-rel = "popup" inside the popup will do nothing at all.

This also means that custom selection menus will not work inside pop-ups because they themselves are implemented using pop-ups. If you place a select menu inside the pop-up window, it will appear as your own menu selection, even if you specify data-native-menu = "false".

Official documentation: http://api.jquerymobile.com/popup/

There is a workaround available for this problem, but in this case it cannot be used. For a workaround to work, you must open a popup before opening it. Unfortunately, this is not viable here.

Second answer

This is also known as a fall event. This is a cool JavaScript error, good, but not an error, because javascript should never have worked like that.

Basically, when you click on one element, the click event will fall to the element below.

This can be prevented by using the following functions:

• stopPropagation ()
• stopImmediatePropagation ()

And here is a jsFiddle example so you can understand this problem: http://jsfiddle.net/Gajotres/Xz2np/

 $('#page1').live('pagebeforeshow',function(e,data){ $('.someDiv').live('click', function (e) { alert('Event is not going to propagate to content div, thus not hiding a header'); event.stopPropagation(); event.stopImmediatePropagation(); }); }); 

To understand this problem, just click on the DIV example, then comment on these two lines, run the example again and press DIV again.

Last thing

It will sound rude, but it must be said. Remember to accept the answer from time to time. I see that I have given you some answers to your previous questions. I usually do not mind this, but others do, and they will not help you.