I've been trying to get the DataTables plugin to work on my webserver, but it fails. On localhost, it works perfectly, but on the server, it shows all of the records without pagination and says "showing 0/0 of 0 entries", and when I attempt to use the search function, I get "No data is available in table". It seems like DataTables is not recognizing the data somehow.
I opened the console to check for errors, but I get none.
I'm using CPanel to handle everything.
Here is the relevant code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- Datatables CDN -->
<link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap.min.css">
<script src = "https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
<script src = "https://cdn.datatables.net/1.11.0/js/dataTables.bootstrap.min.js"></script>
</head>
For the table data, I put data in myself for testing. Here is a sample:
<script>
let accountCreationData = [
{ AccountCreationEmail: 'Doomguy#doomguy.com', AccountCreationSendDate: '9/8/2021'},
{ AccountCreationEmail: 'Doomguy#doomguy.com', AccountCreationSendDate: '8/8/2021'},
{ AccountCreationEmail: 'Doomguy#doomguy.com', AccountCreationSendDate: '8/8/2021'},
............
And then I built the table like so:
dataHtml1 += `<tr class="notFirst"><td class = "AccountCreationClass"><div>${account.AccountCreationEmail}</div></td><td class = "AccountCreationClass"><div>${account.AccountCreationSendDate}</div></td><td><div class = "redCell"><b> Yes</b></div></td></tr>`;
And the script for the DataTables:
<script>
$(document).ready(function() {
$('#AccountCreationInvitationTable').DataTable({
'ordering': false,
'lengthChange': false,
});
$('#ActiveAccountTableTableID').DataTable({
'ordering': false,
'lengthChange': false,
});
});
</script>
Here is what it looks like on localhost:
Here is what it looks like on the webserver:
I think the problem lies somewhere in the configuration of the webserver that I'm using, which is beyond my talents. Here is a link to a page where I found a solution that may work, if anyone else is facing this issue later.
Keep in mind that I did not solve the problem. This link is only a lead that I found to a possible solution.
I have decided to pursue other methods of pagination.
https://github.com/yajra/laravel-datatables/issues/2016
Related
So basically im trying to inject information that comes from my database (im using postgresSQL and node.js) into the webpage and i have confirmed that im getting the information i want right before trying to innerHTML however as soon as it goes to that codeline somehow it can't detect the value and inject undefined (i think) and im not sure why it's doing that.
here is the javascript for the html page im having problems :
window.onload = async function() {
try {
let courseId = sessionStorage.getItem("courseId");
let course = await $.ajax({
url: `/api/courses/${courseId}/classes`,
method: "get",
dataType: "json"
});
document.getElementById("course").innerHTML = course.cour_name;
} catch (err) {
console.log(err);
}
}
I find it really weird since i have done it similarly with another page and it works fine.
here is the html for the page:
<html>
<head>
<title>Express</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<link rel="stylesheet" href="/stylesheets/courses.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js%22%3E</script>
<script src = "./javascript/courseInfo.js"></script>
</head>
<body>
<header id = "header">
</header>
<nav>
<p>Back</p>
</nav>
<section>
<main id="course">
</main>
</section>
</body>
</html>
I don't know why fills that field with undefined since when i stringify what the ajax return it shows that it has exactly what i need, one of those fields being the cour_name row.
I'd really appreciate if someone could help me with this problem and thank you for your time.
if using chrome browser , try devtool debugger.
open the DevTool (e.g. press F12) then click on sources tab and locate your javascript file and put a breakpoint on the line this not working as expected. then reload the page and check the value of variables and executes the rest of the code line by line.
see this tutorial on how to use debugger https://developer.chrome.com/docs/devtools/javascript/
I've come with hopes that I can achieve a functional answer to my series of baffle. I have tried linking my indexjs.js to my index.html using <script type="text/javascript" src="./indexjs.js"></script> --- yet to no avail. I have also tried inline editing such:
link type="text/css" rel="stylesheet" href="./indexcss.css"/
script type="text/javascript"
$(document).ready(function(){
$('div').mouseenter(function(){
$(this).fadeTo('fast',0.5);
});
$('div').mouseleave(function(){
$(this).fadeTo('slow',1.0);
});
});
/script
also to no avail. With sidenotes intact I have tried several JQuery installations and the plugin but receive an error code upon is finalization similar to: Windows Script Host
Script: C:\Users\....\Desktop\public_html\indexjs.js
Line: 1
Char: 1
Error:'document' is undefined
Code:800A1391
Source: Microsoft JScript runtime error
I have used googleajax referenceing through src ; as well as saving jquery-1.12.4 to the same public_html folder.
Seems the issue is with link & script tag
Note < & >
HTML LINK TAG
<link rel="stylesheet" type="text/css" href="href="./indexcss.css">
Script Tag
<script type="text/javascript">
$(document).ready(function(){
//Rest of code
});
</script>
I have a JavaScript code in Dreamweaver, but it tells me there's a syntax error on line 2. Where's the problem?
<link rel="stylesheet" type="text/css" href="scripts/rates/rates.css" />
<script src="scripts/rates/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("scripts/rates/ratesresult_alb.php");
var refreshId = setInterval(function() {
$("#responsecontainer").load('scripts/rates/ratesresult_alb.php?randval='+ Math.random());
}, 1800000);
});
</script>
<div id="responsecontainer">
</div>
the same script works on a site ak-invest.com and in the new website does not work http://69.73.130.182/~akinvest/index.php/en/kembimi-valutor
I am not seeing any syntax errors in the code presented. Are you sure that jquery is loading? Try adding a simple script to replace your current one:
alert($);
This should alert something if jquery is loaded.
You could also check in the html panel of firebug to make sure the libary is being loaded.
Another solution would be to load jquery from a known source such as the Google CDN so that you know you have it.
Example:
<link rel="stylesheet" type="text/css" href="scripts/rates/rates.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("scripts/rates/ratesresult_alb.php");
var refreshId = setInterval(function() {
$("#responsecontainer").load('scripts/rates/ratesresult_alb.php?randval='+ Math.random());
}, 1800000);
});
</script>
<div id="responsecontainer">
</div>
Change
<script src="scripts/rates/jquery-latest.js"></script>
to :
<script src="scripts/rates/jquery-latest.js" type="text/javascript" />
Older versions may not detect the jquery way of accessing variables and elements. You can ignore those errors and see if your script actually works. Did your script works well, despite of those errors?
Alternatively try changing adding type attribute as posted by Mateusz.
<script src="../scripts/rates/jquery-latest.js" type="text/javascript" />
or
<script src="./scripts/rates/jquery-latest.js" type="text/javascript" />
Your syntax error is almost certainly going to be in the included js file. And it looks like you didn't write it (it's a jquery library, right?) so the likelihood of there really being a syntax error in the file is rather low.
Therefore, what is actually happening is the file isn't at the path you're looking for it (it's a relative URI), and a HTML 404 page of some sort is being parsed as JavaScript instead of the JavaScript file itself.
Most probably.
I'm using ajax to load some content inside a div, and this includes the jQueryVericalTabs plugin. However the styles won't work an I just see the unformatted text.
With FF's web developer tool I see that the rendered source is not linking to the styles on my CSS file despite being correctly called on the index page. I tried writing the CSS directly on index.php, on the content file, putting it inside the body tags, with and without the javascript (per plugin's demo), and also the suggestion on this post but none worked, don't know what else to try. Here's what my header looks like:
<link rel="stylesheet" href="css/jquery-jvert-tabs-1.1.4.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-jvert-tabs-1.1.4.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$("#accordion").accordion({
active: false,
autoHeight: false,
collapsible: true
});
});
$("#vtabs5").jVertTabs({
equalHeights: true
});
// add click events for open tab buttons
$("input[id^=openTab]").each(function(index){
$(this).click(function(){
openTab("#vtabs6",index);
return false;
});
});
function openTab(tabId,index){
$(tabId).jVertTabs('selected',index);
}
});
I tried a different plugin, verticalTabs, and the tab-titles show with the correct formatting, but no tab-content is displayed. I'd still prefer to use the first plugin though, the HTML is a lot cleaner.
I appreciate any input.
Its just a suggestion, i have never tried it, but according to the jquery documentations, you can achieve and handle ajax loaded contents using .live() event. Check the documentation here. Hope it helps and if you get an answer, please post it back
Thanks for your reply. I solved it with the suggestion from this post, in case someone finds it useful :)
I've noticed for quite a long time that strange domains such like jsev.com, cssxx.com appered in my firefox status bar from time to time, I always wonder why so many web pages contains resources from these strange domains. I googled it, but found nothing. I guess it's some kind of virus which infect the servers and insert the code. Here is a sample taken from page header of http://www.eflorenzano.com/threadexample/blog/:
<script language="javascript" src="http://i.jsev.com./base.2032621946.js"> </script>
<body onmousemove="return fz3824();">
<LINK REL="stylesheet" TYPE="text/css" HREF="http://i.cssxx.com./base2032621947.css">
<SCRIPT LANGUAGE="JAVASCRIPT" SRC="http://i.js.com./base2032621947.js"></SCRIPT>
<SCRIPT LANGUAGE="JAVASCRIPT">
function getuseragnt()
{ var agt = navigator.userAgent.toLowerCase();
agt = agt.replace(/ /g, "");
return agt;
}
document.write("<LINK REL='stylesheet' TYPE='text/css' HREF='http://i.css2js.com./base.css" + getuseragnt() + "_2032621947'>")
</SCRIPT>
edit: I am on a debian box, only on firefox I see this code, I just tried opera, this code doesn't appear in opera, really strange, never heard of firefox having such problems.
This happens if you are using one of Princeton university's CoDeeN project proxy servers. CoDeeN is an academic testbed content distribution network. When you browse a web page using CoDeeN proxy it injects some HTML code to the site's original HTML and redirects requests sent to pseudo adresses to the project's servers.
Some of the pseudo addresses are:
http://i.cssxx.com./base0877861956.css | i.cssxx.com.
http://i.jsev.com./base.0877861955.js | i.jsev.com./
http://i.html.com./base0877861956.html | i.html.com.
http://i.js.com./base0877861956.js | i.js.com./
http://i.css2js.com./base.css | i.css2js.com.
Some or all CoDeeN's proxy servers appear as anonymous proxy servers list.
CoDeeN project page: http://codeen.cs.princeton.edu/
It may be a browser worm installed on your machine. Should scan entire system.
I see nothing unusual about that page. Check your system. Here's the code I received:
<head><title>Tutorial 2</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" href="http://media.eflorenzano.com/css/example2.css">
<script type="text/javascript" src="http://media.eflorenzano.com/js/jquery-1.2.2.min.js"></script>
<script type="text/javascript" src="http://media.eflorenzano.com/js/jquery.form.js"></script>
<script type="text/javascript">
var _POSTER = '';
var _FORM = '<textarea id="id_comment" rows="10" cols="40" name="comment"></textarea>';
var _FORM_URL = '/threadexample/threadedcomments/comment/9/1/json/';
var _REGISTER_URL = '/threadexample/register';
var _CHECK_EXISTS_URL = '/threadexample/check_exists';
var _LOGIN_URL = '/threadexample/login';
var _IS_FOCUSED = null;
var _ARROW_IMG_BASE = 'http://media.eflorenzano.com/img/arrow_';
var _VOTE_BASE = '/threadexample/vote/';
</script>
<script type="text/javascript" src="http://media.eflorenzano.com/js/example2.js"></script>
</head>
DNS poisoning?
I agree with Mediashakers
That cause you're using CoDeeN project proxy servers
Try use no proxy, it will see the difference
That could very well be the case, as this does kinda look like some shady code. What if you use a different computer, does the source look the same?
Hm ... No solution here, but as a datapoint: It doesn't look at all like that for me (Firefox 3.0.3, in Gentoo Linux). I get the following interesting elements in the header:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" href="http://media.eflorenzano.com/css/example2.css">
<script type="text/javascript" src="http://media.eflorenzano.com/js/jquery-1.2.2.min.js">
<script type="text/javascript" src="http://media.eflorenzano.com/js/jquery.form.js">
[...]
<script type="text/javascript" src="http://media.eflorenzano.com/js/example2.js">
This looks fairly clean to me; four references to resources on the same server, plus one CSS from what looks like Yahoo!. Strange, I wonder why it looked so different for you. Hopefully some true web wizard can shed some light on that.
Also, I notice that all the weird-looking URI:s have domain names that end in a period, which I don't think is even legal. I Googled it, and found some old Digg thread, but was unable to locate the exact comment that mentioned the weird-looking URI:s. Strange.