Loading SELECT box with AJAX, not working

[rgb...@gmail.com]

Hello all,

Loving SELECT2. However, I have an issue: Even though I have it working on a few pages, there is one page where I am running into problems:

I have several drop downs that I'm loading with AJAX. Here is the code:
var brandid = $("#vehicleBrand").val();
$.get("ajax/vehicle/vehicle_getmodels.aspx?bid=" + brandid, function (data) {
$("#divVehicleModel").html(data);
$("#vehicleModel").select2();
});

Now, the select is rendered properly, I does get the Select2 skinning, but the filter input box is not working? I cant even click it? So basically, the looks is there but not the functionality?

Anyone?

Regards,

Bob

[Igor Vaynberg]

check for javascript errors in the console

-igor

> --
> You received this message because you are subscribed to the Google Groups "select2" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to select2+u...@googlegroups.com.
> To post to this group, send email to sel...@googlegroups.com.
> Visit this group at http://groups.google.com/group/select2.
> For more options, visit https://groups.google.com/d/optout.

[rgb...@gmail.com]

Not getting any errors?

[Igor Vaynberg]

what does the select tag look like in markup once its inserted?

-igor


On Wed, Jul 16, 2014 at 10:33 AM, <rgb...@gmail.com> wrote:
> Not getting any errors?

[rgb...@gmail.com]

<div style="width:300px;" id="s2id_vehicleModel" class="select2-container"><a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabindex="-1"> <span class="select2-chosen">500</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow"><b></b></span></a><input id="s2id_autogen5" class="select2-focusser select2-offscreen" type="text"><div class="select2-drop select2-display-none select2-with-searchbox"> <div class="select2-search"> <input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" type="text"> </div> <ul class="select2-results"> </ul></div></div><select class="select2-offscreen" tabindex="-1" id="vehicleModel" style="width:300px;"><option value="1">500</option><option value="2">595</option><option value="3">695</option></select>

[Igor Vaynberg]

looks good, i dont see any problems. you will have to set some
breakpoints in select2 and walk them to see why the query is not
filtering the results. i did notice that options only contain numeric
values, so whenyou enter "5" into search you should get all 3 optiosn
showing up.

-igor

On Wed, Jul 16, 2014 at 10:45 AM, <rgb...@gmail.com> wrote:
> <div style="width:300px;" id="s2id_vehicleModel" class="select2-container"><a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabindex="-1"> <span class="select2-chosen">500</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow"><b></b></span></a><input id="s2id_autogen5" class="select2-focusser select2-offscreen" type="text"><div class="select2-drop select2-display-none select2-with-searchbox"> <div class="select2-search"> <input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" type="text"> </div> <ul class="select2-results"> </ul></div></div><select class="select2-offscreen" tabindex="-1" id="vehicleModel" style="width:300px;"><option value="1">500</option><option value="2">595</option><option value="3">695</option></select>
>

[Robert Benedetto]

Hello Igor,

My apologies, I think I have not described the problem properly. The problem is that I cant select the filter textbox? When I click it, nothing happens? No cursor is visible inside it, and if i try to type nothing appears in the textbox. It is like it just ignores my attempts to select it?

Other than that, I can scroll through the items, and select them in the list as normal. It is just the filter textbox that cant be selected?

Thanks for your help so far!

> You received this message because you are subscribed to a topic in the Google Groups "select2" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/topic/select2/p9ynwpLHfKk/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to select2+u...@googlegroups.com.

[Robert Benedetto]

Hello again Igor.

I did some more testing. If I view the page with Inspect Element in Firefox, this is what happens:

I load the <SELECT> box using Ajax, no problem. I apply .select2(), no problem. But I cant click the Textbox in order to filter the results, right?

BUT, if I Inspect Element and JUST CLICK ON THIS LINE OF CODE, then it works!

<a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabindex="-1"> <span class="select2-chosen">Main Parking</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow"><b></b></span></a>

If I reload the Dropdown, I must inspect it again and lick on that line of code again, and then I can select the filter textbox!

This is VERY strange! Do you have ANY idea why??

Regards,

Robert

On Jul 17, 2014, at 2:28 AM, Igor Vaynberg <igor.v...@gmail.com> wrote:

> You received this message because you are subscribed to a topic in the Google Groups "select2" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/topic/select2/p9ynwpLHfKk/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to select2+u...@googlegroups.com.

[Igor Vaynberg]

that is strange indeed. ive loaded the select using ajax plenty of
times and used select2 with it without any problems. its hard to say
whats going on.

-igor