Develop Reference

Kendo datasource parse Json as undefined

I tried to binding remote DataSource for my Kendo DropDownList, but the Kendo Datasource could parse the json response correctly. The result turns out to be "undefined" and recognize every single charachter in the data as a selection. I have no idea where the bug is, please help me!
Responce from controllor:
"[{"CODE_ID":"A","CODE_NAME":"Free"},{"CODE_ID":"B","CODE_NAME":"Borrowed"},{"CODE_ID":"U","CODE_NAME":"Unable"},{"CODE_ID":"C","CODE_NAME":"To be Borrowed"}]"
HTML Result
Front-end js code for Kendo DropDownList
$(document).ready(function () {
$("#search_category").kendoDropDownList({
dataTextField: "CODE_NAME",
dataValueField: "CODE_ID",
dataSource: {
transport: {
read: {
type: "GET",
url: "/BookData/GetDataList",
data: { name: "category" },
dataType: "json"
}
},
},
});
}
BookDataControllor
[HttpGet()]
public JsonResult GetDatalist(string name)
{
string result;
try
{
switch (name)
{
case "category":
result = codeService.GetDataList("CODE_ID, CODE_NAME",
"BOOK_CODE", "CODE_TYPE = 'BOOK_STATUS'");
break;
default:
return Json(false);
}
return Json(result, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
return Json(false);
}
}
back-end class CodeService
private DataTable GetDataTable(string sql)
{
DataTable dt = new DataTable();
using (SqlConnection conn = new SqlConnection(this.GetDBConnectionString()))
{
conn.Open();
SqlCommand cmd = new SqlCommand(sql, conn);
SqlDataAdapter sqlAdapter = new SqlDataAdapter(cmd);
sqlAdapter.Fill(dt);
conn.Close();
}
return dt;
}
public string GetDataList(string col, string src, string cond)
{
DataTable dt = GetDataTable(string.Format(#"SELECT {0} FROM {1} WHERE {2}",
col, src, cond).ToUpper());
string result = JsonConvert.SerializeObject(dt);
return result;
}

You are returning CODE_ID and CODE_NAME in your controller, but the values you're referencing on the front-end are Category_Name and Category_ID. Change them to reference the correct column names:
$('#search_category').kendoDropDownList({
dataTextField: 'CODE_NAME',
dataValueField: 'CODE_ID',
dataSource: {
transport: {
read: {
type: 'GET',
url: '/BookData/GetDataList',
data: { name: 'category' },
dataType: 'json',
success: function (response) {
console.log(response);
}
}
}
}
});

It seems that even returning your data with Json(result) as JsonResult, the response content could be a string, which the DataSource is not handling the right way.
Try enrusing that it will be json with parse method:
$(document).ready(function () {
$("#search_category").kendoDropDownList({
dataTextField: "CODE_NAME",
dataValueField: "CODE_ID",
dataSource: {
transport: {
read: {
type: "GET",
url: "/BookData/GetDataList",
data: { name: "category" },
dataType: "json"
}
},
schema: {
parse: function(data) {
// Here you can check what 'data' really is
console.log(data);
return JSON.parse(data);
}
}
},
});
}

asp.net google charts problems my project

this code does not work. what should i do please help me there is no problem in database i couldn't find the solution
Is there a problem with WebMethod? I did everything but there is something I can't see
I'm stuck on this, my project is waiting for this
I will be very grateful to the friend who solved this
[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public static List<ChartDetails> GetPiechartData()
{
List<ChartDetails> dataList = new List<ChartDetails>();
string sConnString = "Data Source=.;Initial Catalog=deneme;Integrated Security=True";
SqlConnection baglanti = new SqlConnection(sConnString);
SqlCommand cmd = new SqlCommand("select begeni , kontrolid from yorum", baglanti);
baglanti.Open();
SqlDataReader droku = cmd.ExecuteReader();
while (droku.Read())
{
dataList.Add(new ChartDetails
{
kontrolid = droku["kontrolid"].ToString(),
begeni = Convert.ToInt32(droku["begeni"]),
});
}
return dataList;
}
public class ChartDetails
{
public string kontrolid { get; set; }
public int begeni { get; set; }
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
</script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
url: "Default17.aspx/GetPiechartData",
data: "{}",
success: function (response) {
drawchart(response.d);
},
error: function () {
alert("Error loading data...........");
}
});
})
function drawchart(dataValues) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'kontrolid');
data.addColumn('number', 'begeni');
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].kontrolid, dataValues[i].begeni]);
}
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curvechart'));
chart.draw(data, options);
}
</script>

Cannot get Jquery autocomplete to work in ASP.NET MVC

