Populate two different combo boxes using AJAX at a time

Question

I have 3 combo box: Department, Courses, Activities. The Department combo box which will load all departments from the department table. I need to load the courses in one combo box and activities in another combo box which belong to a department. The table schema is shown below.

    Department Table
    ----------------
    | Dept | Name  |
    ----------------
    | 1    | Dept1 |
    | 2    | Dept2 |
    ----------------

    Department Course Table
    ----------------------
    | Cid |Dept | Course |
    ----------------------
    | 1   | 1   | abc    |
    | 2   | 1   | xyz    |
    | 3   | 1   | pqr    |
    | 4   | 2   | bar    |
    | 5   | 2   | foo    |
    ----------------------

    Department Activities Table
    ---------------------------
    | Aid | Dept | Activities |
    ---------------------------
    | 1   | 1    | foo1       |
    | 2   | 1    | foo2       |
    | 3   | 1    | foo3       |
    | 4   | 2    | bar1       |
    | 5   | 2    | bar2       |
    ---------------------------

Department combo box will load Dept 1 and Dept 2. When Dept1 is select the Courses which belong to Dept1 should load in Courses combo box i.e (abc,xyx,pqr) and Activities which which belong to Dept1 should load in Activities combo box i.e (foo1,foo2,foo3).

How to call two functions at the same time in AJAX or jQuery?

krishwader · Accepted Answer · 2013-07-25 09:50:39Z

2

You can do something like this :

$('#department_combo').change(function(){
    $.ajax({
        url: "/someUrl/courses",
        success: function(data) {
            // Populate courses with data
        }
    });
    $.ajax({
        url: "/someUrl/activities",
        success: function(data) {
            // Populate activities with data
        }
    });
});

edited Jul 25, 2013 at 9:50

krishwader

11.4k1 gold badge36 silver badges52 bronze badges

answered Jul 25, 2013 at 9:48

nstCactus

5,2212 gold badges35 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nstCactus Over a year ago

@hungerpain Thanks for your corrections, it typed this snippet too fast. My bad!

garyrgilbert · Accepted Answer · 2013-07-25 10:12:32Z

Since the activities and courses are department specific I would do one ajax request that returns the courses and activites for a specific department in an JSON object that may look something like this when the uses selected dept 1:

{
courses : [
    {cid:1,course:'abc'},
    {cid:2,course:'xyz'},
    {cid:3,course:'prq'}],
activities : [
    {aid:1,activity:'foo1'},
    {aid:2,activity:'foo2'},
    {aid:3,activity:'foo3'}]
}

and this when the user selected dep2:

{
courses : [
    {cid:4,course:'bar'},
    {cid:5,course:'foo'}],
activities : [
    {aid:4,activity:'bar1'},
    {aid:5,activity:'bar2'}]
}

so on the change event of your department dropdown your event handler would make your ajax request and fill the activity and course dropdown with the results returned from the server.

$('#department').change(function(){
    $.ajax(
       url: 'urlToYourServersideCode',
       success: function(coursesAndActvities){
           var courses = coursesAndActivies.courses,
               activites = coursesAndActivies.activities,
               sCourses='',
               sActivies = '';
           for(var idx = 0;idx < activities.length;++idx){          
               sActivities+= '<option value="'+ activities[idx].aid +'">' + activities[idx].activity +'</option>';

           }
           for(var idx = 0;idx < courses.length;++idx){         
               sCourses+= '<option value="'+ courses[idx].aid +'">' + courses[idx].course+'</option>';

           }
           $('#activities).empty().append(sActivities);
           $('#courses).empty().append(sCourses);
       }
 );
});

Collectives™ on Stack Overflow

Populate two different combo boxes using AJAX at a time

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related