Dynamically populated select menu on html page to be displayed on android webview without using jquery mobile

Question

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.

EDIT:

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');

Answer 1

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...

Answer 2

Short answer: yes, it is absolutely possible. (Almost) everything jQuery does uses native HTML/CSS/JavaScript functionalities in the background. As a framework it just exists to make your coding quicker and easier.

Assumming you select has id "client", you can select it using var selectClient = document.getElementById("client");.

I don't know where you're getting your options from (manually entered, or loaded from through a PHP API call, or from a database, etc.), so I'm going to assume you have access to the options you want to add.

Adding options to the client can be done by using

selectClient.innerHTML += "<option>My option here</option>";

The "innerHTML" property basically holds everything between <select> and </select>.

If you want to remove existing options before adding new ones, just set innerHTML to an empty "" string first. If you want to edit a specific option tag you need to use any of the native or jQuery methods for finding a tag (or an ID if you add ID's to the options) to select the option.

Hope this helps.

P.S. This solution is pure JavaScript, but you can of course use any equivalent jQuery functions if the platform supports it. The jQuery equivalent of the innerHTML property is html(), as in $("#client").html("<option>Foo Bar</option>");

EDIT 04-08-2014: as it turns out the OP wasn't using the plugin whose events he was calling (Chosen for jQuery), but the steps described above are still correct and still apply (if not using Chosen).