jQuery .live only works sometimes

Question

I have a textbox and a DropDownList. The DropDownList is populated based on the input in the textbox. There are a few problems I'm having where the DropDownList isn't being populated correctly.

One is when I type something into the textbox I can tab to the DropDownList and have it filled correctly. But if I decide I want to change what is in the textbox and type something else into it and then try to tab to the DropDownList again it doesn't update.

Another problem is when I start typing into the textbox I have an autocomplete list that pops up and I can click an option to have it fill the textbox in for me, but when I do this the DropDownList is not being populated.

This is the javascript I have to get the DropDownList filled.

$('#textFrame').live('change', function (event) {
    $.ajax({
        type: 'POST',
        url: '@Url.Action("GetDirectors", "HostScan")',
        data: { frame: $(this).val() },
        success: function (data) {
            var markup = '';
            for (var x = 0; x < data.length; x++) {
                markup += '<option value="' + data[x].Value + '">' + data[x].Text + '</option>';
            }
            $('#DirectorList').html(markup).show();
        }
    });

});

What should I change to make this work?

Thanks in advance for your help!

Yo, `.live` is deprecated: http://api.jquery.com/live/ also read this if you keen an old post `:)` http://stackoverflow.com/questions/11115864/whats-wrong-with-the-jquery-live-method/11115926#11115926 hope it helps. try using `.on` event please — Tats_innit, Sep 04 '12 at 22:40
I've tried using .on, but I can't seem to get it working at all. Not even to the level that I have .live working. — user1543269, Sep 04 '12 at 22:53
I reckon you need to upgrade your Jquery to this: `` then.on` api will be recognised! `:)` — Tats_innit, Sep 04 '12 at 22:56
You're right that upgrading to that jQuery makes it so that .on is recognized, but that doesn't exactly help my problem. I'm still having the same issues just with .on instead of .live. Thanks though! — user1543269, Sep 04 '12 at 23:22

score 0 · Accepted Answer · edited Sep 04 '12 at 23:12

0

First thing is that .live is deprecated as of jQuery 1.7.0. Try using .on instead.

Secondly use the jQuery file hosted by google cdn.. It will help reduce your site's bandwidth.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

As for the code try clearing up the options before you append new values. This makes sure you are not adding new options to the previous options.

$(function(){

    $('#textFrame').on('change', function () {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetDirectors", "HostScan")',
            data: { frame: $(this).val() },
            success: function (data) {
                if(data != null){
                var markup = '';
                $('#DirectorList').find('option').remove();
                    for (var x = 0; x < data.length; x++) {
                        markup += '<option value="' + data[x].Value + '">' + data[x].Text + '</option>';
                    }
                $('#DirectorList').append(markup).show();
                }
            }
        });
    });
});

edited Sep 04 '12 at 23:12

daryl

14,307
21
67
92

answered Sep 04 '12 at 22:49

Sushanth --

55,259
9
66
105

With your solution the DropDownList was not being populated at all. And I have read that .live is bad to use, but I tried it instead of the .on with your solution and it solved my first problem. So thank you for that. But I'm still unable to get the proper output in the DropDownList if I click on an option to autocomplete the textbox. Do you have any idea of why that could be happening? I didn't switch to the jQuery script that you suggested though so that might be the problem. I can try that. – user1543269 Sep 04 '12 at 23:12
Ok, so updated to the jQuery you suggested and the .on works now, but I'm still having the same problem with not being able to choose a value from the autocomplete list for the textbox and have the DropDownList populated. – user1543269 Sep 04 '12 at 23:20
Even I had the same problem when I was using the jQuery AutoComplete. When you select an option from the autocomplete , for some some reason it does not consider as a change event.. So i had to also write up the code for the blur event .. There is one more problem with this approach. This event will fire twice, once when you select an option from autocomplete , and again when the dropdown loses focus.. So you need to choose your event carefully to get the things done. – Sushanth -- Sep 05 '12 at 17:56

jQuery .live only works sometimes

1 Answers1