My head hurts ~ DataTables with Cross Domain Ajax Request
My head hurts ~ DataTables with Cross Domain Ajax Request
jaygrayson
Posts: 17Questions: 3Answers: 0
I understand that json through AJAX over cross domain doesn't work without altering the code but, I am apparently missing something...
I am attempting to create an article on a server that we DO NOT have PHP access to. We are allowed "unsafe scripting" access inside of the documents and we can alter the head section and certain items within the pages themselves. We have no access to the backend through ftp or anything so, I cannot create files to add to this server.
What I am doing is adding the jquery and table to the document and attempting to get the information for the table through AJAX from a php file that builds the return data on our own server. The odd thing is that I can see the json data that is returned but, DataTables is not doing anything with it. I am assuming this is the downfall (well, security) of Javascript/JQuery not allowing it to use the data. ::Frustrating::
I need to know what I need to do to make this work? I am testing outside of their environment just so I can eliminate any weird behavior that may happen due to lack of access. I am testing from one domain to another that I have complete control over.
Here is the code of what I am using now:
File with DataTable in it (index.php):
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<script type="text/javascript">
$(document).ready(function() {
$('#versionTable').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "https://externaldomain.com/currentVersions.php",
"crossDomain": true,
"dataType": "jsonp"
}
});
});
</script>
</head>
<body>
<table id="versionTable" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>Product</th>
<th>Operating System</th>
<th>Version</th>
<th>Release Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Product</th>
<th>Operating System</th>
<th>Version</th>
<th>Release Date</th>
</tr>
</tfoot>
</table>
</body>
</html>
I removed all of the database access code from the next file for simplicity.
PHP file (getVersion.php) on remote server that I want to get data from:
```
<?php
$current = "{\"data\": [ ";
$current .= "[\"Server\",\"Sun\",\"7.5.13.11\",\"2017-02-26\"]";
$current .= " ]}";
echo $current;
<?php > ``` ?>If I access the getVersion.php file directly, it gives me valid json data. If I do it from within the domain, the DataTable displays properly. Using Chrome, I can see through the "Network" tab that I am receiving proper data from the external domain request so, I know that is working.
I already read the documentation for external domain ajax request and it really didn't make sense to me. Everything I tried from that page only confused me more.
Thanks for your help!
Jay
This question has an accepted answers - jump to answer
Answers
Hi Jay,
Does the server return JSONP (i.e. JSON wrapped by the callback function that jQuery specifies)? If not, then it can't work without using a proxy. If you don't have access to change the remote server, a proxy is your only way to do this.
Allan
Ok, now I just feel plain stupid. I forgot to add the callback to the end of the getVersion.php file. For sake of saving someone else from the same stupidity...
getVersion.php file:
<?php
$current = "{\"data\": [ ";
$current .= "[\"Server\",\"Sun\",\"7.5.13.11\",\"2017-02-26\"]";
$current .= " ]}";
echo $_GET['callback'] . '(' . $current . ');';
<?php > ``` ?>Thanks for the help!!