Question

Here is the scenario – I have two jQuery Mobile popups only one of which is shown at a given time (and the other may not have been shown up to that point). Each of those popups have jQuery Mobile selects given distinct dummy classes to help me find them. What I need to do is this – before the popup is closed (and I do so programmatically via popup(‘close’)) I want to reset the selects to show their first value (which is the default). Easy, I thought. Just issue

$('.selector').val(0).selectmenu('refresh')

However, do this and you end up with the error cannot call methods of selectmenu prior ot initialization. I imagine this happens because the “other” popup too has selects with the same class and they have not been initialized at that point.

Using a different dummy class for the other select is not really an option since I am using the same event handling code for the two popups which are closely related.

I also tried

$(popupid).find('.selector').val(0).selectmenu('refresh') 

but the results were similar. Surely, there is reliable way to get all the child items of a given class and work on them! I thought I had just that with find but it looks like it is not the case. The other option would be to establish if each item returned after the initial query has been initialized but that does not seem to be too easy either. I’d much appreciate some help with this one.

Answer 1

I appear to have gotten into the habit of answering my own questions! Here is the solution

To recap

• You have two or more popups defined and each of them uses one or more selects which get styled to
• a. a jQuery Mobile select on large screens and b. a MobiScroll select on small screens
• The selects are easily identifiable via a dummy class declaration
• When the popup is closed you want to ensure that the selects go back to displaying their first option

To make that more concrete, here is an example

<div data-role='popup' id='p_taqa1618A'>
  <select id = 'r_taqa1618A' class='sppp' data-role='none' data-mini='true'>
   <option value='1'>One</option>
   <option value='2'>Two</option>
   <option value='3'>Three</option>
   <option value='4'>Four</option>
   <option value='5'>Five</option>
  </select>
  //other controls inside this popup

<div data-role='popup' id='p_taqa1618B'>
  <select id = 'r_taqa1618A' class='sppp' data-role='none' data-mini='true'>
   <option value='1'>Eins</option>
   <option value='2'>Zwei</option>
   <option value='3'>Drei</option>
   <option value='4'>Vier</option>
   <option value='5'>Funf</option>
  </select>
  //other controls inside this popup

At any given time only one of the two popups, taqa1618A or taqa1618B, will be open. AT that time the other one may or may not have been previously opened and closed.

The consequence of that last statment is that a naive attempt at resetting the select via

$(‘.sppp’).val(‘1’).selectmenu(‘refresh’) will not work – jQuery will complain that you are attempting to refresh a selectmenu that has not been initialized. The scroller version used on small screens will do ditto. So here is the solution that does work.

Before closing the popup, programmatically, you issue

if (600 < $(window).width())
{
 $(popid).find('.sppp').filter('select').val('1').selectmenu('refresh');
} else
{
 $(popid).find('.sppp').filter('select').scroller('setValue','1',true);
}

followed by

$(popid).popup('close');

There are many subtle issues here but the one that needs pointing out most is perhaps this – upstyled controls can end up creating other elements that bear the same class. For example when the HTML select is upstyled to the jQuery Mobile selectmenu jQM adds a span that bears the same class – sppp in this instance.

That is why you need to filter the find(‘.sppp’) results via a filter(‘select’)

An interesting fact I have discovered in the process of doing this which might well be a jQM bug – that last line

$(popid).popup('close')

does its job even when the popid supplied is the wrong one.