Multiple Ajax Calls

Question

I have a HUGE form concerning employee attributes with like 300 fields.

When the admin wants to edit employee attributes, they go to the edit page. This form is printed dynamically from the database.

The user selects an employee from a dropdown lets call it dropdown1. The form is then populated from a JSON array using a jquery ajax call bound to the change event of dropdown1. This way 299 fields are correctly populated.

However, the form contains 2 more dropdowns. Lets call them dropdown2 and dropdown3.

Dropdown2 is populated on page load from the database.

Dropdown3 is related to dropdown2. When dropdown2 changes, the listings of dropdown3 change using a DIFFERENT onchange ajax function. Initially, on page load dropdown3 has only one listing "select".

My problem is when dropdown1 changes, every field in the form is populated except dropdown 3.

What I want is, when the selection changes in dropdown2 using the jquery ajax call,

The dropdown3 should be populated according to the value in dropdown2 - Basically the html of the div containing dropdown2 should change (An ajax call inside another ajax call ?)
the correct value should be selected in dropdown2 (if 1 works I think I could handle this part)

I apologize if my question is very lengthy and I haven't been able to explain properly.

    $(document).ready(function(){
    $("#adminobj0zb").delegate("#sel10", "change", function(e){
        $.getJSON("editempajax2.php?empid=" + $("#sel10").val(),
        function(data){
            $.each(data, function(i, item){
                if(item.field == "fname"){
                    $("#sel2").val(item.value);
                    //Here Make Second Ajax call and change content of div containing sel3 ... how ?
                }
                if(item.field == "mname"){
                    $("#sel3").val(item.value);
                }
            });
        });
    });
});

Can you share your current code? And what do you mean by "The dropdown2 should be populated according to the value in dropdown2" ? — reggaemahn, Jul 30 '13 at 15:12
This doesn't make sense, why are you even telling us about dropdown 1 and 3. Unless this sentence is a typo "The dropdown2 should be populated according to the value in dropdown2" — aziz punjani, Jul 30 '13 at 15:13
Best solution might be to change your ajax request that returns the ~300 fields to also return the data and selected option for the third dropdown. — Jason P, Jul 30 '13 at 15:14
@azizpunjani - He had a typo. He want's dropdown3 to populate automatically based on dropdown2 data after the first ajax call. — webnoob, Jul 30 '13 at 15:14
When you change dropdown2 programatically, trigger the change event on it. simple, and effective. Though, it would be more efficient to instead return this data from the first ajax initially. — Kevin B, Jul 30 '13 at 15:15

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

This is possible. You can make a AJAX call as a callback from the first call.

$.ajax({
    url:"/echo/json/",
    data:xdata,
    type:"POST",
    success: function(data) {
        $.ajax({
            // config
            success: function(data2) {}; // do your stuff
        });
    }
});

If you need multiple AJAX calls simultanously, you cann work with the deferred-object: jQuery Deferred - getting result of chained ajax calls

edited May 23 '17 at 11:56

Community

1
1

answered Jul 30 '13 at 15:09

Zim84

3,404
2
35
40

Thank you Zim84! My knowledge is very limited as far as jquery and ajax are concerned. I will edit my question and show the code I am using. A few minutes please :) – user2115154 Jul 30 '13 at 15:15
he should use deferred objects anyway - they avoid deeply nested callback hell. – Alnitak Jul 30 '13 at 15:20

Multiple Ajax Calls

1 Answers1