Search code examples
javascriptjqueryjsonuniformpyrocms

jquery empty() preventing select

A while ago I posted this question asking how to get JSON data into jQuery dropdowns jquery dropdown from mysql based on previous selection

Well the people here were awesome and I got a solution. The problem I'm having now is that the suggest solution dosen't work in my production enviorment but it does in my test.

In order to prevent duplicate entrees I am using jQuery empty() the problem is that using empty() seems to also be preventing me from selecting the first option.

this is the function that is generating the optiosn from JSON

function(data){

            var select = $('[name="employee_manager"]');
            select.empty();
            select.append(new Option(ucfirst('No Manager'),'100'));

            $.each(data, function(index, array) {

                    select.append(new Option(ucfirst(array['first_name'])+ " "+ucfirst(array['last_name']),array['id']));
            });

Is that an alternative to empty() that won't prevent selection?

EDIT This seems to only be a problem if there are fewer than two items being dynamically input
EDIT 2 Here is the HTML. It seems that I can't select the first option if empty() is present 

     <label for="manager">Reports To</label>
     <select name="employee_manager">
          <option value="1">Please Select Employee Role</option>
          <option value="2">John Doe</option>
          <option value="3">James Smith</option>
    </select>

EDIT 3

Looks like the empty class is adding a span to my select

<div class="selector">
<span style="-moz-user-select: none;">Jane  Smith</span>
    <select name="employee_manager" style="opacity: 0;">
         <option value="100">No Manager</option>
</select>
</div>

EDIT 4
Okay so here is a jsfiddle that shows the problem. I couldn't get the JSON data to load correctly but you can still see the problem if you attempt to click on the first item in the list. It seems that it's a problem with uniformjs as if uniform is removed it's not a problem http://jsfiddle.net/BandonRandon/xXUfp/1/

Solution

  • Don't use empty() to clear the options of drop down list. It's wrong, because it should be used to remove DOM children.

    Instead use such code:

    $("select[name='employee_manager'] > option").remove();

    Edit: when using the jQuery uniform plugin, dynamically adding options is messing things up... one way around that does not require to go and try fix the plugin is to always have enough "dummy" options in place (e.g. 20 if that's the max amount of options) then change the text/value of those options and hide all others according to your data.
    The proper JS code will now look like this:

    var myData = [];
myData.push( { text: "Please Select A Manager (JS)", value: "null" } );
myData.push( { text: "No Manager", value: "100" } );
myData.push( { text: ucfirst("a third choice"), value: "42" } );
$.each(data, function(index, array) {
   myData.push( { text: ucfirst(array['first_name'])+ " " + ucfirst(array['last_name']), value: array['id'] } );
});

$("select[name='employee_manager'] > option").each(function(index) {
   if (index < myData.length) {
      $(this).text(myData[index]["text"]);
      $(this).val(myData[index]["value"]);                          
      $(this).show();
   }
   else {
        $(this).hide();
   }
});

    Updated jsFiddle.

    Crude, but working.... :)