讓jsFiddle代碼在FF和Chrome上工作時遇到問題

我在jsFiddle中創建了一張看起來不錯的表格，但是當我將代碼複製並粘貼到本地.html文件中時，我在運行它時收到一個空白頁。我一直在尋找一個解決方案，並且在JS執行之後我一直看到有關頁面加載的內容，以及有關$（document）.ready的一些內容。我對JS很陌生，所以我有點失落。讓jsFiddle代碼在FF和Chrome上工作時遇到問題

這裏是我的jsfiddle：http://jsfiddle.net/DBF5q/29/

這裏是在我加入的代碼的HTML頁面：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> 
     <title>Find User</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
     <style> 
     <!-- CSS CODE HERE --> 
     </style> 
     <script type="text/javascript"> 
     <!-- JS CODE HERE ---> 

     </script> 
    </head> 
    <body> 
     <div class="Web_OnlineTools_Table" > 
     <table id="contact"></table> 
     </div> 
    </body> 
</html>

我明白任何解決方案或建議，你們可以給我。謝謝。

來源

2013-04-19 thirdCharm

任何錯誤在控制檯 –

哪裏是你的AJAX源，在的jsfiddle您使用'/回聲/ JSON /'模擬Ajax請求。當你複製它時，你有另一個存儲json數據的文件 –

好的，我修復了它。謝謝！ – thirdCharm

問題可能是，在您的jsfiddle中，您使用/echo/json/服務來模擬ajax請求，但在您將代碼複製到本地系統時不起作用。

爲了解決這個

你需要創建一個本地文件一樣data.json與阿賈克斯數據

{ 
    "accounts": [{ 
     "customerID": "1", 
      "firstName": "Test", 
      "lastName": "Test", 
      "company": "Humber", 
      "address": "Canada", 
      "postalCode": "L7Y 3F1", 
      "phoneNumber": "(905)451-1313" 
    }, { 
     "customerID": "2", 
      "firstName": "Test", 
      "lastName": "Test", 
      "company": "Humber", 
      "address": "Canada", 
      "postalCode": "L7Y 3F2", 
      "phoneNumber": "(905)451-1312" 
    }    
       ] 
}

，並更改像

$(document).ready(function() { 
    $.ajax({ 
     url: "<url-of-the-data.json>", 
     datatype: "json" 
    }).done(function (data) { 
     console.log(data.accounts); 
     $('#contact').append('<tr><td>' + "CustomerID" + '</td><td>' + "First Name" + '</td><td>' + "Last Name" + '</td><td>' + "Company" + '</td><td>' + "Address" + '</td><td>' + "Postal Code" + '</td><td>' + "Phone Number" + '</td></tr>'); 
     $(data.accounts).each(function (index, element) { 
      console.log(element); 

      $('#contact').append('<tr><td>' + element.customerID + '</td><td>' + element.firstName + '</td><td>' + element.lastName + '</td><td>' + element.company + '</td><td>' + element.address + '</td><td>' + element.postalCode + '</td><td>' + element.phoneNumber + '</td></tr>'); 
     }); 
    }); 
});

演示Ajax代碼：Plunker

來源

2013-04-19 00:27:42

這工作，但我也需要添加此行。 dataType：「json」謝謝。 :) – thirdCharm

@ user2296887是的 –

將示例移出的最佳方式的的jsfiddle是複製的結果框架的源代碼（如http://doc.jsfiddle.net/faq.html描述）

也有一個問題，你的提琴：

你與$(document).ready(function() {開始JS代碼，並保持onLoad下拉。這導致：

$(window).load(function(){ 
    $(document).ready(function() {

來源

2013-04-22 09:43:34 zalun

讓jsFiddle代碼在FF和Chrome上工作時遇到問題

回答

相關問題