jquery mobile - custom select menu in a popup

Question

Please find the below fiddle 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 one as in my page, when i viewing that page in mobile it has some problems,

1. When i click Add popup button it opens a popup, Inside that popup there is select menu and data-native-menu=false for that select menu is not working. How do i enable that?

2. If i change the 'popupselect' menu inside the popup, the 'pageselect' menu is opening. How do i prevent that?

Please advice...

Thanks in advance.

Butterscotch

Answer 1

First answer

Short answer is you can't do that. I know, it sounds silly but jQuery Mobile have some restrictions with popups and main restriction is that you cant chain popups. Because custom select menu is just another popup it can't be show from the popup.

Note: Chaining of popups not allowed

The framework does not currently support chaining of popups so it's not possible to embed a link from one popup to another popup. All links with a data-rel="popup" inside a popup will not do anything at all.

This also means that custom select menus will not work inside popups, because they are themselves implemented using popups. If you place a select menu inside a popup, it will be rendered as a native select menu, even if you specify data-native-menu="false".

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

There's an available workaround to this problem but it can't be used in this case. For workaround to work one popup need to be closed before second one can be opened. Unfortunately this is not viable here.

Second answer

This is also known as falling through events. This is a cold javascript bug, ok not bug perse because javascript was never meant to work like this.

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

This can be prevented with these functions:

• stopPropagation()
• stopImmediatePropagation()

And here's 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 a DIV example then comment those 2 lines, again run an example and again click on a DIV.

One last thing

This will sound rough but it needs to be said. Don't forget to accept an answer from time to time. I can see I gave you few answers on your previous questions. I usually don't mind this, but other do and they are not going to help you.

Carboy