Question

I have the code with jquery like this and it works but there is a problem with arrow key press.

 $(document).ready(function() {   
  $(function(){
     $("#tasks").hide();
        $("select#categories").livequery("change", function () {
                $("#tasks").show();
                $.getJSON("ajax.php?module=responsables&action=list_tasks",{id: $(this).val()}, function(j){

                        if($("#categories").val()=="-0") 
                        {                               
                                $("#tasks").hide();
                        }
                        //if the div is hidden
                        $("div#form_objectifs").hide();
                        var options = '';
                        for (var i = 0; i < j.length; i++)
                        {
                                options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                        }
                        $("#tasks").html(options);
                        $('#tasks option:first').attr('selected', 'selected');
                })
        }).livequery("keypress", function() { 
              $(this).trigger("change");    
            });

 });
</script>

I have try to with this : http://jsfiddle.net/tW6Su/2/ that give possibility to arrow key press filter.

So I tried:

<script type="text/javascript" charset="utf-8">
 $(document).ready(function() {   
    $(function(){
         $("#tasks").hide();
            $("select#categories").livequery("change", function () {
                    $("#tasks").show();
                    $.getJSON("ajax.php?module=responsibles&action=list_tasks",{id: $(this).val()}, function(j){

                            if($("#categories").val()=="-0") 
                            {                               
                                    $("#tasks").hide();
                            }
                            //if the div is hidden
                            $("div#form_objectifs").hide();
                            var options = '';
                            for (var i = 0; i < j.length; i++)
                            {
                                    options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                            }
                            $("#tasks").html(options);
                            $('#tasks option:first').attr('selected', 'selected');
                    })
            }).livequery("keypress", function() { 
           $(this).trigger("change");


 });
</script>

But I got a js error.

$("select#categories").livequery is not a function http://localhost/project/index.php?module=responsibles&action=objectivs Line 120

Anyone Could help me what am wrong ? thanks

Answer 1

It seems the jsFiddle isn’t including the script when running. When I include it in the HTML it works as expected.

http://jsfiddle.net/tW6Su/11/