I made a web app using google apps script and deployed it on the web. The application works well on PC, but when I load it to a webview on android, the dynamically populated <select>
menus are not displayed (they are empty).
I know that google caja has an issue with jquery mobile from here, so I cannot use jquery mobile.
The question is if there is a way to make that <select>
menus work using only jquery or javascript? Or maybe I can do some trick in android?
Here is an example of how I populate the menu using jquery:
function addClients(clients){ //array of options from google spreadsheets.
$('#client').empty();
for (var i in clients) {
$('#client').append('<option>'+clients[i]+'</option>');
$('#client').trigger("chosen:updated");
}
}
HTML part:
<select name="client" id="client" data-native-menu="true" data-role="none">
<option> ---- Choose a client ----</option>
</select>
Android part:
WebView myWebView = (WebView) findViewById(R.id.webView1);
myWebView.loadUrl("--- my web app's URL here ---");
myWebView.setWebChromeClient(new WebChromeClient());
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
Thank you in advance.
It looks kile the menu is not refreshing. At the beginning I have a built-in option:
<option> ---- Choose a client ----</option>
This option is deleted in jquery part, but then the menu is not updated, it stays empty.
I've already tried with no positive result:
$('#client').trigger("chosen:updated");
$('select').selectmenu('refresh');
$('#client').hide();
$('#client').show();
$('select#client').selectmenu('refresh');
I solved the problem. What I did is commented the line which emptied the select menu and used jquery ui for my purpose:
function addClients(clients){ //array of options from google spreadsheets.
//$('#client').empty(); ---------- I commented this.
for (var i in clients) {
$('#client').append('<option>'+clients[i]+'</option>');
// $('#client').trigger("chosen:updated"); ------- This line is also removed
}
$(function() { // And added jquery ui select menu
$( "#client" ).selectmenu();
});
}
This did the job. I'm not sure why though...