I cannot get autocomplete to work. I suspect this is because of my declaration of the URL in the Jquery method. How can I fix this issue?
This is the method in the HomeController:
public JsonResult Autocomplete(string term)
{
string connectionString = ConfigurationManager.ConnectionStrings["AbintegroModelContext"].ConnectionString;
List<string> CompanyName = new List<string>();
string query = string.Format("select distinct CompanyName from CompanyTable where CompanyName like '%{0}%'", term);
using (SqlConnection connection = new SqlConnection(connectionString))
{
using (SqlCommand cmd = new SqlCommand(query, connection))
{
connection.Open();
SqlDataReader reader = cmd.ExecuteReader();
while (reader.Read())
{
CompanyName.Add(reader["CompanyName"].ToString());
}
}
}
return Json(CompanyName, JsonRequestBehavior.AllowGet);
}
this is the Index view:
<body>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.js"></script>
<script>
$(function () {
$("#CompanyName").autocomplete({
source: function (request, response) {
var param = { companyName: $('#CompanyName').val() };
$.ajax({
url: '#Url.Action("Autocomplete", "Home")',
data: JSON.stringify(param),
datatype: "json",
type: "GET",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) {
response($.map(data.d, function (item) {
return {
value: item
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
var err = eval("(" + XMLHttpRequest.responseText + ")");
alert(err.Message)
console.log("Ajax Error!");
}
});
},
minLength: 2 //min legth of textbox input
});
});
</script>
...later on in the same view I have the html helper textbox CompanyName.
#Html.TextBox("CompanyName", null, new { #class = "indexTextbox" })

I haven't tried re-creating this problem on my end.
Have you used your browser's code inspector to see if any errors are returned?
Also you may try placing the jquery code inside a $(document).ready() function to see if that helps.

jQuery AutoComplete multiple Output

I am using jQuery AutoComplete to fetch results from a DataBase based on the value inputted. The user will then click a search button to tell the page to search for that specific entries details.
I want to get 2 values, the Name and Title. I only want to display the Name to the user, while the page uses the Title as a search criteria.
eg: When a person types in Vehicle, the result will display Vehicle1, Vehicle2 in a list.
When the user clicks on Vehicle1, a hidden box will be issues with the Title, which would be Bike, and such as with Vehicle2, which will issue the hidden box with Car.
I can get the Name to show in the text box properly, but I cannot for the life of me (And after 2 days of searching) bind the Title to a hidden box.
JavaScript:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".tb").autocomplete({
source: function (request, response) {
$.ajax({
url: "AutoComplete.asmx/FetchEmailList",
data: "{ 'prefix': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
//value: item.Title,
label: item.Name
};
}));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 2
});
});
</script>
ASPX Code:
<div class="ui-widget" >
<asp:TextBox ID="tbAuto" class="tb" runat="server">
</asp:TextBox>
<asp:TextBox runat="server" ID="tbHidden" class="tb"></asp:TextBox>
</div>
CodeBehind:
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class AutoComplete : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<Employee> FetchEmailList(string prefix)
{
var emp = new Employee();
var fetchEmail = emp.GetEmployeeList(prefix)
.Where(m => m.Name.ToLower().StartsWith(prefix.ToLower()));
return fetchEmail.ToList();
}
}
CompletionClass: (Excuse the naming)
public class Employee
{
public string Title { get; set; }
public string Name { get; set; }
public string value { get; set; }
public List<Employee> GetEmployeeList(string prefixText)
{
List<Employee> cmpList = new List<Employee>();
SqlConnection db = DataConn.SqlConnection();
db.Open();
SqlTransaction transaction = db.BeginTransaction();
//var array = new ArrayList();
try
{
SqlCommand command = new SqlCommand("Select [something] FROM vwGetDetails WHERE [something_else] LIKE N'%" + prefixText + "%' ORDER BY [thatOther_thing] ASC", db, transaction);
using (SqlDataReader reader = command.ExecuteReader())
{
while (reader.Read())
{
cmpList.Add(new Employee() { Name = reader["Value1"].ToString(), Title = "Value1_Cat", value = "Value1_Cat"});
}
}
command = new SqlCommand("Select [something] FROM [somewhere] WHERE [thingy] LIKE N'%" + prefixText + "%' ORDER BY [previousThingy] ASC", db, transaction);
using (SqlDataReader reader = command.ExecuteReader())
{
while (reader.Read())
{
cmpList.Add(new Employee() { Name = reader["Value2"].ToString(), Title = "Value2_Cat", value = "Value2_Cat"});
}
}
transaction.Commit();
}
catch (SqlException)
{
transaction.Rollback();
cmpList.Add(new Employee() { Name = "Problem Getting Results.", value = "Error"});
//array.Add("Problem Getting Results.");
}
if (cmpList.Count == 0)
cmpList.Add(new Employee() { Name = "Nothing to Display.", value = "Info"});
//array.Add("Nothing to Display.");
//return array;
return cmpList;
}
}

