Mvc autocomplete ajax - ajax

Try to:
$(document).ready(function () {
$('#cityName').autocomplete({
source: function(request,response) {
$.ajax({
type: 'POST',
url: '#Url.Action("Search", "City")',
dataType: 'json',
data: { name: request.term } ,
success: function (data) {
response($.map(data, function (item) {
alert(JSON.stringify(data));
alert(JSON.stringify(item.name));
return {
name: item.name,
label: item.name
}
}));
}
})
},
messages: {
noResults: "", results: ""
}
})
})
In alert(JSON.stringify(data)) got this: {"items":["Boston","Berlin"]}.
In alert(JSON.stringify(item.name)) got this: undefined.
Question: how do it (item.name) works?


You have to just return array of strings:
$(document).ready(function () {
$('#cityName').autocomplete({
source: function(request,response) {
$.ajax({
type: 'POST',
url: '#Url.Action("Search", "City")',
dataType: 'json',
data: { name: request.term } ,
success: function (data) {
response(data.items);
}
})
},
messages: {
noResults: "", results: ""
}
})
})

Related

Kendo Grid not showing data with proper json being returned

My kendo grid is not showing data after successfully calling a web method and seeing data being returned in the ajax request.
$(document).ready(function () {
var filterSource = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
type: "GET",
url: "DoJo.aspx/GetProjects",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// msg.d has the json data
}
});
}
},
schema: {
model: {
fields: {
ProjNum: {type: "string"},
Stat: {type: "string"}
}
},
data: "d"
},
change: function (e) {
// e.items is empty
}
});
$("#grid").kendoGrid({
dataSource: filterSource,
columns: [
{
field: "ProjNum", title: "Project Number", width: "130px", filterable: {
multi: true,
dataSource: filterSource
}
},
{
field: "Stat", title: "Status", filterable: {
multi: true,
dataSource: filterSource
}
}
]
});
})
The JSON below is in an array format.
[{"ProjNum":"12345","Stat":null,"ProjTitle":"Test Title","ClientName":"Test Client","ClientContactName":"Test Name","ClientFacilityLocation":"Test Location","SourceOfContact":"Test Contact","ProjManager":"Test Manager","Department":"Test Department"}]
Why is change callback returning an empty e.items? If I remove data: "d" it returns e.Items with the JSON data.

When you set dataSource.transport.read to a function and invoke the ajax call yourself, you need to pass the result (or error) back into the dataSource, like so:
var filterSource = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
type: "GET",
url: "DoJo.aspx/GetProjects",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// msg.d has the json data
// notify the data source that the request succeeded
options.success(msg);
},
error: function(msg) {
// notify the data source that the request failed
options.error(msg);
}
});
}
},
schema: {
model: {
fields: {
ProjNum: { type: "string" },
Stat: { type: "string" }
}
},
data: "d"
},
change: function (e) {
// e.items is empty
}
});
See the documentation for more information.

Typeahead.js Get ID

sorry but i don't find reply..
My problem is i can't retrieve the id of the selected product. The value = 0
My code :
$("#recherche").typeahead({
onSelect: function(item) {
alert(item.value); // = 0
},
ajax: {
url: "/personne/autocompletation",
displayField: "nomComplet",
triggerLength: 1,
method: "POST",
dataType: "JSON",
preDispatch: function (query) {
return {
query: query
}
}
},
});
My code HTML
<li class="active" data-value="0"><strong>C</strong>alloway</li>
Sorry for my english...

Try this
$("#recherche").typeahead({
source: function(query, process){
$.ajax({
url: "/personne/autocompletation",
displayField: "nomComplet",
triggerLength: 1,
method: "POST",
dataType: "JSON",
success: function (data) {
console.log(data);
}
});
}
});

Can not pass value from Ajax to controller

