1

I am firing an ajax call to the database when users click on the combobox which is in a div. I am trying to use the divs click event to populate my combobox dynamically. I am running into a problem on IE8 (ff works fine) when clicking the data is fetched from the database but the combobox losses focus and i have to click the combobox again to make a selection. I am trying to find out why this is happening. Thanks for the help. Here is the div which is in a td segment of a table.

<div class="catagory"><select class="catagorycombo"><option value="3456">Select  All</option></select></div>


<script type="text/javascript">

$('body').on('click', '.catagory', function(e){


var comboboxTest= $(this).parent().next("td").find('.testcombo'); 
var combobox =   $(this).find('.catagorycombo');  



var url = '<%= Url.Action("GetCatagoryListDropDown", "Document") %>';
var contextKey=combobox[0].options[0].value;
var text=combobox[0].options[0].text;
var length=combobox.prop('options').length;

if(text=="Select All" && length<=1)
{
           combobox.empty();

           combobox.append("<option value=\"" + contextKey + "\">Select All</option>");
           combobox.append("<option value=\"loading\">Loading...</option>");

      $.ajax({
        type: "POST",
        url: url,
        data: { contextKey:contextKey },
        success: function(data, textStatus, jqXHR) {
                    $.each(data, function(i, el) {
                       // combobox.append(new Option(el["Text"],el["Value"]));
                         combobox.("<option value=\"" + el["Value"] + "\">" +   el["Text"] + "</option>");

                    });

                  combobox.find('option[value=loading]').remove();

                }
    });

    }
    else
    {
           return false;
    }
});

Dimitri Dewaele
  • 10,311
  • 21
  • 80
  • 127
Yofi
  • 65
  • 3

1 Answers1

1

I am not sure whether it is possible to keep the dropdown openned while you're changing its data provider.

Potentially, you could open the dropdown after you load the data, but as per discussion here - Can I open a dropdownlist using jQuery - it is probably not easily achievable. However, have a look whether any of the workarounds there would suit your needs.

Community
  • 1
  • 1
mara-mfa
  • 895
  • 6
  • 9
  • Most probably yes. Have you actually seen this? http://stackoverflow.com/questions/113218/add-options-to-select-box-without-internet-explorer-closing-the-box – mara-mfa Jul 23 '13 at 14:52
  • I have used the first link you provided as a starting point and have managed to solve my problem. Still when the combobox is clicked it turns into a listbox (because i am modifying the size) and back to combobox on blur which might look odd for the user. I will have to settle with that until i am called on it. Thanks! – Yofi Jul 23 '13 at 17:39