I am building a website for my phone using JQuery mobile. I am using the "Filterable inside custom select" from the 1.4.5 demo.
It works when I manually add the option values in to the code.
<div class="ui-field-contain">
<select id="filter-menu" data-native-menu="false" class="filterable-select">
<option value="SFO">San Francisco</option>
<option value="LAX">Los Angeles</option>
It works when I create one from a php file.
<div class="ui-field-contain">
<select name="Position" id="Position" data-native-menu="false" class="filterable-select" data-mini="true">
<option value="<?php echo $PositionID ?>"><?php echo $position ?></option>
However when I populate more than one by looping them
foreach($getAllComp as $row)
{
$PosID = $row["CompanyID"];
$Pos = $row["Company"];
$AllPositions .= "<option value=\"".$row['CompanyID']."">".$row['Company']."</option>
";
}
by creating
<div class="ui-field-contain">
<select name="Position" id="Position" data-native-menu="false" class="filterable-select" data-mini="true">
<option value="<?php echo $PositionID ?>"><?php echo $position ?></option>
<?php echo $AllPositions ?>
</select>
I get the following error, TypeError: listview is undefined
it refers to
form = listview.jqmData( "filter-form" )
from the function supplied from the demo
When looking at the browsers inspection console it shows the php populating the "option values" perfectly as they are in the previous two attempts.
I have tried moving the function to different places on my page etc amongst a heap of other things. Maybe it just can't be done? Thanks in advance.
The code is
( function( $ ) {
function pageIsSelectmenuDialog( page ) {
var isDialog = false,
id = page && page.attr( "id" );
$( ".filterable-select" ).each( function() {
if ( $( this ).attr( "id" ) + "-dialog" === id ) {
isDialog = true;
return false;
}
});
return isDialog;
}
$.mobile.document.on( "selectmenucreate", ".filterable-select", function( event ) {
var input,
selectmenu = $( event.target ),
list = $( "#" + selectmenu.attr( "id" ) + "-menu" ),
form = list.jqmData( "filter-form" );
if ( !form ) {
input = $( "<input data-type='search'></input>" );
form = $( "<form></form>" ).append( input );
input.textinput();
list
.before( form )
.jqmData( "filter-form", form ) ;
form.jqmData( "listview", list );
}
selectmenu
.filterable({
input: input,
children: "> option[value]"
})
.on( "filterablefilter", function() {
selectmenu.selectmenu( "refresh" );
});
})
.on( "pagecontainerbeforeshow", function( event, data ) {
var listview, form;
if ( !pageIsSelectmenuDialog( data.toPage ) ) {
return;
}
listview = data.toPage.find( "ul" );
form = listview.jqmData( "filter-form" );
data.toPage.jqmData( "listview", listview );
listview.before( form );
})
.on( "pagecontainerhide", function( event, data ) {
var listview, form;
if ( !pageIsSelectmenuDialog( data.toPage ) ) {
return;
}
listview = data.prevPage.jqmData( "listview" ),
form = listview.jqmData( "filter-form" );
listview.before( form );
});
})( jQuery );