My AJAX:
$.ajax({
url: '{{ URL::to('dashboard') }}',
type: 'GET',
data: { cid: val },
dataType:'JSON',
success: function(result) {
},
error: function(){
$('#status-msg').addClass('alert alert-danger');
$('#status-msg').text('Fejl!!');
}
});
My Route:
My Controller:
public function dashboard(){
if (Request::ajax()){
$cid = Input::get('cid');
var_dump(json_encode($cid));
} else {
echo "XX";
}
}
The cid is not passing to controller, the request AJAX is not working.

have you try change your ajax type to POST ?
$.ajax({
url: '{{ URL::to("yourURL") }}',
type:'POST',
data:"cid="+$(this).val()+"&_token=" + $("input[name=_token]").val(),
dataType:'JSON',
success:function(result){
},
error: function() {
}
});
Edit:
try to pass _token if you use {{Form::open}}.
hope this will help.

Try this:
$.ajax({
url: '<?php echo base_url() ?>index.php/contorller_name/method_name',
type: 'POST',
data: { cid: val },
dataType:'JSON',
success: function(result) {},
error: function() {
$('#status-msg').addClass('alert alert-danger');
$('#status-msg').text('Fejl!!');
}
});

How to get the ID property in KendoUI TreeView

Here is my tree view of KendoUI:
<script src="~/scripts/kendo.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var regions = {
type: "odata",
transport: {
read: function (options) {
$.ajax(
{
type: "POST",
url: "Territory/AllRegions?countryID=?" + options.ID,
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (data) {
$("#treeview").data("kendoTreeView").dataSource.data(data);
}
});
},
},
schema: {
model: {
hasChildren: function () {
return false;
}
}
}
};
var countries = {
type: "odata",
schema: {
model: {
id: "Id",
hasChildren: "HasChildren",
children: regions
}
},
transport: {
read: function (options) {
$.ajax(
{
type: "POST",
url: "Territory/AllCountries?territoryID=?" + options.ID,
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (data) {
$("#treeview").data("kendoTreeView").dataSource.data(data);
}
});
}
}
};
var Territories = new kendo.data.HierarchicalDataSource({
type: "odata",
transport: {
read: function (options) {
$.ajax(
{
type: "POST",
url: "Territory/AllTerritories",
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (data) {
$("#treeview").data("kendoTreeView").dataSource.data(data);
}
});
}
},
schema: {
model: {
hasChildren: "HasChildren",
Id: "ID",
children: countries
}
}
});
$("#treeview").kendoTreeView({
dataSource: Territories,
dataTextField: ["Name", "Name", "Name"],
dataValueField:"ID"
});
});
</script>
The hierarchy is Territories->countries->regions
I can see the territories populating, but I am unable to fetch the ID property of selected Territory so that countries can be populated, that is in ajax call,
options.ID is undefined there.

Assign page size value to kendo grid from code

code:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://search.twitter.com/search.json",
dataType: "jsonp",
data: {
q: "kendoui"
}
}
},
schema: {
data: "results",
total: function(response) {
return response.results.length;
}
},
pageSize: 4
});
here i have to set the page size 4 from client side

public JsonResult GetSettings()
{
return Json(new { count = Service.GetSettings<UserSetting>(AuthenticatedUser) }, JsonRequestBehavior.AllowGet);
}
var settingsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("GetSetting")',
dataType: "json",
type: "GET"
}
},
schema: {
parse: function (data) {
resultCount = data.count;
return data;
}
},
change: function () {
Grid();
}
});
settingsDataSource.read();
function Grid() {
mainGridDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("GetDetails")',
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8"
},
parameterMap: function (options) {
return JSON.stringify({ filter: options, isPrimary: options.isPrimary });
}
},
schema: {
model: {
fields: {
Status: { type: "string" },
Name: { type: "string" }
}
},
data: function (data) {
return data.data;
},
total: function (data) {
return data.totalCount;
}
},
pageSize: resultCount,
serverFiltering: true,
serverPaging: true
});

Resources