ddSlick with dynamic created option fields in select

here's my problem:

I'm using ddSlick plugin to achieve language drop-down with flags. The problem is that I'm creating this drop down dynamically from xml file. Everything goes fine, select is created properly but ddSlick plugin doesn't see those options fields. I'm 100% sure that they're have all necessary data values.

Also, it seems that ddSlick is running before my script (even if it is chained AFTER my script) because when I put my options in static way (not by parsing xml but just putting it directly into HTML document) everything goes fine. Here's my code:

HTML before running my xml2html js function:

<form>
  <select id='countries' name='countries'>
  </select>
</form>

HTML after xml parsing:

<form>
  <select id='countries' name='countries'>
    <option data-imagesrc="css/images/flags/Select...jpg" data-description="Select.." value="0">Select..</option>
    <option data-imagesrc="css/images/flags/United States.jpg" data-description="United States" value="1">United States</option>
    <option data-imagesrc="css/images/flags/United Kingdom.jpg" data-description="United Kingdom" value="2">United Kingdom</option>
    <option data-imagesrc="css/images/flags/France.jpg" data-description="France" value="3">France</option>
  </select>
</form>

HTML after ddSlick run:

<form>
  <div id="countries" class="dd-container" style="width: 260px;">
    <div class="dd-select" style="width: 260px; background-color: rgb(238, 238, 238); background-position: initial initial; background-repeat: initial initial;">
      <input class="dd-selected-value" type="hidden">
      <a class="dd-selected"></a><span class="dd-pointer dd-pointer-down"></span>
    </div>
    <ul class="dd-options" style="width: 260px;"></ul>
    <option data-imagesrc="css/images/flags/Select...jpg" data-description="Select.." value="0">Select..</option>
    <option data-imagesrc="css/images/flags/United States.jpg" data-description="United States" value="1">United States</option>
    <option data-imagesrc="css/images/flags/United Kingdom.jpg" data-description="United Kingdom" value="2">United Kingdom</option>
    <option data-imagesrc="css/images/flags/France.jpg" data-description="France" value="3">France</option>
    <option data-imagesrc="css/images/flags/Germany.jpg" data-description="Germany" value="4">Germany</option>
    <option data-imagesrc="css/images/flags/Netherlands.jpg" data-description="Netherlands" value="5">Netherlands</option>
  </div>
</form>

Also, I notice an error in browser console: Uncaught TypeError: Cannot read property 'imageSrc' of undefined in line 246 (uncompressed version of ddSlick plugin).

I was trying to run those functions (my xml parsing and ddSlick) as a chain, in one or in two separate <script></script> blocks but without success. I hope I described everything properly. Please help!

Solution

I can reproduce your code with getting Uncaught TypeError you described. It happens when you apply plugin on empty select (check console in fiddle). Your problem is that AJAX call is asynchronous and .ddslick plugin is called earlier that XML is getting loaded. So to fix your code you'll need to change:

xml2html();
$('select').ddslick();

To something like this:

function xml2html() {
    $.ajax({
        url: 'test.xml',
        dataType: 'xml',
        success: function() {
            // ... process xml - create <option>
            $('select').ddslick();
        }
    });
}