Search code examples
jquerydatalistpolyfillsshimwebshim

jQuery Webshim Lib does not display datalist content updated using javascript

I use JQuery 1.9.1, Modernizr 2.6.2 (Custom Build with yepnope) and the Webshim Library. I tested on Safari 6.0.4 and Firefox 20.0 on Mac OSX 10.7.5

I have an HTML5 page where I have a datalist defined as follow:

  <input id="reference_category_name" list="category_list" class="search-start" autocomplete="on" required />
  <datalist id="category_list">
    <select>
      <option></option>
    </select>
  </datalist>

that I update dynamically using javascript code ...

It works the first time I do the update (in my intialisation code) but subsequent updates of this datalist content although visible in the inspector are not reflected in the displayed dropdown ...

It worked on FF before I used the polyfill but Safari does not support datalists.

Did I miss something? Or is it possible to force the refresh of the dropdown?

Solution

  • Yes there is a method for this (updatePolyfill, htmlPolyfill etc.). It is documented in dynamic shiving and here.

    You can also find a simple example with a dynamic datalist (The data server is a little bit slow on first request, though).

    $('datalist > select').htmlPolyfill('<option value="yeah" />');

    See also this demo for some config options: http://jsfiddle.net/trixta/7DETa/