2 Ajaxが別のJqueryタブに出力を呼び出す

Question

私は同様のクエリについて質問しましたが、これは完全に関連していないので新しい質問を開始する必要があると感じています。 私は2つの別々のファイル（spanish.php & italian.php）からJsonを出力しようとしています。 1つのタブにデータを入力するときにうまく動作するコードがありますが、両方のタブにデータを入力しようとすると動作しないようです。 誰かが私が間違っていると知っていますか？

// 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>")); 
}