I am working in an Arduino device in which I need to retrieve public data from a Google spreadsheet.
So far I have published the spreadsheet and I can access it at https://spreadsheets.google.com/feeds/cells/1uphj-Oq3Xt6ImHJdezAUEX4u41_w1NNMlZU4Flr6lc4/1/public/full?range=a11:c12 which can be opened in the browser or in the Arduino (I am working with a SIM800 module so it can work with HTTPS without problems).
The output of this is xml items like (I am not very into XML):
<entry>
<id>https://spreadsheets.google.com/feeds/cells/1uphj-Oq3Xt6ImHJdezAUEX4u41_w1NNMlZU4Flr6lc4/1/public/full/R12C11</id>
<updated>2018-04-30T05:31:51.590Z</updated>
<category scheme='http://schemas.google.com/spreadsheets/2006' term='http://schemas.google.com/spreadsheets/2006#cell'/>
<title type='text'>K12</title>
<content type='text'>12345</content>
<link rel='self' type='application/atom+xml' href='https://spreadsheets.google.com/feeds/cells/1uphj-Oq3Xt6ImHJdezAUEX4u41_w1NNMlZU4Flr6lc4/1/public/full/R12C11'/>
<gs:cell row='12' col='11' inputValue='12345' numericValue='12345.0'>12345</gs:cell>
One of them for every cell requested.
The thing is that here I can see too much unneeded/redundant information, for example, in "title" and "content" I get the same information as in "gs:cell", "updated" may actually be useful but "link" and "category" are completely disposable to me.
Since I will be working with an Arduino and a sim800 module (which cannot handle high data transfer speeds) making this as simple as possible will be great.
Probably there is a way to request this simplified in the HTTP call, maybe adding some parameters or changing "full" to something else.
Any help will be greatly appreciated
You want to retrieve the simpler response from range=a11:c12 of the spreadsheet ID 1uphj-Oq3Xt6ImHJdezAUEX4u41_w1NNMlZU4Flr6lc4. If my understanding is correct, how about retrieving values using Query Language? I think that there may be several methods. So please think of this as one of them.
Pattern 1: Retrieve response as HTML
https://docs.google.com/spreadsheets/d/1uphj-Oq3Xt6ImHJdezAUEX4u41_w1NNMlZU4Flr6lc4/gviz/tq?range=a11:c12&tqx=out:html
Result :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A11:C12</title>
</head>
<body>
<table border="1" cellpadding="2" cellspacing="0">
<tr style="font-weight: bold; background-color: #aaa;">
<td></td><td></td><td></td>
</tr>
<tr style="background-color: #f0f0f0">
<td>DataInCellA11</td><td>DataInCellB11</td><td>DataInCellC11</td>
</tr>
<tr style="background-color: #ffffff">
<td>DataInCellA12</td><td>DataInCellB12</td><td>DataInCellC12</td>
</tr>
</table>
</body>
</html>
Pattern 2: Retrieve response as CSV
https://docs.google.com/spreadsheets/d/1uphj-Oq3Xt6ImHJdezAUEX4u41_w1NNMlZU4Flr6lc4/gviz/tq?range=a11:c12&tqx=out:csv
Result :
"DataInCellA11","DataInCellB11","DataInCellC11"
"DataInCellA12","DataInCellB12","DataInCellC12"
Note :
In this case, the response cannot be retrieved as the xml format. There is no tqx=out:xml.
As a sample, you can retrieve values using curl and browser from above URLs.
If you want to retrieve values from other sheets, please use the query of gid. In this sample, gid=od6 which means 1st sheet is omitted.
Reference :
Query Language Reference
If I misunderstand your question, I'm sorry.
I am trying to work with jQuery's Datatable JS for my project from this link.
I downloaded the complete library from the same source. All the examples given in the package seem to work fine, but when I try to incorporate them in my WebForms,the CSS,JS do not work at all.
Here is what I have done :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="myTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<!-- table body -->
</tbody>
</table>
</div>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#myTable').DataTable();
});
</script>
</form>
</body>
</html>
My file structure for the JS and CSS in my Solution looks as follows :
I have added all the necessary JS and CSS references as shown in the manual. Still the rendering isn't as expected. There is no CSS and even the JS doesn't work.
Also in the console i get the following errors:
ReferenceError: jQuery is not defined
TypeError: $(...).DataTable is not a function
I have still not bound any dynamic data here (like within a repeater or so) still it is not working.
Can someone please guide me in the right direction for this problem ?
CAUSE
There could be multiple reasons for this error.
jQuery DataTables library is missing.
jQuery library is loaded after jQuery DataTables.
Multiple versions of jQuery library is loaded.
SOLUTION
Include only one version of jQuery library version 1.7 or newer before jQuery DataTables.
For example:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
See jQuery DataTables: Common JavaScript console errors for more information on this and other common console errors.
This worked for me. But make sure to load the jquery.js before the preferred dataTable.js file. Cheers!
<script type="text/javascript" src="~/Scripts/jquery.js"></script>
<script type="text/javascript" src="~/Scripts/data-table/jquery.dataTables.js"></script>
<script>$(document).ready(function () {
$.noConflict();
var table = $('# your selector').DataTable();
});</script>
I got this error because I found out that I referenced jQuery twice.
The first time: on the master page (_Layout.cshtml) in ASP.NET MVC, and then again on one current page so I commented out the one on the master page.
If you are using ASP.NET MVC this snippet could help you
#*#Scripts.Render("~/bundles/jquery")*#//comment this line
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
and in the current page I added these lines
<script src="~/scripts/jquery-1.10.2.js"></script>
<!-- #region datatables files -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<!-- #endregion -->
Hope this help you even if don't use ASP.NET MVC
if some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version.
Sometimes it could be issue with older version (or not stable) of JQuery files
Solution use $.noConflict();
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
$('#myTable').DataTable();
});
// Code that uses other library's $ can follow here.
</script>
Here is the complete set of JS and CSS required for the export table plugin to work perfectly.
Hope it will save your time
<!--Import jQuery before export.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--Data Table-->
<script type="text/javascript" src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src=" https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<!--Export table buttons-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js" ></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>
<!--Export table button CSS-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
javascript to add export buttons on the table with id = tbl
$('#tbl').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
Result :-
Same error occurs when working with DataTables in a Laravel project. Even if the following solutions are tried, the error still remains:
making sure jQuery is included
include jQuery before including the DataTables
making sure only one version of jQuery is added
In order to remove the error, after making sure the above conditions are fulfilled, add "defer" to the tag which includes the DataTables. For example,
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js" defer></script>
There can be two reasons for that error:
First
You are loding jQuery.DataTables.js before jquery.js so for that :-
You need to load jQuery.js before you load jQuery.DataTables.js
Second
You are using two versions of jQuery.js on the same page so for that :-
Try to use the higher version and make sure both links have same version of jQuery
I tried many things but my solution was adding "defer" after html script that you included datatables.
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js" defer></script>
Honestly, this took hours to get this fixed. Finally only one thing worked a reconfirmation to solution provided by "Basheer AL-MOMANI". Which is just putting statement
#RenderSection("scripts", required: false)
within _Layout.cshtml file after all <script></script> elements and also commenting the jquery script in the same file. Secondly, I had to add
$.noConflict();
within jquery function call at another *.cshtml file as:
$(document).readyfunction () {
$.noConflict();
$("#example1").DataTable();
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
});
});
I know its late
Buy can help someone
This could also happen if you don't add $('#myTable').DataTable(); inside the document.ready
So instead of this
$('#myTable').DataTable();
Try This
$(document).ready(function() {
$('#myTable').DataTable();
});
I have Added defer to the data table jquery library reference. Now it is working for me.
<script src="~/Scripts/jquery.dataTables.min.js" defer></script>
I ran into this error also. For whatever reason I had originally coded
var table = $('#myTable').DataTable({
"paging": false,
"order": [[ 4, "asc" ]]
});
This would not throw the error sometimes and other times it would. By changing code to
$('#myTable').DataTable({
"paging": false,
"order": [[ 4, "asc" ]]
});
Error appears to have stopped
In my case the solution was to delete cookies from the browser.
Having the same issue in Flask, I had already a template that loaded JQuery, Popper and Bootstrap. I was extending that template into other template that I was using as a base to load the page that had the table.
For some reason in Flask apparently the files in the outer template load before the files in the tables above in the hierarchy (the ones you are extending) so JQuery was loading before the DataTables files causing the issue.
I had to create another template where I run all my imports of JS CDNs in the same place, that solved the issue.
Sometimes it happens that the script (initializing of datatable) is embedded in a general page template, so if one of the pages that actually does not have any table and you did not import the jquery related files for datatable, you face this error, since the general initialization still is looking for that. (This was in my case)
Solution: Is to wrap the initialization of datatable inside a codition that check presence of the library before that:
Here is practical example of it.
if (typeof jQuery.fn.DataTable != "undefined"){
$('#accordionExample table').DataTable( {
"pageLength": 5,
"info": false,
"order": [[ 1, "desc" ]]
} );
}
This may also happen if you write Datatable instead of DataTable. (DataTable T must be capital). this is a beginner's mistake.
$(document).ready(function() {
$('#category-table').DataTable({
// Your Code
});
if you are sure that you aligned your scripts as described above, please make sure you DataTable word case is correct.
Before
$(document).ready(function() {
$('#myTable').Datatable();
});
After
$(document).ready(function() {
$('#myTable').DataTable();
});
small t is creating problem, when I changed this t to T it worked like a charm.
I have code written to autocomplete a text input box from a mysql database. I am currently in the process of mitigating the setup to jQuery Mobile but I am having substantial issues finding out how to write a modified autocomplete. My original html is below (heavily simplified)
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<script>
$(function() {
$( "#get_ingredient_1" ).autocomplete({source: 'search.php'});
});
</script>
<div class="ui-widget">
<input id="get_ingredient_1" name="ingredient_type" style = "width:200px">
</div>
</html>
the search.php is shown below.
<?php
//database configuration
include("db_connect.php");
//get search term
$searchTerm = $_GET['term'];
//get matched data from skills table
$category_query = mysqli_query($dbconnection, "SELECT DISTINCT ingredient FROM ingredients WHERE ingredient LIKE '%".$searchTerm."%' ORDER BY ingredient ASC");
//while ($row = $query->fetch_assoc()) {
while($row = mysqli_fetch_assoc($category_query)){
$data[] = $row['ingredient'];
}
//return json data
echo json_encode($data);
?>
this outputs in the format:
["Adzuki beans","Alfalfa","Allspice","Almond meal"]
ive tried to comment it accordingly. Essentially this generates a text input bot and when you start typing will try and guess what ingredient you are wanting.
unfortunatly when I alter the jquery files to:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
It no longer autocompletes. Ive read through dozens of examples but I cant find a basic 1 input autocomplete option that I can adapt.
Can anyone shed some light on how to alter this short piece of code to autocomplete, so I can study and adapt it to its full functionality.
Ive looked at all the jquery-mobile examples but have found them lacking in the details I need here, specifically the "remote listview" as it has to populate from a file generated from a mysql source like the search.php shown above.
hope someone can help translate this to jquery mobile use.
I am fairly new to both MVC and JQGrid. I am having an issue with getting AutoComplete or DatePicker to work with either editing or searching.
I'm assuming (hoping) that one solution will fix both issues since I am getting a similar error for both, so for the time being I've stripped it down to just AutoComlete to simplify things.
I've been following the example at http://www.trirand.net/aspnetmvc/grid/performancelinqsearch
to get AutoComplete to work in the search toolbar above the columns.
It seems that no matter what I try, AutoComplete doesn't work and I get this error in Chrome's dev console: "Uncaught ReferenceError: AutoComplete_acid is not define".
Here is my view. I've disabled the master layout in case that was causing any conflicts. I have tried using the version of jQuery that came with the jqGrid download instead of the latest. I'm not getting the alert about AutoComplete missing or a Failed to load resource that happens when I exclude the AutoComplete script.
#model MRA_Survey_Manager.Models.ESLogModel
#using Trirand.Web.Mvc
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>MRA Survey Manager</title>
<link rel="stylesheet" type="text/css" href="~/Content/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="~/Content/jquery.jqGrid/ui.jqgrid.css" />
<script type="text/javascript" src="~/Scripts/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqGrid/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="~/Scripts/jqGrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqGrid/jquery.jqAutoComplete.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqGrid/CustomValidators.js"></script>
</head>
<body>
<div style="Width:100%">
#Html.Trirand().JQGrid(Model.ESLogGrid, "ESLogGrid")
#{
Html.Trirand().JQAutoComplete(
new JQAutoComplete
{
DisplayMode = AutoCompleteDisplayMode.ControlEditor,
DataField = "Carrier",
DataUrl = Url.Action("AutoCompleteCarrier", "ESLogGrid")
}, "AutoComplete");
}
</div>
</body>
</html>
And in my controller I have:
public JsonResult AutoCompleteCarrier(string term)
{
JQAutoComplete autoComp = new JQAutoComplete();
autoComp.DataField = "Carrier";
autoComp.AutoCompleteMode = AutoCompleteMode.BeginsWith;
autoComp.DataSource = from survey in db.MRA_SurveyLog
select survey;
return autoComp.DataBind();
}
And within my grid setup:
JQGridColumn column = logGrid.Columns.Find(c => c.DataField == "Carrier");
column.SearchType = SearchType.AutoComplete;
column.Searchable = true;
column.DataType = typeof(string);
column.SearchControlID = "AutoComplete";
column.SearchToolBarOperation = SearchOperation.BeginsWith;
I have checked the three things listed at http://www.trirand.net/forum/default.aspx?g=posts&t=2902
I have been struggling with this for quite a while. Any help would be greatly appreciated.
I finally figured it out. It turned out to be an issue with the Razor syntax in the view. For some reason defining the AutoComplete object in a multi-statement block caused that error.
Changing it to a single-statement fixed the issue.
#Html.Trirand().JQAutoComplete(new JQAutoComplete{DisplayMode = AutoCompleteDisplayMode.ControlEditor, DataField = "Carrier", DataUrl = Url.Action("AutoCompleteCarrier", "ESLogGrid")}, "AutoComplete")
Edit: After resolving another recent issue I've had with Razor syntax I wanted to come back and update this solution. The issue was with my understanding of the syntax and not jqGrid itself. When you have curly braces within a multi-statement block you apparently have to wrap that section in text tags. So the following should also work:
#{
<text>
#Html.Trirand().JQAutoComplete(
new JQAutoComplete
{
DisplayMode = AutoCompleteDisplayMode.ControlEditor,
DataField = "Carrier",
DataUrl = Url.Action("AutoCompleteCarrier", "ESLogGrid")
}, "AutoComplete")
</text>
}
More Information at: https://stackoverflow.com/a/6099659/1451531
I decided to use jQuery UI for my autocomplete opposed to a plugin because I read that the plugins are deprecated. My overall goal is to have an autocomplete search bar that hits my database and returns users suggestions of city/state or zipcodes in a fashion similar to google. As of now I am not even sure that the .autocomplete function is being called. I scratched everything I had and decided to start with the basics. I downloaded the most recent version of jQuery UI from http://jqueryui.com/download and am trying to get the example that they use here http://jqueryui.com/demos/autocomplete/ to work. All the scripts that I have included seem to be connected at least linked through Dreamworks so I am fairly certain that the paths I have included are correct. The CSS and Javascripts that I have included are unaltered straight from the download. Below is my HTML code and my backend PHP code that is returning JSon formated data. Please help me. Maybe I need to include a function that deals with the JSon returned data but I am trying to follow the example although I see that they used a local array.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQueryUI Demo</title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" type="text/css" />
<script type="text/javascript" src ="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src ="js/jquery-ui-1.8.17.custom.min.js"></script>
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#tags").autocomplete({
source: "search_me.php"
});
});
</script>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
</div><!-- End demo-description -->
</body>
</html>
Below the PHP part.
<?php
include 'fh.inc.db.php';
$db = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASSWORD) or
die ('Unable to connect. Check your connection parameters.');
mysql_select_db(MYSQL_DB, $db) or die(mysql_error($db));
$location = htmlspecialchars(trim($_GET['term'])); //gets the location of the search
$return_arr = array();
if(is_numeric($location)) {
$query = "SELECT
zipcode_id
FROM
user_zipcode
WHERE
zipcode_id REGEXP '^$location'
ORDER BY zipcode_id DESC LIMIT 10";
$result = mysql_query($query, $db) or die(mysql_error($db));
while($row = mysql_fetch_assoc($result)) {
extract($row);
$row_array['zipcode_id'] = $zipcode_id;
array_push($return_arr, $row_array);
}
}
mysql_close($db);
echo json_encode($return_arr);
?>
Thanks for the ideas. Here is an update.
I checked the xhr using firebug and made sure that it is responding thanks for that tip. also the above php code I hadn't initialized $return_arr so i took care of that. Also thanks for the clarification of the js required or rather not required. Now when I type in a zipcode a little box about a centimeter shows up underneath it but I can't see if anything is in there, I would guess not. I went to my php page and set it up to manually set the variable to "9408" and loaded the php page directly through my browser to see what it returned. This is what it returned.
[{"zipcode_id":"94089"},{"zipcode_id":"94088"},{"zipcode_id":"94087"},{"zipcode_id":"94086"},{"zipcode_id":"94085"},{"zipcode_id":"94083"},{"zipcode_id":"94080"}]
I then went to a JSON code validator at this url http://jsonformatter.curiousconcept.com/ at it informed me that my code is in fact returning JSON formatted data. Anymore suggestions to help me troubleshoot the problem would be terrific.
Wow after more research I stumbled across the answer on someone another post.
jquery autocomplete not working with JSON data
Pretty much the JSON returned data must contain Label or Value or both. Switched the zipcode_id to value in my $row_array and... boom goes the dynamite!
Your scripts (js files) references are not correct, should only be:
<!-- the jquery library -->
<script type="text/javascript" src ="js/jquery-1.7.1.min.js"></script>
<!-- the full compressed and minified jquery UI library -->
<script type="text/javascript" src ="js/jquery-ui-1.8.17.custom.min.js"></script>
The files "jquery.ui.core.js", "jquery.ui.widget.js" and "jquery.ui.position.js" are the separated development files, the jquery ui library is splitted into modules.
The file "jquery-ui-1.8.17.custom.min.js" contains them all, compressed and minified !
Concerning the data source, as stated in the "Overview" section of the Autocomplete documentation: when using a an URL, it must return json data, either of the form of:
an simple array of strings: ['string1', 'string2', ...]
or an array of objects with label (and a value - optionnal) property [{ label: "My Value 1", Value: "AA" }, ...]
I'm really not familiar with PHP so just make sure your php script returns one of those :-)