In Cascading dropdown fails but first works fine using jquery Ajax

Question

I have a dropdown that lists the data fetched from database using PHP and jQuery Ajax.

First dropdown List fetches data successfully and populates it in the dropdown.

HTML for first dropdownlist :

$(document).ready(function () {         
        $(function() {   
            $.ajax({
                type: 'POST',
                url: 'getGroupzBase.php', 
                datatype: 'json',
                success: function(data) {
                // Call this function on success                
                    console.log(data);
                   var yourArray = JSON.parse(data);
                   console.log(yourArray);                                           
                    $.each(yourArray, function (index, yourArray) {                 
                        $('#builder_group').append($('<option/>', { 
                            value: yourArray.id,
                            text : yourArray.name, 
                        }));
}); 
},
error: function() {
    displayDialogBox('Error', err.toString());
}
});              
});

And the dropdown tag -

<select id="builder_group"></select>

For the second dropdown menu does not work with the first dropdown. I have to use jQuery Ajax for the second dropdown as well.
HTML for second dropdownlist :

  <script>
    $("#builder_group").change(function(){
        console.log("Hello 1");
        $('#Ivrmapping_groupZCode').find('option').remove().end(); //clear the city ddl
        var builder = $(this).find("option:selected").text();
        alert(builder);
        //do the ajax call
        $.ajax({
            url:'getGroupzCode.php'
            type:'GET',
            data:{city:builder},
            dataType:'json',
            cache:false,
        success: function(data) {
                    // Call this function on success                
                        console.log(data);
                       var yourArray = JSON.parse(data);
                       console.log(yourArray);                                           
                        $.each(yourArray, function (index, yourArray) {                 
                        );
    }); 
    },
    error: function() {
        displayDialogBox('Error', err.toString());
    }
    }); 

        }); 

    });
</script>

And the dropdown tag -

<select name="Ivrmapping[groupZCode]" id="Ivrmapping_groupZCode">..
</select>

Why is the second dropdownlist not working with first. Can we have more than one jQuery Ajax calls in one page.

Yes definitely we can have them.. is your console.log(data) giving you fine results(as you expect).. — nsthethunderbolt
– nsthethunderbolt, Commented Jul 16, 2014 at 12:08
@nsthethunderbolt No I don't see any of those console.log in second jQuery ajax script — user3004356
– user3004356, Commented Jul 16, 2014 at 12:12
I think you are passing in value... shouldn't you be passing id value in city:builder — nsthethunderbolt
– nsthethunderbolt, Commented Jul 16, 2014 at 12:13
@nsthethunderbolt Still if I place alert before that atleast that should work right — user3004356
– user3004356, Commented Jul 16, 2014 at 12:14
Yes that should work, are you sure you are handling the value (of builder) at back end rather than the id.. might be a silly mistake. I don't see any other problem, Have you tried to look at the response of the ajax call in console of browser. — nsthethunderbolt
– nsthethunderbolt, Commented Jul 16, 2014 at 12:18

nsthethunderbolt · Accepted Answer · 2014-07-16 12:33:32Z

I think there is problem of brackets:: Try this:

$("#builder_group").change(function(){
        console.log("Hello 1");
        $('#Ivrmapping_groupZCode').find('option').remove().end(); //clear the city ddl
        var builder = $(this).find("option:selected").text();
        alert(builder);
        //do the ajax call
        $.ajax({
            url:'getGroupzCode.php'
            type:'GET',
            data:{city:builder},
            dataType:'json',
            cache:false,
        success: function(data) {
                    // Call this function on success                
                        console.log(data);
                       var yourArray = JSON.parse(data);
                       console.log(yourArray);                                           
                        $.each(yourArray, function (index, yourArray) {/* your plan*/});
    },
    error: function() {
        displayDialogBox('Error', err.toString());
    }
    }); 
    });

And you should use firebug, or chrome, these errors are clearly shown on the console. Try it out.

Collectives™ on Stack Overflow

In Cascading dropdown fails but first works fine using jquery Ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related