2 Ajax가 별도의 Jquery 탭으로 출력을 호출합니다.

Question

비슷한 쿼리에 대해 물어 왔지만 완전히 관련이 없으므로 새로운 질문을 시작해야한다고 생각합니다. 두 개의 개별 파일 (spanish.php & italian.php)에서 Json을 출력하려고합니다. 하나의 탭만 채울 때 코드가 제대로 작동하지만 두 탭을 모두 채우려는 경우 작동하지 않는 것 같습니다. 내가 잘못 가고있는 곳을 아는 사람이 있습니까?

// TABS FUNCTIONS 

     $(function() { 
      $("#tabs").tabs(); 
     }); 

    // SPANISH MENU 

    $(document).ready(function(){ 
     $.ajax({ 
      url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php", 
      dataType: 'jsonp', 
      jsonp: 'callback', 
      jsonpCallback: 'jsonpCallback', 
      success: function (data) { 
       drawTable(data); 
      }    
     }); 
    }); 

    function drawTable(data) { 
    for (var i = 0; i < data.length; i++) { 
      drawRow(data[i]); 
     } 
    } 

    function drawRow(rowData) { 
     var row = $("<tr />") 
     $("#table2").append(row); 
     row.append($("<td>" + rowData.course + "</td>")); 
     row.append($("<td>" + rowData.name + "</td>")); 
     row.append($("<td>" + rowData.price + "</td>")); 
    } 


    // ITALIAN MENU 

    $(document).ready(function(){ 
     $.ajax({ 
      url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/italian.php", 
      dataType: 'jsonp', 
      jsonp: 'callback', 
      jsonpCallback: 'jsonpCallback', 
      success: function (dataI) { 
       drawTable(dataI); 
      }    
     }); 
    }); 

    function drawTable(dataI) { 
    for (var i = 0; i < dataI.length; i++) { 
      drawRow(dataI[i]); 
     } 
    } 

    function drawRow(rowData) { 
     var row = $("<tr />") 
     $("#table1").append(row); 
     row.append($("<td>" + rowData.course + "</td>")); 
     row.append($("<td>" + rowData.name + "</td>")); 
     row.append($("<td>" + rowData.price + "</td>")); 
    } 

그리고 탭/HTML :

<div id="tabs"> 
      <ul> 
       <li><a href="#tab-1">Italian</a></li> 
       <li><a href="#tab-2">Spanish</a></li> 
      </ul> 

      <div id="tab-1"> 
      <p>Italian</p> 
      <table id='table1'> 
        <tbody></tbody> 
       </table>  
      </div> 

      <div id="tab-2"> 
       <table id='table2' border="1"> 
        <tbody></tbody> 
       </table> 
      </div> 
     </div> 

Answer 1

이 : $ (function() {

이 같다 : 그래서 $ (document) .ready (function() {

당신이 모두를 넣어, 또는 이상을 넣을 필요가 없습니다 일단. 한 번만 사용하고 코드를 안에 넣으십시오.

코드를 사용하려고 시도 했으므로 jsonpCallback: 'jsonpCallback',을 제거한 다음 callback function이 없으므로 정상적으로 작동합니다. 결국에는 다음과 같이됩니다 :

$(document).ready(function(){ 

    // SPANISH MENU 
    $.ajax({ 
     url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php", 
     dataType: 'jsonp', 
     success: function (data) { 
      drawTable(data, 1); 
     }    
    }); 


    // ITALIAN MENU 
    $.ajax({ 
     url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/italian.php", 
     dataType: 'jsonp', 
     success: function (data) { 
      drawTable(data, 2); 
     }    
    }); 
}); 

function drawTable(data, table_number) { 
    for (var i = 0; i < data.length; i++) { 
     drawRow(data[i], table_number); 
    } 
} 

function drawRow(rowData, table_number) { 
    var row = $("<tr />") 
    $("#table" + table_number).append(row); 
    row.append($("<td>" + rowData.course + "</td>")); 
    row.append($("<td>" + rowData.name + "</td>")); 
    row.append($("<td>" + rowData.price + "</td>")); 
}