Заполните два разных комбинированных блока, используя AJAX за один раз

Question

У меня есть 3 поля со списком: Отдел, курсы, мероприятия. Коробка «Отдел», которая будет загружать все отделы из таблицы отделов. Мне нужно загрузить курсы в один поле со списком и действия в другом поле со списком, которые принадлежат отделу. Схема таблицы показана ниже.

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  | 
    --------------------------- 

Отдела выпадающие загрузит Dept 1 и 2. Dept Когда dept1 это выбрать курсы, которые принадлежат dept1 следует загрузить в поле со списком курсов, т.е. (азбука, хухи, PQR) и деятельность, которые принадлежат dept1 должен загружаться в поле со списком действий, то есть (foo1, foo2, foo3).

Как вызвать две функции одновременно в AJAX или jQuery?

Answer 1

Вы можете сделать что-то вроде этого:

$('#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 
     } 
    }); 
}); 

Answer 2

Поскольку деятельности и курсы отдела конкретного Я хотел бы сделать один запрос Ajax, который возвращает курсы и Активность для конкретного отдела в объекте JSON, который может выглядеть примерно как это, когда использование выбрано отделом 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'}] 
} 

и это, когда пользователь выбрал DEP2:

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

поэтому в событии изменения в раскрывающемся списке вашего отдела ваш обработчик событий выполнил бы ваш запрос ajax и заполнил раскрывающийся список действий и курсов с результатами, возвращаемыми с сервера.

$('#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); 
     } 
); 
});