在讓jsFiddle代碼在FF和Chrome上運行時遇到問題

Question

我在jsFiddle中創建了一個看起來很棒的表，但是當我將代碼復制並粘貼到本地.html文件中時，我運行它時會得到一個空白頁。 我一直在尋找一段時間的解決方案，並且在執行JS之后我一直看到有關頁面加載的內容以及關於$（document）.ready的內容。 我是JS的新手，所以我有點失落。

這是我的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>

我感謝你們給我的任何解決方案或建議。 謝謝。

Answer 1

問題可能是，在您的jsfiddle中，您使用/echo/json/ service來模擬ajax請求，當您將代碼復制到本地系統時，它將無法工作。

要解決這個問題

您需要使用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"
    }               
              ]
}

並改變ajax代碼

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

演示： Plunker

Answer 2

將示例移出jsFiddle的最佳方法是復制結果框架源代碼（如http://doc.jsfiddle.net/faq.html中所述）

你的小提琴還有一個問題：

你已經使用$(document).ready(function () {啟動了JS代碼，並保持onLoad下拉。這導致：

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

在讓jsFiddle代碼在FF和Chrome上運行時遇到問題

問題描述

2 個解決方案

解決方案1
2 2013-04-19 00:27:42

解決方案2
0 2013-04-22 09:43:34

在讓jsFiddle代碼在FF和Chrome上運行時遇到問題

問題描述

2 個解決方案

解決方案1 2 2013-04-19 00:27:42

解決方案2 0 2013-04-22 09:43:34

解決方案1
2 2013-04-19 00:27:42

解決方案2
0 2013-04-22 09:43:34