iam using jquery autocomplete in asp.net project. it's not working. do you have any idea. the code is given below.
<script type="text/javascript">
$(function () {
$('#clientabbrev').val("");
$("#clientstate").autocomplete({
source: "clientstates.aspx",
select: function (event, ui) {
$('#clientstateid').val(ui.item.clientid);
$('#clientstateabbrev').val(ui.item.clientabbrev);
}
});
$("#clientstate_abbrev").autocomplete({
source: "clientstatesabbrev.aspx",
minLength: 2
});
});
</script>
problem is states.aspx returning the data but it is not showing in the jquery autocomplete control.
Your server needs to return a JSON serialized array of objects with properties id, label, and value. E.g. :
[ { "id": "1", "label": "Mike Smith", "value": "Mike Smith" }, { "id": "2", "label": "Bruce Wayne", "value": "Bruce Wayne" }]
Can you confirm with firebug or Fiddler that your server is returning the correct response?
If you're having trouble serializing your data in C#, you can try using JavaScriptSerializer like this:
var result = from u in users
select new {
id = u.Id,
value = u.Name,
label = u.Name
};
JavaScriptSerialier serializer = new JavaScriptSerializer();
var json = serializer.Serialize(result);
// now return json in your response
Related
The rails application is using the datatable to populate the data which is received from the remote system ( using ajax call) . the things were working fine till the remote system was sending plain text. But now the system is sending the response data as html. Because of that the whole page formating is disturbed. How to display the html returned as it is in the datatable row? The code is as below. The html returned from remote system is displayed in message field.
var logs = window.location.pathname + '/logs.json';
var logTable = $("table").DataTable({
"oLanguage": {
"sSearch": "Search"
},
"paging": false,
"dom" : 't',
"order": [[0, "desc"]],
"ajax": {
"url": logs,
'dataSrc': function ( json ) {
return json;
}
},
"drawCallback": function(){
refreshProgressBar();
},
columns: [
{data : "created_at"},
{data : "level"},
{data : "message"},
],
});
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,
var headers = [{ "mDataProp": "Agents" },{ "mDataProp": "Buyer" },{ "mDataProp": "Date" }];
$(document).ready(function () {
$('#data-table').dataTable({
"bFilter": false,
"bLengthChange": false,
"iDisplayLength": 25,
"bJQueryUI": true,
"bServerSide": true,
"bProcessing": true,
"sPaginationType": "full_numbers",
"aoColumns": headers,
"sAjaxSource": '/report/TestPaging',
});
});
If I remove the aoColumns from my code the datatable is generated normally, but when I add aoColumns I get :
DataTables warning (table id = 'data-table'): Requested unknown parameter 'Agents' from the data source for row 0
HTML:
<table id="data-table">
<thead>
<tr>
<th>tmp</th>
<th>tmp</th>
<th>tmp</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
How can I configure header names? I need them for my sorting.
Do they have to be same as in "th" tags?
Json response from my controller is ok because it renders fine when I remove aoColumns
I have string[][](var data) with 3 strings in each line and return it as
Json(new{
sEcho = param.sEcho,
iTotalRecords = visitRepository.Query.Count(),
iTotalDisplayRecords = visitRepository.Query.Count(),
aaData = data
}, JsonRequestBehavior.AllowGet);
The error you are experiencing is caused by a mismatch between the contents of the JSON and your aoColumns definition. The names you are targeting in aoColumns must be exactly the same as those in the JSON, and the length of each object in the JSON must be equal to the number of columns in the original HTML table. See the docs for clarification. In your case, the JSON should look like this :
[{
"Agents": "tM4Ga0zX",
"Buyer": "ZKwMEiIa",
"Date": "K3lS2yn9"
},
...]
...And your JSON doesnt follow that scheme. If you are not using aoColumns, then the data is inserted by index, not by name - and that is why it is working for you without it.
You configure header names (titles) by the sTitle property :
aoColumns: [
{ mDataProp: "Agents", sTitle : "Agents" },
{ mDataProp: "Buyer", sTitle : "Buyer" },
{ mDataProp: "Date", sTitle : "Date" }
]
see this demonstration based on your question -> http://jsfiddle.net/kLR7G/
How can I get the selected ID value from the chosen single DropDown?
ex:
$("#select-id").chosen().val()
Im getting the value of a country (name) but I need the ID to link with another DropDown.
This ID is the index of array of States, so when I choose a Country in the another DropDown Appear the array with all the State items.
Checkout JsFiddle demo. I create a simple example for you. Is that what you need?
ko.bindingHandlers.chosen = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).chosen();
},
update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).trigger("liszt:updated");
}
};
var viewModel = {
sample : ko.observableArray([{"name": "Sample Option 1" , "value" : 1 } , {"name": "Sample Option 2" , "value" : 2 }, {"name": "Sample Option 3" , "value" : 3 }]),
selectedItemOne : ko.observable(),
selectedItemTwo : ko.observable(),
showOne : function(){ alert(this.selectedItemOne()) },
showTwo: function(){ alert(this.selectedItemTwo()) }
};
ko.applyBindings(viewModel);
I use google line chart but I cant success to assing source to chart.
script
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', { 'packages': ['corechart'] });
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: '#Url.Action("AylikOkumalar", "Enerji")',
dataType: "json",
async: false
}).responseText;
var rows = new google.visualization.DataTable(jsonData);
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'T1');
data.addColumn('number', 'T2');
data.addColumn('number', 'T3');
data.addRows(rows);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div')).draw(data, { curveType: "function",
width: 700, height: 400,
vAxis: { maxValue: 10 }
}
);
}
</script>
action
public ActionResult AylikOkumalar()
{
IEnumerable<TblSayacOkumalari> sayac_okumalari = entity.TblSayacOkumalari;
var sonuc = sayac_okumalari.Select(x => new
{
okuma_tarihi = ((DateTime)x.okuma_tarihi).ToShortDateString(),
T1 = (int)x.toplam_kullanim_T1,
T2 = (int)x.toplam_kullanim_T2,
T3 = (int)x.toplam_kullanim_T3
});
return Json(sonuc, JsonRequestBehavior.AllowGet);
}
json output
and script error:
Argument given to addRows must be either a number or an array.
I use it first time. So I dont know what should I do. How can use charts with mvc 3. there is no example enough.
Thanks.
data.addRows(rows);
'rows' should be an array - something like :
data.addRows([
[new Date(1977,2,28)], 1, 2, 3],
[new Date(1977,2,28)], 1, 2, 3]
]);
or your jsonData could be instead the whole structure :
{
"cols": [
{"id": "", "label": "Date", "type": "date"},
{"id": "", "label": "T1", "type": "number"}
],
"rows": [
{"c":[{"v": "Apr 24th"}, {"v": 56000} ]},
{"c":[{"v": "May 3rd" }, {"v": 68000} ]}
]
}