I am try to draw simple chart using this code:
:coffee
requestData = () ->
$.ajax
url: "#{ build_chart_data_track_url(#track.id) }"
type: "GET"
dataType: "json"
success: (data, textStatus, jqXHR) ->
chart.addSeries({
type: 'spline',
name: "Price",
data: data.price,
connectEnds: false,
color: 'orange',
});
chart = Highcharts.chart 'chart',
chart:
zoomType: 'x'
events:
load: requestData
title:
text: "some text"
But I see strange lines when data is absent (or something else?). How I can disable it and leave only one line with my data?
Solved. The issue was in Ajax loaded data format.
Related
I'm using ajax to pull in data from a php file (which returns json).
I'm wondering, can you have results pulled from Ajax and loads on click without having to search? so essentially you click the field, it drops down with all the elements from Ajax. Couldn't find in the documentation.
Code:
jQuery('.producttypesajax').select2({
allowClear: true,
placeholder: {
id: '',
text: 'Search by Product Type'
},
ajax: {
url: base + '/appProductTypeSearch.php',
dataType: 'json',
delay: 250,
data: function( params ) {
return {
q: params.term // search term
};
},
processResults: function( data) {
return {
results: data
};
},
cache: true
},
minimumInputLength: 1
});
jQuery('.producttypesajax').on('select2:select', function (e) {
var data = e.params.data;
});
https://select2.org/data-sources/ajax
I believe there's no native solution for this, but I managed to do it somehow.
Since Select2 accepts Arrays as a data source, you can make an Ajax request returning your Json object and use it as an "Array".
Sample code:
$.ajax({
url: url,
type: 'get',
dataType: 'json',
success: function (jsonObject){
$('#mySelect').select2({ data: jsonObject });
}
});
It worked for me. Hope it helps.
i have a newbie question, but i’m scratching my head on this one. I have a grid, bound to a dataadapter. On the grid, paging and filtering is explicit disabled, but the GET-call from the dataadapter allways includes following parameters in the GET-url:
?filterscount=0&groupscount=0&pagenum=0&pagesize=10&recordstartindex=0&recordendindex=18&_=1386768031615
I want to get all data, then cache it clientside for paging and filtering, but in the first step i just want to get my data bound to the grid.
Here’s my code:
var source = {
type: "GET",
datatype: "json",
datafields: [
{ name: 'url' },
{ name: 'category', type: 'int' },
{ name: 'info' },
{ name: 'status', type: 'bool' }
],
url: '/api/redirects/Getallredirects',
id: 'id'
};
var dataAdapter = new $.jqx.dataAdapter(source, {
contentType: 'application/json; charset=utf-8',
loadError: function (xhr, status, error) {
alert(error);
},
downloadComplete: function (data) {
var returnData = {};
returnData.records = data.d;
return returnData;
}
});
$("#jqxgrid").jqxGrid({
source: dataAdapter,
filterable: false,
pageable: false,
virtualmode: false,
columns: [
{ text: 'URL', dataField: 'url', width: 100 },
{ text: 'Category', dataField: 'category', width: 100 },
{ text: 'Info', dataField: 'info', width: 180 },
{ text: 'Status', dataField: 'status', width: 80, cellsalign: 'right' },
]
});
I don’t get any data, the GET-call fails because of the automatically included parameters. How do i get rid of these parameters?
I just found in the jqxGrid documentation a reference to these parameters, but no example, how to remove them:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-extra-http-variables.htm
Thanks in advance for any help.
The below will remove the default parameters:
var dataAdapter = new $.jqx.dataAdapter(source,
{
formatData: function (data) {
return {};
}
}
);
I am trying to bind the text box and the JQuery AutoComplete feature. When I checked the Firebug AJAX Request & Response it returns like the following. But the textbox is not showing any items. Could you please advise me, what I am doing wrong? Thanks.
Here is my coding:
$("#<%= TextBox1.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: "/contractors/web_services/wsSM.asmx/SearchDrugs",
type: "POST",
dataType: "json",
data: {
'LocationID': "10543",
'Search': request.term
},
success: function (data) {
response($.map(data.d, function (item) {
return {
value: item.FullDrugName,
id: item.DrugID
}
}))
}
});
},
delay: 1,
minLength: 2,
select: function (event, ui) {
alert(ui.item.id);
}
});
DataType property is representing the type of data that you're expecting back from the server.
you define data type as json but server returns you a xml output. You should change your DataType property to xml
In addition to #fealin's answer, you're going to need to change the way you process the xml response. It doesn't look like you have a d property on the return data, and you also need to look for the correct nodes in the XML structure and pull out their text to build the response array that you return to the widget.
Based on the XML you've provided, it might look something like this:
$("#<%= TextBox1.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: "/contractors/web_services/wsSM.asmx/SearchDrugs",
type: "POST",
dataType: "json",
data: {
'LocationID': "10543",
'Search': request.term
},
success: function (data) {
response($(data).find("Drug").map(function (_, el) {
var $el = $(el);
return {
label: $el.find("FullDrugName").text(),
value: $el.find("DrugID").text()
};
}));
});
},
delay: 1,
minLength: 2,
select: function (event, ui) {
alert(ui.item.id);
}
});
Here's an example that's just using the XML string (without an AJAX request): http://jsfiddle.net/J5rVP/29/
I am trying to load panelbar dynamically using datasource.
Actually In the documentation I got information with using ajax only,
so I have implemented like this,
$.ajax({
type: "POST",
url: '/Home/GetPanelInfo',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (json) {
$("#panelBar").kendoPanelBar({
expandMode: "single",
id: "usr_id",
dataSource: [{ text: json[0].groups_name, expand: true, contentUrl: "/Home/Index" },
{ text: json[1].groups_name, expand: true, contentUrl: "/Home/Index" },
{ text: json[3].groups_name, expand: true, contentUrl: "/Home/Index"}]
});
}
});
but with this I am not able to display all values,
I think this is not the correct way of loading panel bar to display all values,How to display all values in panelbar
You should be iterating over your result array. You can use jQuery Map function E.g.:
$.ajax({
type: "POST",
url: '/Home/GetPanelInfo',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (json) {
var dataSource = $.map(json, function(obj){
return {
text: obj.groups_name,
expand: true,
contentUrl: "/Home/Index"
};
});
$("#panelBar").kendoPanelBar({
expandMode: "single",
id: "usr_id",
dataSource: dataSource
});
}
});
I need some help from you in using igTree when LoadOnDemand is set to true.
I have a WCF REST Service which is giving me data to populate in igTree.
Please find the sample code..
$.ajax(
{
type: "GET",
url: "AssessmentProcWCFService.svc/GetAllEntities",
contentType: "application/json; charset=utf-8",
dataType: 'json',
data: '{}',
cache: false,
success: OnGetAllEntitiesSuccess,
error: OnGetAllEntitiesFailure
});
==================================================
function OnGetAllEntitiesSuccess(categoryList) {
$("#APTreeView").igTree({
animationDuration: 0,
dataSourceType: 'json',
dataSource: categoryList.d,
initialExpandDepth: false,
loadOnDemand: true,
dataSourceUrl: "AssessmentProcWCFService.svc/GetAllCategories?EntityID=primaryKey:id",
bindings: {
textKey: 'text',
valueKey: 'id',
primaryKey: 'id',
expanded: 'expanded',
childDataProperty: 'children'
}
});
}
=========================================================
Questions:-
How could I send the selected node ID to the Service when any node of the tree is expanding?
The way I am sending in the above example it is not working when I am retrieving it in the service “public List GetAllCategories()” like
“string entityID = HttpContext.Current.Request.QueryString["EntityID"];”
I am getting entity id as null.
How the tree get rendered when any node get expanded if LoadOnDemand is true?
Please help me on this I have spend lot of time in it.
Basically you can encode anything you like in the request made to the service:
Here are the default request parameters explained: http://www.infragistics.com/community/forums/t/65356.aspx
And here is how you can add a request parameter:
function OnGetAllEntitiesSuccess(categoryList) {
$("#APTreeView").igTree({
animationDuration: 0,
dataSourceType: 'json',
dataSource: categoryList.d,
initialExpandDepth: false,
loadOnDemand: true,
dataSourceUrl: "AssessmentProcWCFService.svc/GetAllCategories?EntityID=primaryKey:id",
bindings: {
textKey: 'text',
valueKey: 'id',
primaryKey: 'id',
expanded: 'expanded',
childDataProperty: 'children'
},
nodePopulating: function (event, ui) {
var node = '&SelectedNodeID=' + $("#APTreeView").igTree('selectedNode').element.attr('data-value'),
myNewUrl = 'AssessmentProcWCFService.svc/GetAllCategories?EntityID=primaryKey:id' + node;
$('#myTree').igTree('option', 'dataSourceUrl', myNewUrl);
}
});
}