jQuery Loading json Data

Question

I have been trying to load some data from a json table using jQuery.

For some reason it's not working but I believe I had covered every aspect? I am hoping it is a syntax error that maybe has slipped through and not a total cock up from my part.

This is where I am at:

HTML:

<table id="fixtures">
  <thead>
    <tr>
      <th>Home</th>
      <th>Away</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

javascript:

var jsonDataUrl = 'http://bushell.net/football/site/includes/functions.php';

$(function() {
  $.ajax({
    type: 'GET',
    url: jsonDataUrl,
    async: false,
    jsonpCallback: 'JSON_CALLBACK',
    contentType: "application/json",
    dataType: 'json',
    success: function(data) {
      addRows($('#fixtures'), data, ['data.homeTeamName','data.awayTeamName']);
    },
    error: function(e) {
      console.log(e.message);
    }
  });
});

function addRows(table, data, fields) {
  var tbody = table.find('tbody');
  $.each(data, function(i, item) {
    tbody.append(addRow(item, fields));
  });
  return tbody;
}

function addRow(item, fields) {
  var row = $('<tr>');
  $.each(fields, function(i, field) {
    row.append($('<td>').html(item[field]));
  });
  return row;
}

Console Error:

(program):1 Uncaught SecurityError: Blocked a frame with origin "http://fiddle.jshell.net" from accessing a frame with origin "http://jsfiddle.net". Protocols, domains, and ports must match.(anonymous function) @ chrome-extension://geelfhphabnejjhdalkjhgipohgpdnoc/controllers/frame.js:1 jquery.min.js:4 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. jquery.min.js:4 XMLHttpRequest cannot load http://bushell.net/football/site/includes/functions.php. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.send @ jquery.min.js:4 (index):77 undefined (program):1 Uncaught SecurityError: Blocked a frame with origin "http://headwayapp.co" from accessing a frame with origin "http://jsfiddle.net". Protocols, domains, and ports must match.(anonymous function) @ chrome-extension://geelfhphabnejjhdalkjhgipohgpdnoc/controllers/frame.js:1 http://rum-collector.pingdom.net/img/beacon.gif?path=http%3A%2F%2Fjsfiddle.…&resE=1110&dL=1115&dI=3903&dCLES=3912&dCLEE=4361&dC=6421&lES=6421&lEE=6436 Failed to load resource: the server responded with a status of 522 (Origin Connection Time-out)

http://jsfiddle.net/XtzjZ/671/

stackoverflow.com/questions/3506208/jquery-ajax-cross-domain — Manish Jangir
– Manish Jangir, Commented Jul 29, 2016 at 13:14
Thanks for quick response, I have updated data type to jsonp and still same — BCLtd
– BCLtd, Commented Jul 29, 2016 at 13:16

ma_dev_15 · Accepted Answer · 2016-07-29 13:26:34Z

Check I have updated the fucntions, as your ajax not working so I have added the dummy data above.

http://jsfiddle.net/c2j1bc2h/

$(function() {
data = [{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},]
addRows1($('#fixtures'), data, ['homeTeamName','awayTeamName']);

function addRows1(table, data, fields) {
    var tbody = table.find('tbody');

  $.each(data, function(i, item) {
    console.log(item);
    tbody.append(addRow1(item, fields));
  });
}

function addRow1(item, fields) {
  var row = '<tr>';
  $.each(fields, function(i, field) {

    row +='<td>'+item[field]+'</td>';
  });
  row += '</tr>';
  return row;
}
});

Community · Accepted Answer · 2017-05-23 11:58:59Z

1

You must have to set a header

header("Access-Control-Allow-Origin: *");

In your functions.php that's where you are requesting with Ajax.

See this for more information:

"No 'Access-Control-Allow-Origin' header is present on the requested resource"

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Jul 29, 2016 at 13:17

Manish Jangir

5,4576 gold badges49 silver badges79 bronze badges

2 Comments

BCLtd Over a year ago

Hi,I have the following in the header header('Content-Type: application/json'); header("Access-Control-Allow-Origin: *");

Manish Jangir Over a year ago

Try to add one more header header('Access-Control-Allow-Methods: POST, GET, OPTIONS'); in your file

Collectives™ on Stack Overflow

jQuery Loading json Data

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related