CODEWITHSUNDEEP
javascripthtmlcssjsfiddle
thirdCharm
thirdCharm

Reputation: 1

Having problems getting jsFiddle code to work on FF and Chrome

I made a table in jsFiddle that looks great , but when I copy and paste the code into a local .html file I get a blank page when I run it. I have been looking for a solution for a while now, and I keep seeing something about the page loading after the JS is executed and something about $(document).ready too. I am new to JS, so I am a little bit lost.

Here is my jsFiddle: http://jsfiddle.net/DBF5q/29/

And here is the HTML page in which I am adding the code to:

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

I appreciate any solution or advice you guys could give me. Thank you.

Upvotes: 0

Views: 254

Answers (2)

zalun
zalun

Reputation: 4891

The best way to move an example out of jsFiddle is to copy the result frame source code (as described in http://doc.jsfiddle.net/faq.html)

There is also one issue with your fiddle:

You've started the JS code with $(document).ready(function () { and have kept the onLoad drop down. this results in:

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

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388356

The problem could be, in your jsfiddle you are using /echo/json/ service to simulate the ajax request, it will not work when you copy the code to your local system.

To solve this

You need to create a local file like data.json with the ajax data

{
    "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"
    }               
              ]
}

And change the ajax code like

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

Demo: Plunker

Upvotes: 2

Related Questions