Struggling to troubleshoot issues with jsFiddle code compatibility on both Firefox and Chrome browsers

I created a table in jsFiddle that looks fantastic, but when I try to transfer the code into a local .html file, all I get is a blank page. I've been searching for a solution for quite some time now and keep coming across mentions of the page loading after the JavaScript executes, along with references to $(document).ready. However, as someone who is new to JavaScript, I must admit that I am feeling a bit lost.

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

Below is the snippet of HTML code where I am trying to integrate the table:

<!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 would greatly appreciate any solutions or advice you might have to offer. Thank you.

Answer №1

It seems that the issue lies in using the /echo/json/ service on jsfiddle to simulate the ajax request, which may not function properly when transferring the code to your local system.

To resolve this problem:

You should create a local file named data.json containing 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"
    }               
              ]
}

Then, update the ajax code as follows:

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

View Demo: Plunker

Answer №2

If you want to move an example from jsFiddle, the best method is to copy the source code from the result frame (as explained in )

There is a small issue with your fiddle:

You have started the JS code with $(document).ready(function () { and have the onLoad drop down selected. This leads to:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`Uniform background color across all pages`

My goal is to allow customers to select a color that will persist across different pages on the website. The code below shows how users can choose a color on the first page: <select id="color" style="width: 5%; height: 10%" size="5"> ...

Exploring a GitHub image repository with HTML loops

I need assistance with incorporating a gallery into my GitHub pages website. Within my username.github.io directory, I have an assets/images folder containing various images that I want to display by looping through them. After searching for a solution, I ...

Containers for Comparing Images are Unable to Flexibly Wrap

Check out my codepen project here: https://codepen.io/Bryandbronstein/pen/NLVQjB I've encountered a peculiar issue while experimenting with CSS and Javascript. I came across an image comparison slider on the W3C website that worked flawlessly as a si ...

Shift in the mouse's placement

While experimenting with drawing a box using raycast to track mouse position in the scene, I encountered an issue. Upon clicking, dragging, and releasing the mouse to create the box, I noticed that its position was shifting due to the canvas container&apos ...

Meteor is constantly tuning in to receive updates from the MongoDB database

As I work on developing a game with Meteor, I have been advised by many to use mongo db due to its vanilla nature, speed, and reactivity. I have come to understand that I need to actively monitor updates in mongo db in order to react to received data and u ...

Exploring the process of integrating and registering local components within the App.vue file

Currently, I am working with Laravel 10, Vite, and Vue I would like to incorporate two components into my App.vue file Below is the content of my App.vue file : <template> <div> <AppHeader></AppHeader> ...

Utilize querySelectorAll to inspect class properties

When exporting a table to CSV, I have implemented the following logic: var cols = rows[i].querySelectorAll("td, th"); While this method works well, users are able to hide/display columns as they desire. Since AngularJS is used, the hidden columns are mar ...

Numerous issues encountered in a sample ReactJS project

I am encountering the following errors: bundle.js:1079 Warning: render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reco ...

Encountering Problem Importing HTML Table Data into R

I am looking to import the data table located at the bottom of a specific webpage into R, either as a dataframe or table. The webpage in question is . Initially, I attempted to utilize the readHTMLTable function from the XML package: library(XML) url <- ...

Cause an element to extend beyond others when the viewport reaches its limit

My design dilemma involves two squares: a blue one that will expand to contain things totaling 800px, and a red one that must always remain fully visible. When narrowing the viewport, the red square should overlap the blue square, rather than disappearing ...

Can you transform text with accents into plain ASCII characters?

I am seeking a solution in Javascript to convert accented letters and various encodings into plain English ASCII characters. The goal is to achieve the following transformations: éclair ~becomes~ eclair bär ~becomes~ bar привет ~becomes~ privet ...

Image appearing to wiggle during a CSS div change

I am currently facing an issue with a DIV element that has CSS properties for hover effect. The code snippet is as follows: .card:hover { box-shadow: 5px 5px 20px #c4c4c4; margin-top: -5px; margin-left: -5px; } Within this div, there is an image st ...

What is the best way to trigger the opening of this modal after a certain amount

I'm currently working on a CSS and HTML modal and I'd like it to appear 3 seconds after the page loads using jQuery. I'm struggling to find the right event handler for this task. How can I achieve this effectively? Check out the modal desig ...

Is it possible to apply multiple objects to a single element using ng-style?

Within our controller, we are defining two ng-style objects. $scope.rightpadding = { paddingRight : '11px' } $scope.toppadding = { paddingTop : '7px' } Our goal is to combine both of these in an ng-style directive, like so ...

Issue with MIME handling while utilizing Vue-Router in combination with Express

Struggling to access a specific route in Express, I keep encountering an error in my browser. Additionally, when the Vue application is built, only the Home page and the 404 page seem to work properly, while the rest display a default empty HTML layout. F ...

Is it necessary to uncheck the row checkbox when inputs are left empty after blurred?

Two issues have cropped up here. When clicking on an input within a row, the corresponding checkbox should be checked. Currently, only the first text input is able to check the checkbox due to the use of .prev(). Is there a different approach that can be t ...

Obtain the content enclosed within parentheses using JavaScript

const str = "(c) (d)"; I need to separate the given string into an array The result should be [0] => 'c' [1] => 'd' ...

Submitting a Form with JQuery/AJAX and PHP

As I navigate through the world of form submissions in JQuery/AJAX and PHP, I find myself facing some challenges. While following online tutorials to learn, there are a few roadblocks that have cropped up. My goal is to create a form that can process subm ...

What is the best way to increase scrollTop in relation to the desired scroll distance of a different element?

fiddle: http://jsfiddle.net/DerNalia/88N4d/9/ My Objective: I want the Sidebar(s) to remain fixed on the page when there is enough space for them. If there isn't enough room, the Sidebar(s) should scroll along with the content. Once the bottom ...

Ways to move Bootstrap 4 navbar list items to the right side?

Is there a way to move the li elements to the right without causing issues with the toggler or navbar? <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-expand- ...