I am parsing an XML file into a table and want to use the jquery tablesorter. I've tried many things, of which none have worked. I was parsing the XML file first via AJAX and then calling tablesorter on my table. The way I have my code now, I'm calling tablesorter on my table, running AJAX, and then updating the table with $("#table).trigger("update"). I am getting this error no matter whether I have it the first way or the second way: "$(#table).tablesorter() is not a function". Any ideas? Code is listed below for JS and HTML.
HTML:
<html>
<head>
<title>Read XML</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery-latest.js"</script>
<script type="text/javascript" src="jquery.tablesorter.js"</script>
<script type="text/javascript" src="custom.js"></script>
</head>
<body>
<table id="table" border="1">
<thead>
<tr>
<th>Item #</th>
<th>Shape</th>
<th>Weight</th>
<th>Color</th>
<th>Clarity</th>
<th>Price($)</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
JS:
$(document).ready(function() {
$("#table").tablesorter();
$.ajax({
type: "GET",
url: "tutorial.xml",
dataType: "xml",
success: parseXml
});
$("#table").trigger("update");
});
function parseXml(xml)
{
$(xml).find("diamond").each(function()
{
$("#table tbody").after("<tr><td>" + $(this).find("id").text() +
"</td><td>" + $(this).find("shape").text() + "</td><td>" + $(this).find("weight").text() +
"</td><td>" + $(this).find("color").text() + "</td><td>" + $(this).find("clarity").text() +
"</td><td>" + $(this).find("price").text() + "</td></tr>");
});
}
You are missing a closing >
<script type="text/javascript" src="jquery.tablesorter.js"</script>
should be
<script type="text/javascript" src="jquery.tablesorter.js"></script>
Edit:
As Marek Karbarz points out below, you're also missing a closing > on this line:
<script type="text/javascript" src="jquery-latest.js"</script>
Not sure why you're including jQuery twice, however.
Related
https://levelup.gitconnected.com/building-a-simple-website-that-outputs-results-from-a-csv-using-users-input-bfcb782ced45
Hi, I am new to JavaScript. I came across this above tutorial and am trying to get it working so that i can then modify it for a little project i am working on. I hope to learn from it as I progress my project. I cant learn at the moment as I dont know whether its right or wrong.
I have created the html and JS file and have tested that they are linked. (I wrote an alert in the JS file that got triggered in the html file. I also added a quick script that gave a text alert when the button was pushed in html file).
I believe I have the same CSV file that the author was using but I cant be 100%. I can only assume I have introduced some error in the JS file and therefore its not reading the CSV file correctly. I have been at this for days and come up with nothing. Any help greatly appreciated.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<div class=”container”>
<div class=”row”>
<div class=”col-md-12">
<h1 class=>Find Movies!</h1>
<h2 class=>Enter the name of an actor/actress to see his/her best movies!</h2>
<form id=”form”>
<input class=”form-control” id=”user-input” placeholder=”Enter actor/actress…”>
<button id=”button” class=”btn btn-secondary”>Find Movies!</button>
</form>
<table class="table" cellpadding="10">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Movie</th>
<th scope="col">Rating</th>
<th scope="col">Year</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
</div>
</div>
</div>
<script src="app.js" charset="utf-8"> </script>
</body>
</html>
JavaScript (app.js)
d3.csv("movies.csv").then(function (data) {
var movies = data;
var button = d3.select("#button");
var form = d3.select("#form");
button.on("click", runEnter);
form.on("submit", runEnter);
function runEnter() {
d3.select("tbody").html("")
d3.event.preventDefault();
var inputValue = d3.select("#user-input").property("value");
var filteredMovies =
movies.filter(movies => movies.actors.includes(inputValue));
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
var output = _.sortBy(filteredMovies, 'avg_vote').reverse()
for (var i = 0; i < filteredMovies.length; i++) {
d3.select("tbody").insert(“tr").html(
"<td>" + [i+1] + "</td>" +
"<td>" + (output[i]['original_title'])+”</a>”+“</td>” +
"<td>" + (output[i]['avg_vote'])+"</td>" +
"<td>" + (output[i]['year'])+"</td>" +
"<td>" + (output[i]['description'])+"</td" ) }
};
});
Extract from movies.csv
I have dataTables on my ASP.NET webforms app, in which the table will be generated by codebehind at Page_Load() before it shows up. This works on my other pages but for some reasons I don't understand, dataTables doesn't work on a page and it throws "datatables.min.js:42 Uncaught TypeError: Cannot read property 'length' of undefined". I'm using DataTables' Zero Configuration method.
Here's my code for Default.aspx:
<table id="jtable" class="table table-striped table-bordered UserTable">
<thead>
<tr>
<th>Job Title</th><th>Job Category</th><th>Date Posted</th><th>Actions</th>
</tr>
</thead>
<tbody>
<asp:Literal runat="server" ID="litJobPostings"></asp:Literal>
</tbody>
</table>
Code for the master file:
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/main.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/datatables.min.js"></script>
<script>
$(document).ready(function () {
$('#jtable').DataTable();
});
</script>
C# code for how the table will be generated:
while (reader.HasRows && reader.Read())
{
tablegen = tablegen + "<tr><td>" + reader.GetString(reader.GetOrdinal("JobTitle")) +
"</td><td>" + reader.GetString(reader.GetOrdinal("JobCategory")) + "</td><td>" + reader.GetString(reader.GetOrdinal("DatePosted")) +
"</td><td>View/Edit Details</td><tr>";
}
reader.Close();
litJobPostings.Text = tablegen;
So any ideas? Again, this works on my other pages but not on a single page I'm dealing and I'm so frustrated right now lol! Thanks! :)
Okay looks like I forgot to close the <tr> tag lol! I'm so confused that I forgot to close it lol!
tablegen = tablegen + "<tr><td>" + reader.GetString(reader.GetOrdinal("JobTitle")) +
"</td><td>" + reader.GetString(reader.GetOrdinal("JobCategory")) + "</td><td>" + reader.GetString(reader.GetOrdinal("DatePosted")) +
"</td><td>View/Edit Details</td></tr>";
That should fix it :)
Thanks to Stanislav Šolc's comment for pointing it out! :D
So I'm just trying to get this to work
Javascript
$.ajax({
url: '/echo/json/', //Change this path to your JSON file.
type: "post",
dataType: "json",
//Remove the "data" attribute, relevant to this example, but isn't necessary in deployment.
data: {
json: JSON.stringify([
{
id: 1,
firstName: "Peter",
lastName: "Jhons"},
{
id: 2,
firstName: "David",
lastName: "Bowie"}
]),
delay: 3
},
success: function(data, textStatus, jqXHR) {
drawTable(data);
}
});
function drawTable(data) {
var rows = [];
for (var i = 0; i < data.length; i++) {
rows.push(drawRow(data[i]));
}
$("#personDataTable").append(rows);
}
function drawRow(rowData) {
var row = $("<tr />");
row.append($("<td>" + rowData.id + "</td>"));
row.append($("<td>" + rowData.firstName + "</td>"));
row.append($("<td>" + rowData.lastName + "</td>"));
return row;
}
the HTML
<!DOCTYPE html>
<html>
<head>
<title>kek</title>
<script src="js/kek.js"></script>
<link rel="stylesheet" type="text/css" href="css/kek.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<table id="personDataTable">
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</body>
</html>
I'm just trying to get this to post back, but every time i do it it just says "$" is not defined, i was hoping maybe it be the browser ( cause I've herd chrome does not like AJAX or JAON very much) so i changed it up. Still no good even Firefox is throwing this exception at me. So i went around looking in stackoverflow and i saw some solutions but i could come to understand how it could solve me problem. Im not too familiar with Js, AJAX, and JSON so i thought id post something and see if anyone could tell me what I'm doing wrong.
<!DOCTYPE html>
<html>
<head>
<title>kek</title>
<link rel="stylesheet" type="text/css" href="css/kek.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/kek.js"></script>
</head>
<body>
<table id="personDataTable">
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</body>
</html>
I have this js part of script:
jQuery.each(data, function(index, value) {
$("table_div").append("<td>" + value + "</td>");
});
I want use this for create a table with twitter bootstrap. In the html page there is this table element:
<table class="table table-striped" id="table_div">
</table>
But this solution doesn't works. How I have to do? Thank you!
First of all, you're not appending any <tr> elements which are needed in a table, and secondly you're referring to $("table_div") instead of $("#table_div") (the hashtag # means that you're referring to an ID, just like in CSS).
jQuery.each(data, function(index, value) {
$("#table_div").append("<tr><td>" + value + "</td></tr>");
});
Besides referring to the node <table_div> instead of the id #table_div you don't want to append anything to the table node.
You should take a look at this as well as here and here.
You should use tbody when using Twitters Bootstrap anyways for example, like so:
<table id="table_div" class="table table-striped">
<tbody></tbody>
<table>
here the right js
for (i in data) {
$('#table_div > tbody:last').append('<tr><td>'+data[i]+'</td></tr>');
}
For more research look here Add table row in jQuery
Edit:
Ok i wrote you an entire example using twitters bootstrap and jQuery.
This works, if it doesn't for your data array, something is wrong with it.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
</head>
<body>
<table class="table table-striped" id="my-table">
<tbody>
</tbody>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
<script type="text/javascript">
var data = ["foo","bar"];
$(document).ready(function(){
$.each(data, function(i,item){
$('#my-table > tbody:last').append('<tr><td>'+item+'</td></tr>');
});
});
</script>
</body>
</html>
I load a file called content.php into my browser. Content.php uses jquery to display some tabs for navigating between different types of content. The tabs are set up to load via Ajax.
Here is content.php:
<?php
include_once 'bin/Cookie.inc';
Cookie::check_auth();
$cookie = new Cookie();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Client Matters - Home</title>
<link type="text/css" href="css/pepper-grinder/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
$(function()
{
$( "#tabs" ).tabs();
});
</script>
<style type="text/css">
body{ font: 12pt "Trebuchet MS", sans-serif; margin: 0px;}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li>Clients</li>
<li>Matters</li>
<li>Contacts</li>
<li>Calendar</li>
<li>Admin</li>
<li>Settings</li>
<li>Logout</li>
</ul>
</div>
</body>
</html>
When the user clicks on the "Clients" tab, clients.php is loaded. clients.php in turn makes an ajax query to the server to get the list of clients to display on it's page.
clients.php looks like this:
<?php
include_once 'bin/Cookie.inc';
Cookie::check_auth();
$cookie = new Cookie();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Client Matters - Home</title>
<link type="text/css" href="css/pepper-grinder/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
$(function()
{
$.ajax(
{
url: 'bin/getClientList.php',
type: 'post',
cache: false,
dataType: 'json',
success: function(data) {handleFormDataPostSuccess(data);},
error: function(data) {handleFormDataPostFailure(data);}
});
});
function handleFormDataPostSuccess(contacts)
{
$.each(contacts, function(index, contact)
{
var cname = "<tr><td>" + contact.lastName + ", " + contact.firstName + " " + contact.middleName + " " + contact.suffix + "</td>";
var phone1Link = "<td><a href='" + contact.voipDialString.replace("TO", contact.phone1) + "'>" + contact.phone1 + "</a></td>";
var phone2Link = "<td><a href='" + contact.voipDialString.replace("TO", contact.phone2) + "'>" + contact.phone2 + "</a></td>";
var emailLink = "<td>" + contact.email + "</td></tr>";
$('#contactTable tr:last').after(cname + phone1Link + phone2Link + emailLink);
});
$('#contactTable tr:odd').addClass("alt");
}
function handleFormDataPostFailure(error)
{
alert(error);
}
</script>
<style type="text/css">
body{ font: 12pt "Trebuchet MS", sans-serif; margin: 0px;}
td{padding:1em 1em 1em 1em; vertical-align:middle}
tr.alt {background: #D5D1B9}
table {border-width: 0px;border-spacing: 2px;border-style: none;border-collapse: collapse}
table th {border-width: 0px;border-style: none}
table td {border-width: 0px;padding:1em;border-style: none;}
tr:hover{background-color:yellow}
</style>
</head>
<body>
<table id="contactTable" width="100%">
<tr>
<th>Name</th>
<th>Phone 1</th>
<th>Phone 2</th>
<th>Email</th>
</tr>
</table>
</body>
</html>
This all works perfectly on IE, Firefox, Safari on my PC, and the browser on my Acer A500 Android tablet.
However, the tab/javascript interaction somehow fails when I'm running this on an iPad2 or an iPhone 3G (my only two Apple hardware products).
If I turn off the tabs (e.g. remove the in-line javascript from content.php) and just show a list of links for each segment of content, it looks ugly but works find on the iPad. If leave the tabs on, it looks great, but won't run the javascript inside clients.php.
Based on "error_log()" lines I've put in the PHP part of clients.php, I know the clients.php file is being loaded, but based on "alert()" lines I put in the javascript, none of the java script is running.
I enabled the debug console on the ipad2 and I don't get any errors. I even put some crazy lines of non-code inside the in-line javascript in clients.php. Firefox's error console complained out them, but the iPad2's error console remained empty.
Anyway, I'm just lost in terms of figuring out why this works on my other systems but not on an iPad or iPhone. Any pointers--even clues--will be greatly and deeply appreciated.
Could you try where clients.php dosent contain HTML structure markup.
The JQUERY-UI example only uses the HTML which needs to be listed inside the tab.
Which makes me think it loads your complete strcuture into the tab, and then have a body+head tag inside the tab, which is fair enough that IOS/Safari has trouble understadning.
Could you test it with just something like this:
<?php
include_once 'bin/Cookie.inc';
Cookie::check_auth();
$cookie = new Cookie();
?>
<script type="text/javascript">
$(function()
{
$.ajax(
{
url: 'bin/getClientList.php',
type: 'post',
cache: false,
dataType: 'json',
success: function(data) {handleFormDataPostSuccess(data);},
error: function(data) {handleFormDataPostFailure(data);}
});
});
function handleFormDataPostSuccess(contacts)
{
$.each(contacts, function(index, contact)
{
var cname = "<tr><td>" + contact.lastName + ", " + contact.firstName + " " + contact.middleName + " " + contact.suffix + "</td>";
var phone1Link = "<td><a href='" + contact.voipDialString.replace("TO", contact.phone1) + "'>" + contact.phone1 + "</a></td>";
var phone2Link = "<td><a href='" + contact.voipDialString.replace("TO", contact.phone2) + "'>" + contact.phone2 + "</a></td>";
var emailLink = "<td>" + contact.email + "</td></tr>";
$('#contactTable tr:last').after(cname + phone1Link + phone2Link + emailLink);
});
$('#contactTable tr:odd').addClass("alt");
}
function handleFormDataPostFailure(error)
{
alert(error);
}
</script>
<table id="contactTable" width="100%">
<tr>
<th>Name</th>
<th>Phone 1</th>
<th>Phone 2</th>
<th>Email</th>
</tr>
</table>
Since it's executed on your page, it should NOT be necessary to reload script files.
This soloution could of course be a problem if you access the page outside the tabs.