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>
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'm very new to JScript, Ajax and Google Graphs. But I'm trying to combine everything, I've coded them all separately and got them working but having a lot of issues bringing it all together.
Google Graph Part of my code(Form does nothing here):
<html>
<head>
<title>Dashboard Application</title><meta name=keywords content=Dashboard Application, some of my best frieds are search engines/><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="https://www.google.com/jsapi"></script><link type="text/css" href="jquery.simple-dtpicker.css" rel="stylesheet" /><script type="text/javascript" src="jquery.simple-dtpicker.js"></script><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link type="text/css" href="jquery.simple-dtpicker.css" rel="stylesheet" />
<!---->
<style type="text/css">
body { background-color: #ffffff; padding-left: 1%; padding-bottom: 100px; }
footer{font-size:small;position:fixed;right:5px;bottom:5px;}
</style>
<style>h1 {color:white; font-size:24pt; text-align:center;font-family:arial,sans-serif }.menu {color:white; font-size:12pt; text-align:center;font-family:arial,sans-serif; font-weight:bold }table2 {background:black }p {color:black; font-size:12pt; text-align:justify;font-family:arial,sans-serif }p.foot {color:white; font-size:9pt; text-align:center;font-family:arial,sans-serif; font-weight:bold }a:link, a:visited, a:active {color:white} </style></head>
<body>
<table width=100% cellpadding=12 cellspacing=0 border=0><tr bgcolor=black><td align=left><img src="logo.png" width=150 height=150/></td><td><h1>Engineering Dashboard</h1></td><td align=right><img src=logo.png width=150 height=150/> </td></tr> </table><table class='table2' width=100% border=0 bgcolor=black cellpadding=4 cellspacing=0>
<tr>
<td width=50%><a href=googletestform.php><img src=as-logo.png width=20 height=20 alt=Google Graphs+Form border=0 /></a><a href=googletestform.php><span class=menu>Google Graphs+Form</span></a></td><td width=50%><a href=logout.php><img src=as-logo.png width=20 height=20 alt=Log Out border=0 /></a><a href=logout.php><span class=menu>Log Out</span></a></td></tr>
</table>
<form id="graphinput" method=POST>
<table width="100%" cellpadding="1" cellspacing="1" border="0"><tr>
<td width="10%">Start Date:</td>
<td width="20%">
<input type="text" name="startDateTime" value="">
<script type="text/javascript">
$(function(){
$('*[name=startDateTime]').appendDtpicker();
});
</script></td>
<td width="10%">End Date:</td>
<td width="20%">
<input type="text" name="endDateTime" value="">
<script type="text/javascript">
$(function(){
$('*[name=endDateTime]').appendDtpicker();
});
</script></td><td width="30%" ><select name="table"><option value="PHY_Short_CHA_ESW">PHY_Short_CHA_ESW</option><option value="PHY_Short_Cache_Usage_Rate">PHY_Short_Cache_Usage_Rate</option><option value="PHY_Short_DKA_ESW">PHY_Short_DKA_ESW</option><option value="PHY_Short_ESW_Cache">PHY_Short_ESW_Cache</option><option value="PHY_Short_MP">PHY_Short_MP</option><option value="PHY_Short_MPPCB_ESW">PHY_Short_MPPCB_ESW</option><option value="PHY_Short_PG">PHY_Short_PG</option><option value="PHY_Short_Write_Pending_Rate">PHY_Short_Write_Pending_Rate</option><option value="Port_IOPS">Port_IOPS</option><option value="Port_Initiator_IOPS">Port_Initiator_IOPS</option><option value="Port_Initiator_KBPS">Port_Initiator_KBPS</option><option value="Port_Initiator_Response">Port_Initiator_Response</option><option value="Port_KBPS">Port_KBPS</option><option value="Port_Response">Port_Response</option></select></td><td width="10%" ><select name="graph"><option value="ALL">ALL</option><option value="AVG&MAX">AVG&MAX</option></select></td></tr></table><table><tr><td width=100%><input type="submit" value="Submit"></td></tr></table></form><div id="response"></div>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load("visualization", "1", {"packages":["corechart"]});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
url: "get_sql_data.php",
//type: "POST",
dataType: "json",
success: function (phpdata) {
// Create our data table out of JSON data loaded from server.
var chartdata = new google.visualization.DataTable(phpdata);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
chart.draw(chartdata, {width: 1600, height: 500});
}
});
}
</script>
<!--this is the div that will hold the pie chart-->
<div id="chart_div"></div><table width=100% bgcolor=black cellpaddin g=0 border=0><tr><td><p class=foot>© root Dashboard</p><p class=foot>Please see our <a href=legal.php>Legal Information Page</a></p></td></tr></table></body>
</html>
The Text only version(Want to take the data from the form returned in a string here and graph it):
<html>
<head>
<title>Dashboard Application</title><meta name=keywords content=Dashboard Application, some of my best frieds are search engines/><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="https://www.google.com/jsapi"></script><link type="text/css" href="jquery.simple-dtpicker.css" rel="stylesheet" /><script type="text/javascript" src="jquery.simple-dtpicker.js"></script><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link type="text/css" href="jquery.simple-dtpicker.css" rel="stylesheet" />
<!---->
<style type="text/css">
body { background-color: #ffffff; padding-left: 1%; padding-bottom: 100px; }
footer{font-size:small;position:fixed;right:5px;bottom:5px;}
</style>
<style>h1 {color:white; font-size:24pt; text-align:center;font-family:arial,sans-serif }.menu {color:white; font-size:12pt; text-align:center;font-family:arial,sans-serif; font-weight:bold }table2 {background:black }p {color:black; font-size:12pt; text-align:justify;font-family:arial,sans-serif }p.foot {color:white; font-size:9pt; text-align:center;font-family:arial,sans-serif; font-weight:bold }a:link, a:visited, a:active {color:white} </style></head>
<body>
<table width=100% cellpadding=12 cellspacing=0 border=0><tr bgcolor=black><td align=left><img src="logo.png" width=150 height=150/></td><td><h1>Engineering Dashboard</h1></td><td align=right><img src=logo.png width=150 height=150/> </td></tr> </table><table class='table2' width=100% border=0 bgcolor=black cellpadding=4 cellspacing=0>
<tr>
<td width=50%><a href=googletestform.php><img src=as-logo.png width=20 height=20 alt=Google Graphs+Form border=0 /></a><a href=googletestform.php><span class=menu>Google Graphs+Form</span></a></td><td width=50%><a href=logout.php><img src=as-logo.png width=20 height=20 alt=Log Out border=0 /></a><a href=logout.php><span class=menu>Log Out</span></a></td></tr>
</table>
<form id="graphinput" method=POST>
<table width="100%" cellpadding="1" cellspacing="1" border="0"><tr>
<td width="10%">Start Date:</td>
<td width="20%">
<input type="text" name="startDateTime" value="">
<script type="text/javascript">
$(function(){
$('*[name=startDateTime]').appendDtpicker();
});
</script></td>
<td width="10%">End Date:</td>
<td width="20%">
<input type="text" name="endDateTime" value="">
<script type="text/javascript">
$(function(){
$('*[name=endDateTime]').appendDtpicker();
});
</script></td><td width="30%" ><select name="table"><option value="PHY_Short_CHA_ESW">PHY_Short_CHA_ESW</option><option value="PHY_Short_Cache_Usage_Rate">PHY_Short_Cache_Usage_Rate</option><option value="PHY_Short_DKA_ESW">PHY_Short_DKA_ESW</option><option value="PHY_Short_ESW_Cache">PHY_Short_ESW_Cache</option><option value="PHY_Short_MP">PHY_Short_MP</option><option value="PHY_Short_MPPCB_ESW">PHY_Short_MPPCB_ESW</option><option value="PHY_Short_PG">PHY_Short_PG</option><option value="PHY_Short_Write_Pending_Rate">PHY_Short_Write_Pending_Rate</option><option value="Port_IOPS">Port_IOPS</option><option value="Port_Initiator_IOPS">Port_Initiator_IOPS</option><option value="Port_Initiator_KBPS">Port_Initiator_KBPS</option><option value="Port_Initiator_Response">Port_Initiator_Response</option><option value="Port_KBPS">Port_KBPS</option><option value="Port_Response">Port_Response</option></select></td><td width="10%" ><select name="graph"><option value="ALL">ALL</option><option value="AVG&MAX">AVG&MAX</option></select></td></tr></table><table><tr><td width=100%><input type="submit" value="Submit"></td></tr></table></form><div id="response"></div><div id="response"></div>
<script>
$(document).ready(function(){
$("#graphinput").submit(function(){
// show that something is loading
$("#response").html("<b>Loading response...</b>");
/*
* "post_receiver.php" - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.ajax({
type: "POST",
url: "get_sql_data.php",
data: $(this).serialize()
})
.done(function(data){
// show the response
$("#response").html(data);
})
.fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
</script>
<table width=100% bgcolor=black cellpaddin g=0 border=0><tr><td><p class=foot>© root Dashboard</p><p class=foot>Please see our <a href=legal.php>Legal Information Page</a></p></td></tr></table></body>
</html>
When I try and combine the two as soon as I press the submit button it just opens a new page and keeps saying connecting to www.google.com. Any ideas on how I can graph the txt data?
Here is my attempt that doesn't work:
$(document).ready(function(){
$("#graphinput").submit(function(){
// show that something is loading
$("#response").html("<b>Loading response...</b>");
/*
* "post_receiver.php" - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.ajax({
type: "POST",
url: "get_sql_data.php",
data: $(this).serialize()
})
.done(function(data){
// show the response
// Load the Visualization API and the piechart package.
google.load("visualization", "1", {"packages":["corechart"]});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var chartdata = new google.visualization.DataTable(data);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById("response"));
chart.draw(chartdata, {width: 1600, height: 500});
}
})
.fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
</script>
Thanks in advance for any help.
Saw my error, I was trying to graph using the wrong data type:
My Current working code:
<script>
//Load core chart visualization package
google.load("visualization", "1", {packages: ["corechart"]});
//On load call back initiate function
google.setOnLoadCallback(getData);
function getData() {
$(document).ready(function(){
$("#graphinput").submit(function(){
// show that something is loading
$("#response").html("<b>Loading response...</b>");
/*
* "post_receiver.php" - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.ajax({
type: "POST",
url: "get_sql_data.php",
dataType: "json",
data: $(this).serialize()
})
.done(function(data){
// show the response
//$("#response").html(data);
var chartdata = new google.visualization.DataTable(data);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById("response"));
chart.draw(chartdata, {width: 1600, height: 500});
})
.fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
}
</script>
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 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.
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.