how to get value from json file using jquery autocomplete - jquery-ui

This is my jquery code
$('.typeahead', this).autocomplete({
source: function(request, response) {
$.ajax({
url: 'includes/stations.json',
dataType: 'json',
data: request,
success: function(data) {
response($.map(data, function(item, i) {
return {
label: item.name,
value: item.code
}
}));
},
});
},
minLength: 3
});
My Json File is
[
{
"code": "9BP3",
"name": "9Bp No3"
},
{
"code": "AA",
"name": "Ataria"
},{
"code": "BILA",
"name": "Bheslana"
},
{
"code": "BILD",
"name": "Bildi"
},{
"code": "HRI",
"name": "Hardoi"
},
{
"code": "HRM",
"name": "Hadmadiya"
}
]
When i typing any three letter its returns whole json file values

q: request.term this is the string for filter returned values from stations.json. You must pass variable like this to filter results. stations.json must be dynamically generated file like php with json header. q is $_GET parameter and must be parsed. Try to change the code like this:
$.ajax({
url: "includes/stations.json",
dataType: "json",
data: {
q: request.term // here is the string for filter returned values from stations.json. You must pass variable like this to filter results. stations.json must be dynamically generated file like php with json header. q is $_GET parameter and must be parsed.
},
success: function(data) {
response(
$.map(data, function(item, i) {
return {
label: item.name,
value: item.code
}
})
);
}
});
},
minLength: 3,

Related

Graph API for SharePoint: Update / Create ListItems with Hyperlink / Picture fields

How do I shape the payload to enable a post or patch for fields that are Hyperlink/Picture?
Getting those fields is straight forward: they come as "fieldName" : { "Description":"asdf", "Url":"asdf.com"}
This works in flow using the Send HTTP Request to SharePoint block, but I can't figure out how to make this work using the graph api. Do i need to set the odata type explicitly (SP.FieldUrlValue doesn't work) and what is it for Hyperlinks?
Somethink like this: {"fieldName#odata.type", "Complex" } - we use this with Collection(Edm.String) for multiple lookup fields for instance.
Kind regards,
Gregor
Graph API does not support create this kind of column.
https://learn.microsoft.com/en-us/graph/api/resources/columndefinition?view=graph-rest-1.0
You could try to use rest api.
Create HyperLink field:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function (){
CreateListItemWithDetails("test3")
})
function CreateListItemWithDetails(listName) {
var itemType = GetItemTypeForListName(listName);
var item = {
"__metadata": { "type": itemType },
"Title": "test",
'link':
{
'__metadata': { 'type': 'SP.FieldUrlValue' },
'Description': 'Google',
'Url': 'http://google.com'
},
};
$.ajax({
url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
type: "POST",
contentType: "application/json;odata=verbose",
data: JSON.stringify(item),
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function (data) {
console.log(data);
},
error: function (data) {
console.log(data);
}
});
}
// Get List Item Type metadata
function GetItemTypeForListName(name) {
return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
}
</script>
Update Hyperlink column:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function (){
CreateListItemWithDetails("test3")
})
function CreateListItemWithDetails(listName) {
var itemType = GetItemTypeForListName(listName);
var item = {
"__metadata": { "type": itemType },
"Title": "test",
'link':
{
'__metadata': { 'type': 'SP.FieldUrlValue' },
'Description': 'Google1',
'Url': 'http://google.com'
},
};
$.ajax({
url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items(41)",
type: "POST",
contentType: "application/json;odata=verbose",
data: JSON.stringify(item),
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "MERGE",
"If-Match": "*"
},
success: function (data) {
console.log(data);
},
error: function (data) {
console.log(data);
}
});
}
// Get List Item Type metadata
function GetItemTypeForListName(name) {
return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
}
</script>

Extjs 6.7 TreeList load data infinite from remote store

