issues with dynamically generated options for select

Question

So I have a simple page (html) where using jquery I load 's into a select using a php file. The code is as follows: The HTML:

<div data-role="page" id="pg_invoicedtl">
  <header data-role="header" data-theme="b">
    <a href="javascript:history.go(0)" data-icon="refresh" class="ui-btn-right" data-theme="e">Refresh</a>
    <h1>MyApp</h1>
  </header>

    <div align="center" data-role="content">
        <ul data-role="listview" data-theme="c" data-divider-theme="e" data-count-theme="b" data-inset="true">
            <li data-role="list-divider">
                <h3 class="ui-li-heading">Select product</h3>
            </li>            

            <li>
            <div data-role="fieldcontain">
                <label for="prodselect" class="select">Choose the product:</label>
                <select name="prodselect" id="prodselect">
                </select>
            </div>            
            </li>
        </ul>
    </div>
</div>

The script (located of course in the HEAD section) that I use to populate the select is:

<script type="text/javascript">
        $(document).ready(function() {
            $.ajaxSetup ({
                cache: false
            });

            var ajaxLoader = '<img src="images/ajax-loader.gif" alt="loading.." />'; 
            var loadUrl = "loadproducts.php";  


            $('#prodselect').toggle('fast', function() {
                $(this).html(ajaxLoader);
                $(this).toggle('fast', function() {
                    $.get(loadUrl, function(data){
                        $('#prodselect').html(data);
                    },'html');                  
                });
            });
            $('#prodselect').selectmenu('refresh');
        });        
</script>    

And now the php file (loadproducts.php) that the script is calling:

<?php
session_start();
include "/tmp/conexiune.php";

$pql = mysql_query("select * from products order by name");
$isfirst = 0;
while ($prow = mysql_fetch_row($pql)){
    if ( $isfirst == 0){
        echo '<option id="'.$prow['idproducts'].'"value="'.$prow['name'].'" selected="selected">'.$prow['name'].' - '.$prow['pu'].' EUR</option>';
    }
    else
    {
        echo '<option id="'.$prow['idproducts'].'"value="'.$prow['name'].'">'.$prow['name'].' - '.$prow['pu'].' EUR</option>';
    }
    $isfirst++;
}    
?>

First I must tell you that the above code works. With one problem though... My problem...:

• As you may observe from the code, I want the first option of the select to be "selected", but no matter what I do, it does not happen. The select box is empty after refreshing the page, and if I want to select the first option in the list using the mouse, it does nothing, just as if the first item would be selected already so it does not do it.

• If I want to select the second or other option in the list, all works fine.

• So the first element of the select seems to be selected but it does not display it's value in the select box.

• I even added the $('#prodselect').selectmenu('refresh'); to the script with no result...

• Also, everything works perfect if I use non-dinamically generated options. So for static Options, the select displays the first Option from the very beginning.

  I do not understand what could be wrong. I tested the php file outside the HTML (without calling it from the script) and the result looks just like a perfect select content, and when put inside the select TAGs it displays the perfect result. But when I call it from the script something gets messed up.

  I would put a jsfiddle here but I don't think it works with php files...

Answer 1

Try this :

 $('#prodselect').selectmenu('refresh', true);

After loading dynamic content you need to force rebuild the select as mentioned in the document : http://api.jquerymobile.com/selectmenu/#method-refresh

Answer 2

Try using the === (note 3) rather than ==.

If this does not work then change:

$isfirst = 0;

to

$isfirst = 1;

As 0 can evaluate as false in cases.

Hope this helps!