I am trying to import *.csv using the init-from-csv.html (from the demo files). I downloaded the GetOrgChart zip files and I changed the link to the actual .js and .css files.
This my code:
<!DOCTYPE html> <html> <head>
<title>OrgChart | Initialize From XML</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="D:/Tools/GetOrgChart/getorgchart/getorgchart.js"></script>
<link href="D:/Tools/GetOrgChart/getorgchart/getorgchart.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
#people {
width: 100%;
height: 100%;
}
</style> </head> <body>
<div id="people"></div>
<script type="text/javascript">
function convertToCsvJson(allText) {
var allTextLines = allText.split(/\r\n|\n/);
var headers = allTextLines[0].split(',');
var lines = [];
for (var i = 1; i < allTextLines.length; i++) {
var data = allTextLines[i].split(',');
if (data.length == headers.length) {
var tarr = {};
for (var j = 0; j < headers.length; j++) {
tarr[headers[j]] = data[j];
}
lines.push(tarr);
}
}
return lines;
}
$.get("D:/Tools/GetOrgChart/ORG_Data.txt", function (source) {
source = convertToCsvJson(source);
var peopleElement = document.getElementById("people");
var orgChart = new getOrgChart(peopleElement, {
theme: "helen",
primaryFields: ["name", "Job Title"],
photoFields: ["Photo"],
linkType: "M",
enableEdit: false,
enableDetailsView: false,
dataSource: source
});
});
</script> </body> </html>
After I open the HTML file, it will not load. I am not sure what I did wrong.
Related
I'm learning java script and I'm currently working with testing in javiscritp, I've done this code that you can look at, but I don't know how to reverse now the order of these cubes to be 2 up and 1 down (see what I want in the picture) I know I need to change something for loops but I fail in any way to get what I want.
let Tabela = (function () {
const dajRed = function (tabela) {
let red = document.createElement("tr");
tabela.appendChild(red);
return red;
}
const dajCeliju = function (red, prikazi) {
let celija = document.createElement("td");
if (!prikazi) celija.style = "display:none;";
red.appendChild(celija)
return celija;
}
const crtaj = function (x, y) {
const body = document.getElementsByTagName("body")[0];
let tabelaEl = document.createElement("table");
body.appendChild(tabelaEl);
for (let i = 0; i < y; i++) {
let red = dajRed(tabelaEl);
for (let j = 0; j < x; j++) {
dajCeliju(red, j < i);
}
}
}
return {
crtaj: crtaj
}
}());
//table.crtaj(3,3)
//i=0 ⍉⍉⍉
//i=1 ⎕⍉⍉
//i=2 ⎕⎕⍉
//Tabela.crtaj(8, 8);
let assert = chai.assert;
describe('Tabela', function() {
describe('crtaj()', function() {
it('should draw 3 rows when parameter are 2,3', function() {
Tabela.crtaj(2,3);
let tabele = document.getElementsByTagName("table");
let tabela = tabele[tabele.length-1]
let redovi = tabela.getElementsByTagName("tr");
assert.equal(redovi.length, 3,"Broj redova treba biti 3");
});
it('should draw 2 columns in row 2 when parameter are 2,3', function() {
Tabela.crtaj(2,3);
let tabele = document.getElementsByTagName("table");
let tabela = tabele[tabele.length-1]
let redovi = tabela.getElementsByTagName("tr");
let kolone = redovi[2].getElementsByTagName("td");
let brojPrikazanih = 0;
for(let i=0;i<kolone.length;i++){
let stil = window.getComputedStyle(kolone[i])
if(stil.display!=='none') brojPrikazanih++;
}
assert.equal(brojPrikazanih, 2,"Broj kolona treba biti 2");
});
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mocha Tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
<style>
td{
border: 1px solid black;
height: 20px;
width: 20px;
}
</style>
</head>
<body>
<div id="ispis"></div>
<div id="mocha"></div>
<script src="https://unpkg.com/chai/chai.js"></script>
<script src="https://unpkg.com/mocha/mocha.js"></script>
<script class="mocha-init">
mocha.setup('bdd');
mocha.checkLeaks();
</script>
<script src="tabela.js"></script>
<script src="test.js"></script>
<script class="mocha-exec">
mocha.run();
</script>
</body>
</html>
Invert the check in dajCeliju:
if (prikazi) celija.style = "display:none;";
OR second option - change the params:
dajCeliju(red, j >= i);
Is this what you need?
How can I export this HTML table data in a way, that the exported data look exactly as the initial data.
The array data[] is the source for the table below. The button dataToArray exports this HTML table data back to an array. I struggle with the format as I need the data identifier, in the array, too.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Table Test</title>
<!-- d3.js framework -->
<script src="https://d3js.org/d3.v6.js"></script>
<!-- jquery import-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>
<style>
#myTable {
border-collapse: collapse;
}
#myTable td {
border: 1px solid black;
padding: 8px;
}
#delRow {
width: auto;
height: 30px;
}
</style>
<body>
<table id="myTable">
<th>
Property
</th>
<th>
Value
</th>
<tbody>
<!-- filled by script -->
</tbody>
</table>
<button id="dataToArray">dataToArray</button>
<script>
data = [
{
"property": "animal",
"value": "dog"
},
{
"property": "car",
"value": "audi"
},
{
"property": "snacks",
"value": "chips"
}
]
//populate table
var myTable = document.getElementById("myTable")
for (var i = 0; i < data.length; i++ ) {
var row = `<tr>
<td>${data[i].property}</td>
<td>${data[i].value}</td>
</tr>`
myTable.innerHTML += row
}
//get table data
var dataToArray = document.getElementById("dataToArray")
dataToArray.addEventListener("click", function() {
console.clear()
console.log("data before export:")
console.log(data)
var exportData = []
$("table#myTable tr").each(function() {
var rowDataArray = []
var actualData = $(this).find("td");
if (actualData.length > 0) {
actualData.each(function() {
rowDataArray.push($(this).text());
});
exportData.push(rowDataArray)
};
})
console.log("data after export:")
console.log(exportData)
})
</script>
</body>
</html>
Here is dynamic way (works even for more than two headers without changing the export code):
First get all headers dynamically (not hard code) by this line:
var headers = $("table#myTable th").map(function () {
return this.innerText;
}).get();
And then in export time do like this:
var object = {};
headers.forEach((data, index) => {
object[data] = actualData[index].innerText;
})
exportData.push(object)
data = [
{
"property": "animal",
"value": "dog"
},
{
"property": "car",
"value": "audi"
},
{
"property": "snacks",
"value": "chips"
}
]
//populate table
var myTable = document.getElementById("myTable")
for (var i = 0; i < data.length; i++) {
var row = `<tr>
<td>${data[i].property}</td>
<td>${data[i].value}</td>
</tr>`
myTable.innerHTML += row
}
//get table data
var dataToArray = document.getElementById("dataToArray")
dataToArray.addEventListener("click", function () {
var headers = $("table#myTable th").map(function () {
return this.innerText;
}).get();
console.clear()
console.log("data before export:")
console.log(data);
var exportData = []
$("table#myTable tr").each(function (e,i) {
var rowDataArray = []
var actualData = $(this).find("td");
if (actualData.length > 0) {
var object = {};
headers.forEach((data, index) => {
object[data] = actualData[index].innerText;
})
exportData.push(object)
};
})
console.log("data after export:")
console.log(exportData)
})
#myTable {
border-collapse: collapse;
}
#myTable td {
border: 1px solid black;
padding: 8px;
}
#delRow {
width: auto;
height: 30px;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<table id="myTable">
<th>
Property
</th>
<th>
Value
</th>
<tbody>
<!-- filled by script -->
</tbody>
</table>
<button id="dataToArray">dataToArray</button>
You must define rowDataArray as new Object
I change your code only at this part:
var exportData = []
$("table#myTable tr").each(function() {
var rowDataArray = []
var actualData = $(this).find("td");
if (actualData.length > 0) {
actualData.each(function() {
rowDataArray.push($(this).text());
});
exportData.push(rowDataArray)
};
})
and change it with:
var exportData = []
$("table#myTable tr").each(function() {
var rowDataObject= new Object;
var actualData = $(this).find("td");
if (actualData.length > 0) {
rowDataObject.property = actualData[0].innerText;
rowDataObject.value= actualData[1].innerText;
exportData.push(rowDataObject)
};
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Table Test</title>
<!-- d3.js framework -->
<script src="https://d3js.org/d3.v6.js"></script>
<!-- jquery import-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>
<style>
#myTable {
border-collapse: collapse;
}
#myTable td {
border: 1px solid black;
padding: 8px;
}
#delRow {
width: auto;
height: 30px;
}
</style>
<body>
<table id="myTable">
<th>
Property
</th>
<th>
Value
</th>
<tbody>
<!-- filled by script -->
</tbody>
</table>
<button id="dataToArray">dataToArray</button>
<script>
data = [
{
"property": "animal",
"value": "dog"
},
{
"property": "car",
"value": "audi"
},
{
"property": "snacks",
"value": "chips"
}
]
//populate table
var myTable = document.getElementById("myTable")
for (var i = 0; i < data.length; i++ ) {
var row = `<tr>
<td>${data[i].property}</td>
<td>${data[i].value}</td>
</tr>`
myTable.innerHTML += row
}
//get table data
var dataToArray = document.getElementById("dataToArray")
dataToArray.addEventListener("click", function() {
console.clear()
console.log("data before export:")
console.log(data)
var exportData = []
$("table#myTable tr").each(function() {
var rowDataObject= new Object;
var actualData = $(this).find("td");
if (actualData.length > 0) {
rowDataObject.property = actualData[0].innerText;
rowDataObject.value= actualData[1].innerText;
exportData.push(rowDataObject)
};
})
console.log("data after export:")
console.log(exportData)
})
</script>
</body>
</html>
How to add button for each item in localstorage to remove that item?
I have code for setItem and getItem from localstorage, but I don't know how I can add a button or x for each item to remove it.
2020-03-01 March x
2020-04-01 April x
It looks like add item to card or remove item from card.
plz help me
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#inpkey").datepicker();
});
</script>
<style>
fieldset{
margin-bottom:20px;
}
input{
padding: 7px;
height:40px;
}
</style>
</head>
<body>
<fieldset>
<input type="text" id="inpkey" placeholder="Click and select date">
<input type="text" id="inpvalue">
<button type="button" id="btninsert">Save</button>
</fieldset>
<fieldset>
<div id="output"></div>
</fieldset>
<script>
const inpkey = document.getElementById("inpkey");
const inpavv = document.getElementById("inpvalue");
const spara = document.getElementById("btninsert");
const output = document.getElementById("output");
spara.onclick = function () {
const key = inpkey.value;
const value = inpavv.value;
console.log(key);
console.log(value);
if (key && value ) {
localStorage.setItem(key, value );
location.reload();
}
};
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
const value = localStorage.getItem(key);
console.log(localStorage.getItem(key));
output.innerHTML += `${key}:     ${value} <p />`;
}
</script>
</body>
</html>
Something like this: Note JSFiddle had trouble removing the last element. Might be something I overlooked in the code. Good luck.
const setup = () => {
const spara = document.querySelector('#btninsert');
const output = document.querySelector('#output');
spara.addEventListener('click', addMyEntry);
output.addEventListener('click', removeMyEntry);
insertEntries(output);
};
const insertEntries = (target) => target.insertAdjacentHTML('beforeend', loadEntryHTML());
const loadEntryHTML = () => {
let html = '';
if(localStorage.length !== 0) {
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
const value = localStorage.getItem(key);
html += createEntryHTML(key, value);
}
}
return html;
};
const createEntryHTML = (key, value) => `<p><label class="lbl_key">${key}:</label><span class="sp_value">${value}</span> remove<p/>`;
const addMyEntry = () => {
const inpkey = document.querySelector('#inpkey');
const inpavv = document.querySelector('#inpvalue');
const key = inpkey.value;
const value = inpavv.value;
if (key && value ) {
localStorage.setItem(key, value );
const output = document.querySelector('#output');
output.insertAdjacentHTML('beforeend', createEntryHTML(key, value));
}
};
const removeMyEntry = (event) => {
const target = event.target;
if(target.nodeName === 'A') {
event.currentTarget.removeChild(target.parentNode);
localStorage.removeItem(target.dataset.key);
}
};
//load
window.addEventListener('load', setup);
.lbl_key {
padding-right: 1em;
}
<fieldset>
<input type="text" id="inpkey" placeholder="Click and select date">
<input type="text" id="inpvalue">
<button type="button" id="btninsert">Save</button>
</fieldset>
<fieldset>
<div id="output"></div>
</fieldset>
A better solution to build elements dynamically.
const app = document.getElementById("app");
const localStorage = [1, 2, 3, 4];
for (let index = 0; index < localStorage.length; index++) {
// const key = localStorage.key(index);
// const value = localStorage.getItem(key);
let div = document.createElement("div");
div.className = "cart_item";
div.id = "cart_item_" + index;
div.textContent = localStorage[index] + new Date().toUTCString() + "";
let cross = document.createElement("span");
cross.className = "cross";
cross.textContent = " X";
cross.addEventListener("click", function remove() {
alert("Remove item");
});
div.appendChild(cross);
app.appendChild(div);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="app.css" />
<!-- <script src="https://deepak-proxy-server.herokuapp.com/https://gist.githubusercontent.com/deepakshrma/4b6a0a31b4582d6418ec4f76b7439781/raw/e7377474ce9e411b4d8de4b10f4437a24774c0e2/Mapper.js"></script> -->
<style>
.cart_item{
border: 1px solid;
padding: 20px 40px;
}
.cross {
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
</div>
</body>
</html>
I am using JQ Widgets multicolumn dropdowns and JQ UI Dialogues for new account creation when the user selects new from the dropdown. The problem is that when the dialogue is opened, the dropdown does not close and I have tried .close() methods and all I get from that is an invalid method call error.
Here is a screen shot:
Here is my code:
$("#divNewAccount").dialog({
autoOpen: false,
modal: true,
title: "New Account",
width: 600,
buttons: {
Ok: function () {
// TODO: Add logic and code to add record to database and autopopulate #jqxAccountDropdown AND select record value just updated
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
// Start Multicolum for Accounts
// prepare the data
var data = new Array();
var AccountIndex_Default = [""];
var AccountName_Default = ["New"];
var AccountType_Default = [""];
if(#(Html.Raw(JsonConvert.SerializeObject(ViewBag.ServiceID))) !== null){
var AccountIndex_FromService = [#(Html.Raw(JsonConvert.SerializeObject(ViewBag.AccountID)))];
var AccountName_FromService = [#(Html.Raw(JsonConvert.SerializeObject(ViewBag.AccountName)))];
var AccountType_FromService = [#(Html.Raw(JsonConvert.SerializeObject(ViewBag.AccountType)))];
var AccountIndex = ServiceIndex_Default.concat(AccountIndex_FromService);
var AccountName = ServiceName_Default.concat(AccountName_FromService);
var AccountType = ServiceNotes_Default.concat(AccountType_FromService);
} else {
var AccountIndex = AccountIndex_Default;
var AccountName = AccountName_Default;
var AccountType = AccountType_Default;
}
for (var i = 0; i < AccountIndex.length; i++) {
var row = {};
row["accountindex"] = AccountIndex[i];
row["accountname"] = AccountName[i];
row["accounttype"] = AccountType[i];
data[i] = row;
}
var source = { localdata: data, datatype: "array" };
$("#jqxAccountDropdownButton").jqxDropDownButton({ width: 150, height: 25 });
$("#jqxAccountDropdownGrid").jqxGrid({
width: 350,
height: 200,
source: source,
theme: 'energyblue',
columns: [
{ text: '', datafield: 'accountindex', width: 0 },
{ text: 'Account Name', datafield: 'accountname', width: 200 },
{ text: 'Account Type', datafield: 'accounttype', width: 100 }
]
});
$("#jqxAccountDropdownGrid").bind('rowselect', function (event) {
var args = event.args;
var row = $("#jqxAccountDropdownGrid").jqxGrid('getrowdata', args.rowindex);
var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' +
row["accountname"] + '</div>';
$("#jqxAccountDropdownButton").jqxDropDownButton('setContent', dropDownContent);
if (row["accountname"].toString().toLowerCase() === "new") {
$("#divNewAccount").dialog("open");
}
});
// End Multicolume for Accounts
<script src="/Content/themes/jquery-ui-1.11.4/jquery-ui.js"></script>
<link href="/Content/themes/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet" />
<link href="/Content/themes/jquery-ui-1.11.4/jquery-ui.theme.css" rel="stylesheet" />
<link href="/Content/ScrollingTables.css" rel="stylesheet" />
<link href="/Content/Multiselect.css" rel="stylesheet" />
<link rel="stylesheet" href="~/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="~/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
<script type="text/javascript" src="~/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxdropdownbutton.js"></script>
<div id="jqxAccountDropdownButton">
<div id='jqxAccountDropdownWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxAccountDropdownGrid"></div>
</div>
</div>
So given the above information, is it possible to close this list when the dialogue opens?
Found the answer...
use $("#jqxAccountDropdownButton").jqxDropDownButton('close');
I am trying to use the Autocomplete text search example on https://developers.google.com/fusiontables/docs/samples/autocomplete however when I replace the table id I get a TypeError. I can see my markers however when I try to search nothing happens.
Here are my files:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Map Search Engine</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1');
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(51.545032, -0.05642),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var tableId = '1lhqB6x3JubMAvA9zPf3ByzzvgWFamb24xDmH0_op'
var locationColumn = 'Address';
var layer = new google.maps.FusionTablesLayer({
query: {
select: locationColumn,
from: tableId
},
map: map
});
initAutoComplete(tableId);
// Update layer when user clicks find.
google.maps.event.addDomListener(document.getElementById('find'), 'click',
function() {
var Library = document.getElementById('Library').value;
if (Library) {
Library = Library.replace(/'/g, '\\\'');
var where = "'Library Names' CONTAINS IGNORING CASE '" +
Library + "'";
layer.setOptions({
query: {
select: locationColumn,
from: tableId,
where: where
}
});
}
});
}
function initAutoComplete(tableId) {
// Retrieve the unique Library names using GROUP BY workaround.
var queryText = encodeURIComponent(
"SELECT 'Library Name', COUNT() " +
'FROM ' + tableId + " GROUP BY 'Library Name'");
var query = new google.visualization.Query(
'http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
query.send(function(response) {
var numRows = response.getDataTable().getNumberOfRows();
// Create the list of results for display of autocomplete.
var results = [];
for (var i = 0; i < numRows; i++) {
results.push(response.getDataTable().getValue(i, 0));
}
// Use the results to create the autocomplete options.
$('#Library').autocomplete({
source: results,
minLength: 2
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div>
<input type="text" id="Library">
<input type="button" value="Find" id="find">
<small>HINT: Try typing "Dalston"</small>
</div>
</body>
</html>
CSS
html {
height: 100%;
margin: 0px;
padding: 0px
}
body {
font-family: Arial, sans-serif;
font-size: 12px;
}
#map-canvas {
height: 500px;
width: 600px;
}
#visualization {
height: 400px;
width: 500px;
}
Please Help!!
The reason I was getting a TypeError was because in my query I put Library Name rather than Library Names as it is in the FusionTable.
function initAutoComplete(tableId) {
// Retrieve the unique Library names using GROUP BY workaround.
var queryText = encodeURIComponent(
"SELECT 'Library Name', COUNT() " +
'FROM ' + tableId + " GROUP BY '*Library Name*'");
var query = new google.visualization.Query(
'http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
Thank you to Dr. Molle for helping me pinpoint the issue.