Those modifications to your JavaScript should do the trick:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('input[name$="tbAuto"]').autocomplete({
source: function (request, response) {
$.ajax({
url: "AutoComplete.asmx/FetchEmailList",
data: "{ 'prefix': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response(data.d);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 2,
focus: function(event, ui) {
$('input[name$="tbAuto"]').val(ui.item.Name);
return false;
},
select: function(event, ui) {
$('input[name$="tbAuto"]').val(ui.item.Name);
$('input[name$="tbHidden"]').val(ui.item.Title);
return false;
}
}).data('autocomplete')._renderItem = function(ul, item) {
return $('<li>').data('item.autocomplete', item).append('<a>' + item.Name + '</a>').appendTo(ul);
};
});
</script>
The assumption here is that the selectors returns exactly the element which we are working on, if not they need to be adjusted.

Cool. I've been googling for this solution for days... excellent clean code!
Just a small remark: using jqueryUI 1.10, this
throws javascript exception.
.data('autocomplete')._renderItem = function(ul, item) {...
I've used
.data('ui-autocomplete')._renderItem = function(ul, item) {...
and everything works great.

Autocomplete Jquery function returning Internal Server Error while calling webservice

I am working on a project that requires to autocomplete textbox when some data is inputted and the data will be fetched from a database.
For this I created a webservice as -
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//[ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[ScriptService]
public class SearchIssues : System.Web.Services.WebService
{
//[ScriptMethod]
[WebMethod]
public string[] GetCompletionList(string prefixText)
{
DataSet ds = null;
DataTable dt = null;
OracleConnection conn = null;
StringBuilder sb = new StringBuilder();
try
{
conn = new OracleConnection(WebConfigurationManager.ConnectionStrings["Conn"].ToString());
sb.Append("select issueno from cet_sepcet where issueno like '");
sb.Append(prefixText);
sb.Append("%'");
OracleDataAdapter daRes = new OracleDataAdapter(sb.ToString(), conn);
ds = new DataSet();
daRes.Fill(ds);
dt = ds.Tables[0];
}
catch (Exception exc)
{
}
if (conn.State == ConnectionState.Open)
{
conn.Close();
}
List<string> IssueList = new List<string>();
for (int i = 0; i < dt.DataSet.Tables[0].Rows.Count; i++)
{
IssueList.Add(dt.DataSet.Tables[0].Rows[i][0].ToString());
}
return IssueList.ToArray();
}
}
The jquery ajax method I wrote is as -
$(function() {
$(".tb").autocomplete({
source: function(request, response) {
debugger;
$.ajax({
url: "SearchIssues.asmx/GetCompletionList",
data: request.term,
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function(data) { return data; },
success: function(data) {
response($.map(data.d, function(item) {
return {
value: item
}
}))
//alert('Hello');
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
debugger;
alert(errorThrown);
}
});
},
minLength: 1
});
});
The webservice is running perfectly fine. But the problem comes when I try to call the webservice from the .aspx page. Its throws Internal server error.
I am not sure as where I am going wrong. Kindly help.
Thanks in advance.
Akhil

I advice you to use firebug to check whether your Post requests and responses this way you can easily debug your application.
This one in your code of ajax
data: request.term,
Should be actually
data: "{'prefixText':'" + request.term+ "'}",
Your service is expecting prefixText string as a parmeter, I assume request.term is the value.
Update :
I dont know what is not working at your end this works for me :
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Service/WSDataService.asmx/GetStatesWithAbbr",
data: "{'name':'" + $(autocomplete).val() + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.Name,
value: item.Name
}
}))
}
});
},
minLength: 1
});
});
</script>
....
<input id="autocomplete" />
Service :
[WebMethod]
public List<State> GetStatesWithAbbr(string name)
{
List<State> sbStates = new List<State>();
//Add states to the List
}

This code could throw exception, so please verify it one more time, probably table is not retrieved or something like it.
List<string> IssueList = new List<string>();
for (int i = 0; i < dt.DataSet.Tables[0].Rows.Count; i++)
{
IssueList.Add(dt.DataSet.Tables[0].Rows[i][0].ToString());
}
return IssueList.ToArray();

Place this line in your ajax:
data: '{ "prefixText": "' + request.term + '"}',
and it will work exactly as happened with me.