I try to fill a treelist with remote data via a ajax proxy but the treelist shows only the first level and try to reload the sub levels even though the json response contain a complete tree structure. Fiddle link: https://fiddle.sencha.com/#view/editor&fiddle/33u9
When i try to expand the node 'SUB a' (or set the expanded property to true) the store trys to reload the node.
Why is the tree structure from the json response not honored?
Thanks in Advance.
The backend response looks like:
{
"data": {
"root": [
{
"leaf": true,
"text": "Server"
},
{
"leaf": true,
"text": "Storage"
},
{
"text": "SUB a"
"children": [
{
"leaf": true,
"text": "Modul A - 1"
},
{
"leaf": true,
"text": "Modul A - 2"
}
],
},
{
"leaf": true,
"text": "Modul B"
}
]
},
"success": true
}
The used reader config is
reader: {
type: 'json',
rootProperty: 'data.root',
successProperty: 'data.success',
},
After playing around i use the following workaround:
getNavigation: function() {
var me = this,
tree = me.getView().down('navigationtree'),
store = tree.getStore(),
node = store.getRoot();
Ext.Ajax.request({
url: '/getnav',
method: 'POST',
success: function(response) {
var obj = Ext.decode(response.responseText),
childs = obj.data.root;
tree.suspendEvents();
node.removeAll();
childs.forEach(function(item) {
node.appendChild(item);
});
tree.resumeEvents();
},
failure: function(response) {
//debugger;
console.log('server-side failure with status code ' + response.status);
}
}).then(function() {
//debugger;
}
);
}
The funny things is that only the first level of the tree has to be added all following sub-levels are added automaticaly.

I am having trouble with DataTable not working (ajax doesn't fire off)

I am following this tutorial:
https://gist.github.com/ChinhP/9b4dc1df1b12637b99a420aa268ae32b
I have a problem where the ajax won't fire. Any suggestions?
I am trying to get a table with a previous, next, first and last button.
var data = { "number": 0, "currentPosition": 1 };
console.log(JSON.stringify(data));
//var output = "";
/*$.ajax('/Companies/GetData', {
datatype: 'json',
contentType: 'application/json',
type: 'post',
data: JSON.stringify({ dataTableParameters: data }),
success: function (response) {
output = response;
}
});*/
$(document).ready(function () {
$('#CompanyTable').dataTable(
{
"sPaginationType": "full",
processing: true,
bserverSide: true,
ajax: {
"url": "../Companies/GetData",
"type": "POST",
"contentType": "application/json",
data: function (d) {
console.log('enter');
// note: d is created by datatable, the structure of d is
the same with DataTableParameters model above
console.log(JSON.stringify(d));
return JSON.stringify(d);
},
success: function (response)
{
console.log(response)
}
}
});
});

What data structure is select2 expecting from the server and how should it be handled?

What data structure is select2 (v4.0.3) expecting from the server and how should it be handled?
The question is asked on the official FAQ here, but there is no answer.
I have tried several variations of data structure, but based on this tutorial and this jsFiddle, have assumed what should be returned from the server is a list/array of objects/dicts, eg:
matches = [{"id":"1", "tag":"Python"},{"id":"2", "tag":"Javascript"},{"id":"3", "tag":"MongoDB"}]
I have tried this format with the following Javascript:
$("#my_select").select2({
ajax: {
url: "/tag_search",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term // search term
};
},
processResults: function (data) {
return {
results: data.matches
};
},
cache: true
},
minimumInputLength: 2,
tags: true,
tokenSeparators: [",", " "],
maximumSelectionLength: 5
});
Firebug results for search on Py:
The search area just displays this:
I am expecting all matches to be showing in the dropdown below the search area.
Solution that worked for me:
Rename json key (it has to be text), so server response is:
[{"text": "Python", "id": 1}]
(after coming across this document).
I also just returned the list itself from the server, rather than making the list a dict value.
Javascript
$("#my_select").select2({
ajax: {
url: "/tag_search",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term // search term
};
},
processResults: function (data) {
return {
results: data
};
},
cache: true
},
minimumInputLength: 2,
tags: true,
tokenSeparators: [",", " "],
maximumSelectionLength: 5
});

In Ajax request in JSON to controller, indices are added to list of hashes?

We send some data to a Rails controller:
$.ajax({
url: '/haha',
type: 'put',
dataType: 'json',
data: {
multiplication:
[
{
"a": 5,
"b": 5
},
{
"a": 5,
"b": 5
}
]
}
});
The controller receives it. In the parameters, indices miraculously appear for each hash in the list:
# after converting to Ruby
{
"multiplication"=> {
"0"=> { # WHAT?!
"a"=>"5",
"b"=>"5"
},
"1"=> { # BAM!
"a"=>"5",
"b"=>"5"
},
}
}
Is this working as intended? Can we prevent it from adding the index?
Try this:
<script type="text/javascript">
$.ajax({
type : "put",
url : 'http://localhost:3000/haha',
dataType: "json",
contentType : "application/json",
dataType: 'json',
data : {multiplication: JSON.stringify( [{"a": 5,"b": 5},{ "a": 5, "b": 5}])}
});
</script>
More info here in this SO link

Resources