I'm loading a highchart graph using following function.
function reloadSubGraph(data){
$(function () {
$('#SubPatternContainer').highcharts({
plotOptions: {
events: {
update: function (event) {
}
}
},
title: {
text: 'Selected Pattern'
},
series:[{data:[[1,200],[2,200],[3,200]]}]
});
});
}
It works fine, but when using ajax call to load data as follows for same data string [{data:[[1,200],[2,200],[3,200]]}] as follows it doesn't show on graph.
function getSubPatternData(patternId,patternName){
$.ajax({
url: "/arcane/patternData1?patternId="+patternId+"&patternName="+patternName,
type: "get",
cache: false,
success: function(data) {
var tempdata=String(data);
reloadSubGraph(tempdata);
},
error:function(xhr, status, error){
alert(xhr.responseText);
}
});
}
Can anyone point me where i'm doing wrong here. when I see the returned results of ajax using alert(data) it shows the same string that i used in reloadSubGraph() function ([{data:[[1,200],[2,200],[3,200]]}])
when using with ajax i changed reloadSubGraph() funcion as follows.
function reloadSubGraph(data){
alert(data);
$(function () {<!--from w w w .j ava 2 s . c o m-->
$('#SubPatternContainer').highcharts({
plotOptions: {
events: {
update: function (event) {
}
}
},
title: {
text: 'Selected Pattern'
},
series:data
});
});
}
Related
I am running a ASP.Net MVC application and using jQuery's Autocomplete in one of the textboxes to populate contract numbers after the 6th digit/character.
It is working flawlessly, until after an error is thrown for a validation check.
My code :
$(document).ready(function () {
$("#ContractNumber").autocomplete({
source: '#Url.Action("GetContractId")',
open: function () { $('ul.ui-autocomplete').hide().fadeIn() },
close: function () { $('ul.ui-autocomplete').show().fadeOut() },
minLength:6
});
});
The code that redirects to the correct controller to get the contract number is here:
$(document).ready(function () {
//$('body').on('focus', "#ContractNumber", function () {
$("#ContractNumber").autocomplete({
source: function (request, response) {
$.ajax({
url: "/PurchaseRequestDetail/GetContractId",
minLength: 1,
data: { Prefix: request.term },
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data, function (item) {
return { label: item.Name, value: item.Name };;
}))
}
})
}
});
Here is the autocomplete that is working fine, before the error:
I wanted this autocomplete to work, on focus of the textbox, whether a validation error thrown or not.
validation error:
The code that checks for ModelState if contract number is not found :
if (contractNo is null)
{
// row.ContractId = foundList.ContractId;
db.PurchaseRequestDetail.Add(newRow);
db.SaveChanges();
}
else if (contractNo != null)
{
if (foundList is null)
{
ModelState.AddModelError("ContractNumber", "Contract Number not in the database.");
// reload the drop down lists, they don't survive the trip to the server and back
viewModel.ContractList = GetContractList(viewModel.ContractId);
return View("CreateEdit", viewModel);
}
}
Any pointers in correcting this would be helpful.
TIA.
I have a php, jquery, jqueryMobile, highcharts page with several charts on one page.
No i added an ajax call to load event to get live data into the charts. but i have to declare this in every Highcharts object, no matter which way i try it's not working as global function.
Here parts of the code i have and which is working
$(document).ready(function () {
// define sensorName
var sensorName = "rflinkstation";
chart1 = new Highcharts.chart({
"chart": {
"renderTo": sensorName,
"events": {
"load": function() {
var series = this.series[0];
setInterval(function() {
$.ajax({
url: 'sensorAjaxData.php',
success: function(point) {
console.log("ajax request for = " + sensorName);
// add the point
series.addPoint(point, true, true);
},
cache: false,
data: { "sensorName": sensorName,
"stationID": <?php echo $stationID;?>,
}
});
}, 60000);
}
}
},
"series": [{
...
$(document).ready(function () {
// define sensorName
var sensorName = "batteryvolt1";
chart2 = new Highcharts.chart({
"chart": {
"renderTo": sensorName,
"events": {
"load": function() {
var series = this.series[0];
setInterval(function() {
$.ajax({
url: 'sensorAjaxData.php',
success: function(point) {
console.log("ajax request for = " + sensorName);
// add the point
series.addPoint(point, true, true);
},
cache: false,
data: { "sensorName": sensorName,
"stationID": <?php echo $stationID;?>,
}
});
}, 60000);
}
}
},
"series": [{
....
What i try to achieve is to put the "load" function into a function to prevent copy pasting allot of code.
but if i declare something like
function getData(sensorName) {
and
events: { load: setInterval(getData(sensorName),6000) }
i loose the object and get this.series is undefined
My programming knoledge comes from pre object orinted programming and i do not fully understand the explanations in how to extend highcharts. Also the Highcharts live data example is written so that chart is a global variable and works only with one chart on a page.
so my question is how can i extend Highcharts with a load event that takes "sensorName" as argument and does an ajax call and insertrs the returned data into the right chart?
And a side question why is something like:
var series = this.series[0];
$.ajax({
...
series.addPoint(point)
...
working, and this not
$.ajax({
...
this.series[0].addPoint(point)
...
The this (Window object) inside of setInterval() function is not the same this (Chart object) as in chart.events.load() function. You can for example set the second parameter in getData() function which will indicate chart. Now getData() looks like this:
function getData(sensorName, chart) {
var series = chart.series[0];
$.ajax({
url: 'http://www.json-generator.com/api/json/get/bTNHrHVJmG?indent=2',
success: function(point) {
console.log('AJAX request for = ' + sensorName);
// add the point
series.addPoint(point, true, true);
},
data: {
sensorName: sensorName,
stationID: sensorName + 'ID' //<?php echo $stationID;?>,
},
cache: false
});
};
and it call in load event looks like this:
load: function() {
var chart = this;
setInterval(function() {
getData(chart.options.chart.renderTo, chart);
}, 5000);
}
Take a look at the example I prepared for you.
Example:
http://jsfiddle.net/a40qvy47/
i try show error message
i have a link button in grid view ..i call highcharts when i click on this link button and also this static function.. through this static function i get data and then call this function through javascript so when i click on this button chart is display but when there is no chart it shows error in code so for this i want to show alert box when there is no chart..
public static function(int ID)
try
{
}
catch (Exception ex)
{
Response.Write("<script>alert('" + Server.HtmlEncode(ex.ToString()) + "')</script>");
}
i try above but this shows error message
Error 3 An object reference is required for the non-static field,
method, or property 'System.Web.UI.Page.Server.get'
Error 2 An object
reference is required for the non-static field, method, or property
'System.Web.UI.Page.Response.get'
lbViewChart is link button ...
jquery
<script type="text/javascript">
var strArray = "[['sfdsdfLi', 9],['Kiwsdfi', 3],['Mixesdfd nuts', 1],['Oranges', 6],['Grapes (bunch)', 1]]";
$(function () {
$('[ID*=lbViewChart]').on('click', function () {
var row = $(this).closest('tr');
var Id = row.find('td')[0].firstChild.data;
var obj = {};
obj.ID = Id;
GetData(obj);
return false;
});
});
function GetData(obj) {
$.ajax({
type: "POST",
url: "WebForm1.aspx/GetVoiliations",
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (result) {
alert(result.d);
alert('u');
//start
strArray = result.d;
var myarray = eval(strArray);
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: 'Contents of Highsoft\'s weekly fruit delivery'
},
subtitle: {
text: '3D donut in Highcharts'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
}
},
series: [{
name: 'Delivered amount',
data: myarray
}]
});
//end
},
error: function (error) {
alert(error);
}
});
}
// });
</script>
any solution?
You cannot access Server directly in a static method instead for that use System.Web.HttpContext.Current.Server So the code will be like:
System.Web.HttpContext.Current.Response.Write("<script>alert('" + System.Web.HttpContext.Current.Server.HtmlEncode(ex.ToString()) + "')</script>");
Or include using System.Web; to the using section and then use HttpContext.Current.Server
Updates: -
The HttpContext.Current is a static property so you can access it Directly inside a static method. and hence you can access .Server and .Response` from this as like the following:
System.Web.HttpContext currentContext = System.Web.HttpContext.Current;
currentContext.Response.Write("<script>alert('" + currentContext.Server.HtmlEncode(ex.ToString()) + "')</script>");
I creating a function name show in javascript.
but when i call ,that is saying show is not a function .
I am creating this for ajax call
my ajax function..
$(document).ready(function(){
show = function (){
alert('s');
$.ajax({
type: "POST",
url: ajax_url_store,
data: {action: 'store', views: JSON.stringify(thsirtDesigner.getProduct()) },
success: function(data) {
if(parseInt(data) > 0) {
$( "#cart_pd" ).submit();
}
},
error: function() {
//alert('some error has occured...');
},
start: function() {
//alert('ajax has been started...');
}
});
}
});
With
show = function (){
alert('s');...
You don't declare a function named "show". For that purpose, do:
function show (){
alert('s');...
Greetz
I am trying to use autocomplete and autogrow with the Jeditable jquery plugin and cannot seem to incorporate both. I currently have the Jeditable + autocomplete working perfectly. When I tr to add code for the autogrow it doesn't work and causes a post back when I hit the save button. Any help would be appreciated.
This is what I have so far:
$('#directionList').autocomplete({
source: function (request, response) {
$.ajax({
url: '../api/standarddirections/?q=' + request.term,
dataFilter: function (data) { return data; },
success: response
});
},
minLength: 2
});
$.editable.addInputType('autocomplete', {
element: $.editable.types.textarea.element,
plugin: function (settings, original) {
$('textarea', this).autocomplete(settings.autocomplete);
}
});
$(".directionAutoComplete").editable(function (value, settings) {
console.log(this);
console.log(value);
console.log(settings);
return (value);
}, {
type: "autocomplete",
indicator: 'Saving...',
tooltip: "Enter a direction...",
onblur: function (value, settings) {
console.log(this);
console.log(value);
console.log(settings);
return (value);
},
cancel: 'Cancel',
submit: 'Save',
autocomplete: {
source: function (request, response) {
$.ajax({
url: '../api/standarddirections/?q=' + request.term,
dataFilter: function (data) { return data; },
success: response
});
},
minLength: 2
}
});
Here's some reference material:
Jeditable
Jeditable - Auto Grow Tutorial
For those running into this problem I have gotten it to work. I went with the growfield plugin just because the autogrow one was having some weird results (it worked, but the formatting looked off when I saved it so I just opted to go the easier route of using a different plugin.)
Here's my final code:
$.editable.addInputType('growfield', {
element: function (settings, original) {
var textarea = $('<textarea>');
if (settings.rows) {
textarea.attr('rows', settings.rows);
} else {
textarea.height(settings.height);
}
if (settings.cols) {
textarea.attr('cols', settings.cols);
} else {
textarea.width(settings.width);
}
// will execute when textarea is rendered
textarea.ready(function () {
// implement your scroll pane code here
});
$(this).append(textarea);
return (textarea);
},
plugin: function (settings, original) {
// applies the growfield effect to the in-place edit field
$('textarea', this).growfield(settings.growfield);
$('textarea', this).autocomplete(settings.autocomplete);
}
});
$(".directionAutoComplete").editable(function (value, settings) {
console.log(this);
console.log(value);
console.log(settings);
return (value);
}, {
type: "growfield",
indicator: 'Saving...',
tooltip: "Enter a direction...",
onblur: function (value, settings) {
console.log(this);
console.log(value);
console.log(settings);
return (value);
},
cancel: 'Cancel',
submit: 'Save',
growfield: {},
autocomplete: {
source: function (request, response) {
$.ajax({
url: '../api/standarddirections/?q=' + request.term,
dataFilter: function (data) { return data; },
success: response
});
},
minLength: 2
}
});