Hi everyone i have an issue i want to make an autocomplete in jQuery and i have an json file in the same folder here is the code
var auto = $(function() {
$("#recherche").autocomplete({
source: "code.json",
minLength: 1,
})
});
and here is a sample of the json file :
{
"__type": "Featsee",
"feat": [
{
"id": {
"ID_THING": 1111
},
"properties": {
"CODTHING": "405136",
"TIONNEMENT": "VRAC"
}
}
]
}
the html code is the following :
<label for="tags" >Recherche lot : <input id="recherche" type="text" class="searchable" placeholder="rechercher ici"/></label>
the plugin is the following :
<script src="libs/jquery/js/jquery-2.1.1.min.js"></script>
<script src="libs/jquery/js/jquery-ui.js"></script>
the json file is correct but i want the autocomplete to be jus for CODTHING do you see how can i do that ??
and CODTHING is the code a want it to be the autocomplete
The JSON you provide to jQuery UI's autocomplete needs to be an array of objects with label and value properties or an array of strings.
http://api.jqueryui.com/autocomplete/#option-source
The rest of the answer I can only guess due to the brevity of the JSON you gave us.
If lots.json is just a plain JS file you can look through the `feat" array in your JSON data and return strings based on that.
(function($){
var lots = $.get('lots.json');
lots.done(function (results) {
var data = $.map(results.feat, function (lot) {
return lot.properties.CODTHING;
});
$("#recherche").autocomplete({
source: data
});
});
}(jQuery));
If lots.json is really a server side file that you can feed some data to and filter it there you can use a function like documented on this answer:
JQuery autocomplete source from another js function
Related
I am trying to use mustache and jQuery to import a JSON and create a html template.
I have followed tutorials to get to this point, but nothing shows in the browser and there are no error messages.
HTML
div id="repeatcontent"/div
Script: I import mustache, greate the template script and then use javascript to import the JSON.
<script src=mustache.min.js></script>
<script id="tutorials" type="text/template">
{{#a_tutorials}}
<p>{{title}}<p/>
{{/a_tutorials}}
</script>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON('audacity_tutorials.JSON', function(data) {
var template1 = $('#tutorials').html();
var html = Mustache.to_html(template1, data);
$('#repeatcontent').html(html);
});
});
</script>
JSON
{
"A_tutorials" : [
{
"Title" : "Binary",
},
{
"Title" : "Clipping",
}
]
}
There are no error messages, and the screen is completely blank. I have also used console.log to try and figure it out but it returns all the data I ask it for.
Your mistakes are:
A_tutorials in json file while you use a_tutorials in js
Title in json file while you use title
your json file is incorrect. For instance this line
"Title" : "Binary",
must be changed with:
"Title" : "Binary"
You may test json online by yourself.
Mustache is case sensitive.
// $.getJSON('z.json', function(data) {
var data = {
"A_tutorials" : [
{
"Title" : "Binary"
},
{
"Title" : "Clipping"
}
]
};
var template1 = $('#tutorials').html();
var html = Mustache.to_html(template1, data);
$('#repeatcontent').html(html);
// });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script id="tutorials" type="text/template">
{{#A_tutorials}}
<p>{{Title}}<p/>
{{/A_tutorials}}
</script>
<div id="repeatcontent"></div>
I have the following code inside a view, but I'm trying to use a table instead of the array 'tags' to access the data for the autocomplete function. Can I do that because I read somewhere that the view should not interact with the model? If I can, can someone guide me how to? Please I need help! Thank you.
<script id="source" language="javascript" type="text/javascript">
$(function() {
var tags = [
"THE PAS",
"THOMPSON",
"TREHERNE",
"VIRDEN",
];
$( "#tagOrig" ).autocomplete({
source: function (request, response) {
var matches = $.map(tags, function (tags) {
if ( tags.toUpperCase().indexOf(request.term.toUpperCase()) === 0 ) {
return tags;
}
});
response(matches);
}
});
</script>
The controller should do it. Pick up the data from the model, set a variable and set it into the view. Or just use Ajax to fetch the data, while you render the view.
I am following the Using Kendo UI with MVC4 WebAPI OData and EF article. After installing KendoUI and making sure all references are set, I type in three characters, and get the following error:
Uncaught TypeError: Object # has no method 'slice'
Root of the Problem
To save reading through the updates: Through debugging I found that the issue is that JS is expecting to parse an array, where it isn't available in the data - at the root. In the data hierarchy, it's one level in.
Original Problem
I cleaned up kendo.web.min.js and the error is occuring around line 3498:
success: function (n) {
var i = this,
r = i.options;
return i.trigger(wt, {
response: n,
type: "read"
}), n = i.reader.parse(n), i._handleCustomErrors(n) ? (i._dequeueRequest(), t) : (i._pristine = et(n) ? e.extend(!0, {}, n) : n.slice ? n.slice(0) : n, i._total = i.reader.total(n), i._aggregate && r.serverAggregates && (i._aggregateResult = i.reader.aggregates(n)), n = i._readData(n), i._pristineData = n.slice(0), i._data = i._observe(n), i._addRange(i._data), i._process(i._data), i._dequeueRequest(), t)
The Kendo UI widgets are loading just fine as well as the css:
<link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.default.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/kendo/kendo.web.min.js"></script>
<script src="~/Scripts/kendo/kendo.aspnetmvc.min.js"></script>
<script src="~/Scripts/appScripts.js"></script>
And I am seeing the same error both with using the Razor MVC helper/extension:
#(Html.Kendo().AutoComplete()
.Name("userAutoComplete") // specifies the "id" attribute of the widget
.DataTextField("USERNAME")
.DataSource(source =>
{
source.Read(read =>
{
read.Url("/api/user");
})
.ServerFiltering(true); // if true, the DataSource will not filter the data on the client
}
)
)
and through directly through JS:
/// <reference path="kendo/kendo.aspnetmvc.min.js" />
/// <reference path="kendo/kendo.core.min.js" />
/// <reference path="kendo/kendo.autocomplete.min.js" />
/// <reference path="kendo/kendo.web.min.js" />
$(document).ready(function () {
// load up KendoUI
// gets data from /api/user
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/user"
}
}
});
$("#userSearch").kendoAutoComplete({
dataSource: dataSource,
dataTextField: "USERNAME",
minLength: 3
});
$("#userSearch").on('input', function () {
console.log($("#userSearch").val());
});
}); // $(document).ready()
I'm sure this is something simple that I may be missing. I have tried both with the web and all js files.
Any assistance would be appreciated.
-- UPDATE --
The only real html missing from that content is the <input id="userAutoComplete" />
I created a brand new solution and a very simple view, based on one of the Kendo UI examples that gets JSON data from http://api.geonames.org, and getting the same error.
I thought that using the newest JS library (//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js may have been causing a problem so I tried the 1.7 lib. Same issue:
#using Kendo.Mvc.UI
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="#Url.Content("~/Content/kendo.common.min.css")">
<link rel="stylesheet" href="#Url.Content("~/Content/kendo.default.min.css")">
<link rel="stylesheet" href="#Url.Content("~/Content/kendo.dataviz.min.css")">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="#Url.Content("~/Scripts/kendo.web.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo.dataviz.min.js")"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#autoComplete").kendoAutoComplete({
minLength: 6,
dataTextField: "title",
filter: "contains",
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: "http://api.geonames.org/wikipediaSearchJSON",
data: {
q: function () {
return $("#autoComplete").data("kendoAutoComplete").value();
},
maxRows: 10,
username: "demo"
}
}
},
schema: {
data: "geonames"
}
}),
change: function () {
this.dataSource.read();
}
})
});
</script>
</head>
<body>
<div>
<input id="autoComplete"/>
</div>
</body>
</html>
-- UPDATE --
Using the code above, I went back and tried it again - it worked fine. After trying several more times, I experienced the same issue. This was due to the valid JSON data changing to the following:
{"status":{"message":"the daily limit of 30000 credits for demo has been exceeded. Please use an application specific account. Do not use the demo account for your application.","value":18}}
... which lead me to look at the formatting of the data coming from my API (looking at it in Fiddler:
Instead of:
JSON
---{... data...
it's
JSON
---$id=1
---$values
------{}
---------$id=2
---------CREATEDATETIME...
---------EMAIL=email#email.com
---------GROUPS
------------$id=...
------------$id=...
---------USERNAME=someusername
------{}
---------$id=4
.
.
.
So the error is caused by the array not being accessible where the it's expected - instead of the root, it's one level deep.
How do I get data binding to the one-level-deep rather than the root of the JSON object?
Thanks.
I had the same error with a ComboBox that I was using as an autocomplete. In my controller, the return statement was
return Json(model.ToDataSourceResult(dataSourceRequest), JsonRequestBehavior.AllowGet)
which I changed to
return Json(model, JsonRequestBehavior.AllowGet)
This provided the array at the root level instead of one level deep for me.
The solution for this was to traverse the data hierarchy by describing the result format.
Since the array is contained in $values, I used the following data source/schema definition:
// gets data from /api/user
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/user"
}
},
schema: { // describe the result format
data: function(data) { // the data which the data source will be bound to is in the values field
console.log(data.$values);
return data.$values;
}
}
});
One thing that would be nice is to be able to add a data schema type in the Razor helper - which doesn't seem to be supported at this time.
Thus, the following still would not work:
#(Html.Kendo().AutoComplete()
.Name("userAutoComplete") // specifies the "id" attribute of the widget
.Filter("startswith")
.Placeholder("Type user name...")
.DataTextField("USERNAME")
.DataSource(source =>
{
source:
source.Read(read =>
{
read.Url("/api/user");
})
.ServerFiltering(true); // if true, the DataSource will not filter the data on the client
}
)
)
This worked for me:
var dataSource = new kendo.data.DataSource({
transport: {
read:
{
url: "api/dashboard"
}
},
schema: {
**data: function (data)
{
return [data];
}**
}
});
My response wasn't an array, i was returning from the server a response object like this:
{"Field1":0,"Field2":0,"Field3":0}
thanks "brittongr"...that worked for me too. but in my case it is not right, I was building a chart, a chart need an array of course, so instead of altering the schema by converting my Json data to an array I just returned from my action a list having one element. Something like this below.
Random rand = new Random();
int numIterations = 0;
numIterations = rand.Next(1, 1200);
List aux = new List<graphicDataItem>();
aux.Add(new graphicDataItem { ColumnTotal = 1200, ColumnActives = numIterations, ColumnInactives = 1200 - numIterations, ColumnApprovedByMembers = 250, ColumnApprovedByAssoc = 300, XAxisData = DateTime.Now.Year });
return Json(aux, JsonRequestBehavior.AllowGet);
I have "graphicDataItem" type defined on my Entities folder, but is easy to get by looking at the way it is instantiated within the code.
i change for this, and this work for me:
#(Html.Kendo().AutoComplete()
.Name("productAutoComplete") //The name of the autocomplete is mandatory. It specifies the "id" attribute of the widget.
.DataTextField("myfield") //Specifies which property of the Product to be used by the autocomplete.
.DataSource(source =>
{
source.Custom()
.Type("aspnetmvc-ajax")
.Transport(transport=>
{
transport.Read("MyAction", "Control");
})
.Schema(schema=>schema.Data("Data").Total("Total"))
.ServerFiltering(true); //If true the DataSource will not filter the data on the client.
})
)
I am trying to create a drop-down list with JSON data stored in a txt file. My main issue is reading the data (I saved the data which I retrieved from an API into a txt file because it is a large amount of data and I wanted to save time by not having to make a request to the API every time the data is needed)
*As a side note, not entirely sure that getting the data in the form of JSON is the best option. Other options supported by this API are: CSV, JSONP, serialized PHP, and XML (if one of those would be easier)
Here is the form of the JSON data (stored as a string in classes.txt):
{
"classes": [
{
"cat_num": "0001",
"field": "OEB",
"number": "363",
"title": "Plant Diversity and Evolution"
},
{
"cat_num": "0002",
"term": "FALL",
"bracketed": false,
"field": "OEB",
"number": "364",
"title": "Ecological Physiology of Microbes"
}
]
}
Here is my code for trying to populate the dropdown menu with this txt file thus far
$(document).ready(function(){
var url = "classes.txt";
$.get(url, function(data) {
var obj = eval('(' + data + ')');
$.each(obj, function(i, option){
$('#department').append($('<option/>')
.attr("value",option.cat_num)
.text(option.field));
);
);
});
I've also realized that I need to somehow make sure that "field" is unique in my drop down (i.e. if 3 classes are of the field "OEB", I just want OEB to appear in my drop down once, not 3 times)
Thanks in advance for any help you might be able to provide!
here this could help
$(document).ready(function(){
$.getJSON('classes.txt', function(data) {
$.each(data, function(i, option){
console.log(option.title)
$('#department').append($('<option/>').attr("value",option.cat_num).text(option.title));
});
});
});
HI,
I'm looking at SlickGrid and I can see example on how to edit the cell, however do I save these changes. I have yet to find an example that tells me how to do this.
The trick to saving the SlickGrid is to realise that the grid will update the array of data that you supplied when creating the grid as the cells are edited.
The way I then save that is to include a form with a submit button and a hidden field below the grid. I trap the submit event and use the JSON plugin to serialise the array and place it in the hidden field. On the server side you'll receive a JSON string which you can deserialise, loop through and write to the database.
Assuming your array of data is called "data" like the samples, the following should work for you:
<form action="?" method="POST">
<input type="submit" value="Save">
<input type="hidden" name="data" value="">
</form>
<script>
$(function() {
$("form").submit(
function() {
$("input[name='data']").val($.JSON.encode(data));
}
);
});
</script>
For completeness, a minimal example demonstrating the usage of onCellChange, referred to in Jim OHalloran's post.
For more information, and to see all events that can be utilized similarly to onCellChange, see comments at the beginning of the SlickGrid source.
<head>
<!-- boilerplate omitted ... -->
<script type="text/javascript">
var grid;
var options = {
enableCellNavigation: true,
enableColumnReorder: false,
autoEdit: false,
editable: true,
};
var columns = [
{id: "item_key", name: "Key", field: "item_key" },
{id: "value", name: "value", field: "value", editor: LongTextCellEditor }
];
var data = [
{item_key: "item1", value: "val1"},
{item_key: "item2", value: "val2"},
];
$(document).ready(function () {
grid = new Slick.Grid($("#myGrid"), data, columns, options);
//Earlier code for earlier version of slickgrid
// grid.onCellChange = function (currentRow, currentCell, item) {
// alert(currentRow+":"+currentCell+"> key="+item['item_key']+", value="+item['value']);
//Updated code as per comment.
grid.onCellChange.subscribe(function (e,args) {
console.log(args);
});
};
});
</script>
</head>
<body>
<div id="myGrid" style="height:10em;"> </div>
</body>
While I'm personally using the JSON serialize and submit in a hidden field approach from my previous answer another approach could be to trap the onCellChange event fired by SlickGrid after a cell value has changed and make an Ajax call to the server to save the changed value. This will result in lots of small Ajax requests to the server (which may increase load) but updates the server as soon as changes are made.