passing json values to highcharts from .net code behind - c#

var Javascriptxvalue= $.parseJSON($("#hdnXaxis").val());
var Javascriptyvalue= $.parseJSON($("#hdnYaxis").val());
$(document).ready(DrawMyGraph1);
function DrawMyGraph1() {
chart = new Highcharts.Chart(
{
chart: {
type: 'column',
renderTo: 'container3',
defaultSeriesType: 'area'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: Javascriptxvalue,
labels: {
enabled: false
}
},
yAxis: {
title: {
text: 'No of Patients'
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return this.series.name + ' - ' + Highcharts.numberFormat(this.y, 0);
}
},
series: Javascriptyvalue
});
}
c# code
void FastMovingStocksBarChart(string date1, string date2, string selperiod, string sql)
{
DataSet dschart = new DataSet();
dschart = _obj_MIS.DoctorpatientreportChart(date1, date2, selperiod,sql);
List lstXaxis = new List();
List lstcolors = new List();
lstcolors.Add("#3366DD");
//lstcolors.Add("#FFEE22");
//lstcolors.Add("#33BBCC");
lstcolors.Add("#CC0022");
//lstcolors.Add("#FF0000");
lstcolors.Add("#339900");
lstcolors.Add("#FF7700");
lstcolors.Add("#33BBCC");
lstcolors.Add("#99EEEE");
lstcolors.Add("#6699FF");
lstcolors.Add("#9966BB");
lstcolors.Add("#99BB66");
lstcolors.Add("#FF7700");
lstcolors.Add("#FFEE22");
lstcolors.Add("#FFCBB9");
lstcolors.Add("EAEC93");
lstcolors.Add("D7FBE6");
lstcolors.Add("FFCACA");
for (int i = 0; i < dschart.Tables[0].Rows.Count; i++)
{
lstXaxis.Add(dschart.Tables[0].Rows[i]["Doctor Name"].ToString());
}
List<ChartEx> lstseries = new List<ChartEx>();
int count = 0;
for (int i = 0; i < dschart.Tables[0].Rows.Count; i++)
{
ChartEx oEx = new ChartEx();
oEx.name = dschart.Tables[0].Rows[i]["Doctor Name"].ToString();
//oEx.data.Add(Convert.ToInt32(dschart.Tables[0].Rows[i]["Patients"]));
oEx.data = new List<int>() { Convert.ToInt32(dschart.Tables[0].Rows[i]["Patients"]) };
oEx.color = lstcolors[count];
lstseries.Add(oEx);
count++;
if (count >= lstcolors.Count)
count = 0;
}
//Convert X axis data to JSON
JavaScriptSerializer oSerializer1 = new JavaScriptSerializer();
hdnXaxis.Value = oSerializer1.Serialize(lstXaxis);
//Convert Y axis data to JSON
JavaScriptSerializer oSerializer2 = new JavaScriptSerializer();
hdnYaxis.Value = oSerializer1.Serialize(lstseries);
}
I am not getting the values for "Javascriptxvalue" and "Javascriptyvalue" inside the chart function
can anyone help me
Regards
Prabhu

Presumably, 'hdnXaxis' is the id of a HiddenFieldControl server control? Perhaps the id is not what you think
var Javascriptxvalue= $.parseJSON($("#"+ <%= hdnXaxis.ClientId %>).val());
Instead of passing strings via an input, you could use server tags to directly inject the values into the page. Like this:
<%= "alert('" + MyPublicProperty + "')" %>
This should alert you to the value of the property defined in your code behind. You could then set it to a js variable like so:
<%= "var Javascriptxvalue = '" + xProperty + "';" %>
You will need to run this bit of code directly in an aspx/ascx/razor page to set the variables though, I think it's better than relying on a control with a particular id though.

Related

amchart in listview post back

I have a webform app where I list items using listview.
there are an amchart created in each item, and I'm using stringBuilder write the script from code, then inserting it into a div called "chartArea" to load the script in each amchart item:
Literal lit = new Literal();
lit.Text = sb2.ToString();
chartArea.Controls.Add(lit);
the above works great during the first page load, but then when I trigger a postback event, I get an error on amchart file:
Unhandled exception at line 106, column 73 in http://localhost:33154/Scripts/amcharts/amcharts.js
0x80004005 - JavaScript runtime error: Unspecified error.
What Shall I do?
This is my code to load the chart:
public void buildChart(string ACreg, HtmlGenericControl chartArea)
{
Literal lit = new Literal();
lit.Text = "";
chartArea.Controls.Add(lit);
//-------- create chart data table----------
int Rdays = 90;
DataTable engChartData = new DataTable();
engChartData.Columns.Add("date", typeof(string));
engChartData.Columns.Add("eng1Val", typeof(string));
engChartData.Columns.Add("eng2Val", typeof(string));
DateTime initialDate = DateTime.Now.AddDays(-Rdays);
for (int i = 0; i <= Rdays; i++)
{
string dateMe = initialDate.AddDays(i).ToString("yyyy-MM-dd");
engChartData.Rows.Add(dateMe, "0", "0");
}
//--------- bind chart data-----------------
using (APMEntitiesW APMe = new APMEntitiesW())
{
var countDate = APMe.Points.Where(x => x.point_Del == false && x.point_Act == true && x.point_Reg == ACreg).GroupBy(g => new { g.point_DateTime, g.point_EGT1, g.point_EGT2 }).Select(lg => new { date = EntityFunctions.TruncateTime(lg.Key.point_DateTime), eng1Val = lg.Key.point_EGT1, eng2Val = lg.Key.point_EGT2 }).ToList();
foreach (DataRow dr in engChartData.Rows)
{
foreach (var data in countDate)
{
string datFromQ = data.date.Value.ToString("yyyy-MM-dd").Replace(" 12:00:00 AM", "");
string deteFromDT = dr["date"].ToString().Replace(" 12:00:00 AM", "");
if (datFromQ == deteFromDT)
{
dr["eng1Val"] = data.eng1Val.ToString();
dr["eng2Val"] = data.eng2Val.ToString();
break;
}
}
}
StringBuilder sb = new StringBuilder();
foreach (DataRow item in engChartData.Rows)
{
string date = string.Format("{0:MMM DD,YYYY}", item["date"]);
sb.AppendLine(#"{""date"": """ + date + #""",");
sb.AppendLine(#"""Engine1"": """ + item["eng1Val"] + #""",");
sb.AppendLine(#"""Engine2"": """ + item["eng2Val"] + #"""},");
}
//ChartData = sb.ToString();
StringBuilder sb2 = new StringBuilder();
sb2.AppendLine(#"<script> var chart = AmCharts.makeChart(""chart" + ACreg + #""", {");
sb2.AppendLine(#"""type"": ""serial"",""categoryField"": ""date"", ""startEffect"": ""easeOutSine"",""dataDateFormat"": ""DD-MM-YYYY"", ""startDuration"": 1,");
sb2.AppendLine(#"""categoryAxis"": {""gridPosition"": ""start"", ""autoGridCount"": false, ""balloonDateFormat"": ""DD MMM YYYY""},");
sb2.AppendLine(#" ""chartScrollbar"": {""enabled"": true, ""offset"": 40, ""oppositeAxis"": false, ""scrollbarHeight"": 13},");
sb2.AppendLine(#" ""chartCursor"": { ""enabled"": true}, ""trendLines"": [],");
sb2.AppendLine(#"""graphs"": [{""balloonText"": ""[[title]]: [[value]]"", ""bullet"": ""round"", ""id"": ""AmGraph-1"", ""title"": ""Engine1"", ""type"": ""smoothedLine"", ""valueField"": ""Engine1"", ""bullet"": ""bubble"", ""bulletBorderAlpha"": 1, ""bulletSize"": 1,""bulletBorderColor"": ""#FF0000"",""bulletBorderThickness"": 1, ""bulletColor"": ""#000000"",""fillAlphas"": 0.41, },");
sb2.AppendLine(#"{""balloonText"": ""[[title]]: [[value]]"",""bullet"": ""square"", ""id"": ""AmGraph-2"", ""title"": ""Engine2"", ""type"": ""smoothedLine"", ""valueField"": ""Engine2"", ""bullet"": ""bubble"",""bulletBorderAlpha"": 1, ""bulletSize"": 1, ""bulletBorderColor"": ""#0098FF"",""bulletBorderThickness"": 1, ""bulletColor"": ""#0098FF"", ""lineColor"": ""#0098FF"",}],");
sb2.AppendLine(#"""guides"": [], ""valueAxes"": [ { ""id"": ""ValueAxis-1"", ""title"": ""Consumption Unit""} ], ""allLabels"": [], ""balloon"": {}, ""legend"": { ""enabled"": true, ""markerBorderThickness"": 0, ""useGraphSettings"": true},");
sb2.AppendLine(#"""titles"": [ { ""id"": ""Title-1"", ""size"": 15, ""text"": ""Engine Fuel Consumption"" } ], ""dataProvider"": [" + sb.ToString() + " ] }) </script>");
lit.Text = sb2.ToString();
chartArea.Controls.Add(lit);
}
}

Consume ASMX service using Sencha 2

I am just begining to learn Sencha.
I have an asmx that returns a List so the xml looks like;
<Result>
<string>One</string>
<string>Two><string>
</Results>
Now all I want to do is show that in a List.
So my Sench code looks like;
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
var treeStore = Ext.create('Ext.data.TreeStore', {
model: 'ListItem',
defaultRootProperty: 'items',
proxy: {
type: 'ajax',
url: 'http://localhost:81/MyASMX.asmx/Test'
}
});
Ext.application({
name: 'Sencha',
launch: function () {
Ext.create('Ext.NestedList', {
fullscreen: true,
store: treeStore,
detailCard: {
html: 'You are viewing the detail card!'
}
});
}
});
But I get an empty list with a title bar that is also empty.
With .Asmx you can also bind xml to your treestore
here is the code that might be help you
function BindData(dataxml)
{
dataxml = dataxml.replace(/>/g, ">");
dataxml = dataxml.replace(/</g, "<");
var doc;
if (window.ActiveXObject) { //IE
var doc = new ActiveXObject("Microsoft.XMLDOM");
doc.async = "false";
doc.loadXML(dataxml);
} else { //Mozilla
var doc = new DOMParser().parseFromString(dataxml, "text/xml");
}
var store = new Ext.getStore('treestore');
store.removeAll();
var DataLen = doc.getElementsByTagName('FirstNode').length;
for (var i = 0; i < DataLen; i++) {
var arrnodename = doc.getElementsByTagName('nodeName')[i].firstChild.nodeValue.replace(/\"/g, '');
var arrnodename2 = doc.getElementsByTagName('nodeName2')[i].firstChild.nodeValue.replace(/\"/g, '');
store.add({ C1: arrnodename[0], C2: arrnodename2[0]});
}
}

DotNet HighCharts , Populates a pie with the result of a query

I need to populate a pie with data which are the result of a query (LINQ To SQL)
The problem is i cannot manage to add a foreach inside this code to insert my data instead of the static Firefox,Chrome,IE ect ...
protected void Page_Load(object sender, EventArgs e)
{
//RepeaterVersionsForPie.DataSource = DAaccess.LibDataVersion.LibDataVersion.GetNumberOfCompaniesUsingEachVersions();
//RepeaterVersionsForPie.DataBind();
var test = DAaccess.LibDataVersion.LibDataVersion.GetNumberOfCompaniesUsingEachVersions();
Highcharts chart = new Highcharts("chart")
.InitChart(new Chart { PlotShadow = false })
.SetTitle(new Title { Text = "Browser market shares at a specific website, 2010" })
.SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }" })
.SetPlotOptions(new PlotOptions
{
Pie = new PlotOptionsPie
{
AllowPointSelect = true,
Cursor = Cursors.Pointer,
DataLabels = new PlotOptionsPieDataLabels
{
Color = ColorTranslator.FromHtml("#000000"),
ConnectorColor = ColorTranslator.FromHtml("#000000"),
Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }"
},
Point = new PlotOptionsPiePoint
{
Events = new PlotOptionsPiePointEvents
{
Click = "function() { alert (this.category +': '+ this.y); }"
}
}
}
})
.SetSeries(new Series
{
Type = ChartTypes.Pie,
Name = "Browser share",
Data = new Data(new object[]
{
new object[] { "Firefox", 45.0 },
new object[] { "IE", 26.8 },
new DotNet.Highcharts.Options.Point
{
Name = "Chrome",
Y = 12.8,
Sliced = true,
Selected = true
},
new object[] { "Safari", 8.5 },
new object[] { "Opera", 6.2 },
new object[] { "Others", 0.7 }
})
});
ltrChart.Text = chart.ToHtmlString();
}
Actually , i need to be able to insert something like this:
foreach ( var item in test )
{
new object[] { item.name, item.count}
}
But VS doesn't allow me to do such thing
Thanks in advance for your help ...
You could create an extension method for whatever type DAaccess.LibDataVersion.LibDataVersion.GetNumberOfCompaniesUsingEachVersions() returns and have it return the results in the Pie-shaped Series format.
public static class DotNetHighChartsExtensions
{
public static object[] ToPieChartSeries(this WhateverThatTypeIs data)
{
var returnObject = new List<object>();
foreach ( var item in data )
{
returnObject.Add(new object[] { item.name, item.count});
}
return returnObject.ToArray();
}
}
Then in your code where you have your static code, you'd just replace it with:
Data = new Data(test.ToPieChartSeries())
Alternatively, you could have the ToPieChartSeries method return the Data object that is being sought for by the Series object.
While I haven't worked with this DotNet.HighCharts project, I have worked with and built my own HighCharts objects for a couple of MVC projects. On the face of it, it looks like this are ultimately doing the same thing I did: Create a .NET object that could be serialized as JSON and recognized by the HighCharts javascript library.
SetSeries(new Series {
Type = ChartTypes.Pie,
Data = new Data(test.Select(d => new { Name = d.name, Y = d.count }).ToArray())
})

Why do I get an "$ is not defined" error?

I got an ActionResult TabNotes which returns a View for a tab which shows notes from a database in a grid. On the tab is a button for ActionResult CreateNote, which returns a PartialView and after saving the note I redirect back to the ActionResult TabNotes with
return RedirectToAction("TabNotes", new { modelEntity = "Phrase", id = itemId});
However, when it goes to the action result TabNotes using this redirect it does not show the grid. The javascript gives the following error
Uncaught ReferenceError: $ is not defined (anonymous function)
Uncaught ReferenceError: ko is not defined (anonymous function)
This does not happen the first time it goes to ActionResult. Using breakpoints the following part of the ActionResult TabNotes:
[...]
Model.Grid.url = Url.Action("TabNoteData", new { id = Model.meta.entity, itemId = Model.meta.id.Value});
}
return View("TabNotes", Model);
}
gives the same input values in Model for the first time and the second time. Where can this error come from?
Edit: Firebug shows the following errors:
prompt aborted by user
throw Components.Exception...by user", Cr.NS_ERROR_NOT_AVAILABLE); nsPrompter.js (regel 462 <Systeem>
$ is not defined
$(document).ready(function(){$('#tblTN...tes/44?cmd=refresh" id="TNPhrase44"> 44?mod...=Phrase (regel 2)
ko is not defined
var viewModel=ko.mapping.fromJ...],"buttons":[],"PostAction":null}}); 44?mod...=Phrase (regel 12)
Below is the javascript and code
#model test.Web.Framework.Areas.Administration.Models.TabNotesModel
#using (UI.DocumentReadyScript())
{
if (Model.meta.id.HasValue)
{
UI.jQuery("#tbl" + Model.meta.modelname).flexigrid(Model.Grid);
}
}
<form method="post" action="#Url.Action("TabNotes", new { cmd = "refresh" })" id="#Model.meta.modelname">
<div class="ui-state-highlight ui-corner-all highlight" data-bind="visible: meta.message">
<span class="ui-icon ui-icon-info"></span><strong data-bind="text: meta.message">
</strong>
</div>
#using (UI.BeginBlock("Administation.TabNotes", UI.Label("Notes", "Notes").ToString(), test.Web.Framework.Core.enumIcons.pencil, false, false))
{
<table id="#("tbl" + Model.meta.modelname)">
</table>
}
</form>
<script type="text/javascript">
(function() {
var viewModel=ko.mapping.fromJS(#Html.Raw(UI.JavascriptEncode(Model)));
viewModel.getData=function() { return ko.mapping.toJSON( this ); };
viewModel.setData=function(data){
$('#tbl'+this.meta.modelname()).flexigrid( data.Grid);
ko.mapping.updateFromJS(this,data);
};
$('##Model.meta.modelname').koform({viewmodel: viewModel , validate : {errorElement:'p' } } );
$('##Model.meta.modelname').koform('applyBindings');
$('#load-partial').click(function() {
$('#partial').load('#Url.Action("CreateNote", "Entity", new {itemId = #Model.meta.id, modelEntity = "Phrase"})');
});
})();
</script>
<div id="partial"></div>
<button type="button" id="load-partial">Create Note</button>
'
public ActionResult CreateNote(
[ModelBinder(typeof(Models.JsonModelBinder))]
NoteModel Model, string cmd, long? itemId, string modelEntity)
{
if (cmd == "Save")
{
Model.meta.message = "Note saved";
test.Database.User User = UserRepository.GetUser(1);
Entity entity = NotesRepository.GetEntity("Phrase");
NotesRepository.StoreNote(Model.subject, Model.text, User, entity, itemId);
return RedirectToAction("TabNotes", new { modelEntity = "Phrase", id = itemId});
}
Model.meta.modelname = "CreateNote";
Model.meta.JsViewModelType = "EditNoteModel";
Model.meta.PostAction = Url.Action("CreateNote", new { cmd = "Save", itemId = itemId});
return PartialView("CreateNotePartial",Model);
}
'
public ActionResult TabNotes([ModelBinder(typeof(Models.JsonModelBinder))]
TabNotesModel Model, string cmd, string modelEntity, long? id)
{
if (modelEntity != null)
{
Model.meta.entity = modelEntity;
}
Entity entity = NotesRepository.GetEntity(Model.meta.entity);
if (id.HasValue)
{
Model.meta.id = id;
}
if (Model.meta.id.HasValue)
{
Model.meta.modelname = "TN" + Model.meta.entity + Model.meta.id.Value.ToString();
Dictionary<string, object> defaultValues = new Dictionary<string, object>();
defaultValues.Add("Entity", entity.EntityId);
defaultValues.Add("ItemId", Model.meta.id.Value);
Entity noteEntity = NotesRepository.GetEntity("Note");
var grid = UI.GetEntityFlexiGrid(noteEntity, true, true, true, true, defaultValues);
grid.buttons.Clear();
//grid.buttons.Add(new Button { onpress = "CreateNote", action = Url.Action("CreateNote"), name = "CreateNote", postdata = new { meta = Model.meta }});
grid.title = "";
Model.Grid = grid;
Model.Grid.url = Url.Action("TabNoteData", new { id = Model.meta.entity, itemId = Model.meta.id.Value});
}
return View("TabNotes", Model);
}
'
public GridResult TabNoteData(string id, long itemId, FlexigridRequest request, string cmd)
{
GridResult returnValue = null;
var entity = NotesRepository.GetEntity(id);
Entity noteEntity = NotesRepository.GetEntity("Note");
//var Acess = UIRepository.GetEntityAccess(id);
FlexigridConfiguration grid;
Dictionary<string, object> defaultValues = new Dictionary<string, object>();
defaultValues.Add("Entity", entity.EntityId);
defaultValues.Add("ItemId",itemId);
grid = UI.GetEntityFlexiGrid(noteEntity, true, true, true, true, defaultValues);
IQueryable q = NotesRepository.GetNotes(entity.EntityId, itemId);
var sortField = entity.EntityFields.SingleOrDefault(c => c.Name == request.sortname);
if (sortField == null)
{
request.sortname = grid.sortname;
}
IQueryable qdata = null;
if (!string.IsNullOrEmpty(request.sortname) && request.sortname != "undefined")
{
switch (request.sortorder)
{
case enumFlexigridRequestSortOrder.asc:
qdata = q.OrderBy(request.sortname + " ascending");
break;
case enumFlexigridRequestSortOrder.desc:
qdata = q.OrderBy(request.sortname + " descending");
break;
}
}
if (!string.IsNullOrEmpty(request.query) && !string.IsNullOrEmpty(request.qtype))
{
qdata = qdata.Where(request.qtype.SanitizeFieldExpression() + ".Contains(#0)", request.query);
}
if (request.q != null && request.q.Length > 0)
{
for (int i = 0; i < request.q.Length; i++)
{
var type = UIRepository.GetType(id);
var property = type.GetProperty(request.q[i]);
System.ComponentModel.TypeConverter tc = System.ComponentModel.TypeDescriptor.GetConverter(property.PropertyType);
string sv = request.v[i];
if (sv == null || sv == "null")
{
qdata = qdata.Where(request.q[i].SanitizeFieldExpression() + "=#0", (object)null);
}
else
{
object v = tc.ConvertFromString(sv);
qdata = qdata.Where(request.q[i].SanitizeFieldExpression() + "=#0", v);
}
}
}
string settingName = "Grid." + id + ".Rp";
var setting = UIRepository.GetQuery<test.Database.UserSetting>().SingleOrDefault(uc => uc.CreatedById == CurrentUser.UserId && uc.Name == settingName);
if (setting == null)
{
setting = UIRepository.Create<test.Database.UserSetting>();
setting.Name = settingName;
setting.Value = request.rp.ToString();
UIRepository.Add(setting);
}
else
{
if (request.rp.ToString() != setting.Value)
{
setting.Value = request.rp.ToString();
UIRepository.Update(setting);
}
}
int rowId = 0;
var datarows = new List<object>();
foreach (var record in qdata.Skip((request.page - 1) * request.rp).Take(request.rp).GetData())
{
var cellValues = new List<object>();
foreach (var gc in grid.colModel.OrderBy(c => c.di))
{
cellValues.Add(gc.ToString(UI, record));
}
var row = new { id = rowId, cell = cellValues.ToArray() };
datarows.Add(row);
rowId++;
}
returnValue = Grid(request.page, qdata.Count(), datarows.ToList());
return returnValue;
}
That error can only be caused be one of three things:
Your JavaScript file is not being properly loaded into your page
You have a botched version of jQuery. This could happen because someone edited the core file, or a plugin may have overwritten the $ variable.
You have JavaScript running before the page is fully loaded, and as such, before jQuery is fully loaded.
You should check the Firebug net panel to see if the file is actually being loaded properly. If not, it will be highlighted red and will say "404" beside it. If the file is loading properly, that means that the issue is number 2.
Make sure all javascript code is being run inside a code block such as:
$(document).ready(function () {
//your code here
});
This will ensure that your code is being loaded after jQuery has been initialized.
One final thing to check is to make sure that you are not loading any plugins before you load jQuery. Plugins extend the "$" object, so if you load a plugin before loading jQuery core, then you'll get the error you described.
So to avoid that you can use a "bodyguard" function like the following:
( function($) {
//We can now use $ as I implemented the bodyguard!
$(document).ready(function() {
//your code...
});
} ) ( jQuery );

JSON post works in IE, not in FF

I have an asp.net MVC app. One of the forms posts json data to a public method (not an action, perhaps it will be later) on the controller. This works great in IE 8. However, it does not work in Firefox 3.5.
The view is a list of jquery sortable objects inside of a form. Here is a stripped down version of the form:
<form class="cmxform" id="UserForm" method="post" action="/Home/Index">
//...the <li> objects that are sortable
<input type="submit" value="Save Changes" onclick="SaveLinks();" />
</form>
Here is the javascript to fire when the button is clicked. /Home/ProcessLinks is a public method in the controller, and Visible and Invisible is a parameter being passed to the method:
function SaveLinks() {
var VisibleList = document.getElementById('sortable1');
var InvsibleList = document.getElementById('sortable2');
for (var i = 0; i < VisibleList.childNodes.length; i++) {
var link = {};
link.id = VisibleList.childNodes[i].childNodes[1].innerText;
link.title = VisibleList.childNodes[i].childNodes[2].innerText;
link.description = VisibleList.childNodes[i].childNodes[3].innerText;
link.url = VisibleList.childNodes[i].childNodes[4].innerText;
link.order = i + 1;
$.post("/Home/ProcessLinks/Visible", $.toJSON(link), function(data, testStatus) {
/*This is where the user can be notified that the item was saved successfully*/
//alert(link.id + " has been updated");
window.location.reload();
}, "text");
}
for (var i = 0; i < InvsibleList.childNodes.length; i++) {
var link = {};
link.id = InvsibleList.childNodes[i].childNodes[1].innerText;
link.title = InvsibleList.childNodes[i].childNodes[2].innerText;
link.description = InvsibleList.childNodes[i].childNodes[3].innerText;
link.url = InvsibleList.childNodes[i].childNodes[4].innerText;
link.order = i + 1;
$.post("/Home/ProcessLinks/Invisible", $.toJSON(link), function(data, testStatus) {
/*This is where the user can be notified that the item was saved successfully*/
//alert(link.id + " has been updated");
window.location.reload();
}, "text");
}
}
It is my belief that the above method does not get triggered when in Firefox, as the breakpoints I place with Firebug don't get hit.
For fun, here is my serverside function:
public string ProcessLinks(string id)
{
string Type = id;
string json = Request.Form[0];
var serializer = new DataContractJsonSerializer(typeof(JsonObject));
var memoryStream = new MemoryStream(Encoding.Unicode.GetBytes(json));
JsonObject item = (JsonObject)serializer.ReadObject(memoryStream);
memoryStream.Close();
return "hello";
}
And my custom class JsonObject:
[DataContract]
public class JsonObject
{
[DataMember]
internal int id { get; set; }
[DataMember]
internal string title { get; set; }
[DataMember]
internal string description { get; set; }
[DataMember]
internal string order { get; set; }
[DataMember]
internal string url { get; set; }
}
Do you have any idea what I'm doing wrong? I can't seem to nail it down.
Firefox does not support innerText. Use innerHTML instead.
Another possible reason is the following HTML:
<div>
<span>foo</span>
<span>bar</span>
</div>
will have the following structure in IE
div
|---span(childNode[0])
| |
| '---text---foo
|
'---span(childNode[1])
|
'---text---bar
while in all other browsers including firefox it will have the following structure:
div
|---text(childNode[0])---newline and tabs
|
|---span(childNode[1])
| |
| '---text---foo
|
|---text(childNode[2])---newline and tabs
|
'---span(childNode[3])
|
'---text---bar
This ridiculous behavior is mandated by the W3C spec. So IE is technically wrong here.
Now, I notice in your code you make assumptions about childNode indexing without checking element.nodeName. That could be where the problem lies.
Update:
after looking at the code you uploaded I removed the <input type="submit... button from the form and added a button tag outside the form like this:
</form>
<button onclick="SaveLinks();">Save Changes</button>
After click this I got an error in FireFox:
"VisibleList.childNodes[i].childNodes[1] is undefined"
To correct this I took the code from jerjer's answer ( i had to modify it a bit ) and came up with the following SaveLinks() method that works in FF.
function SaveLinks() {
$('#sortable1 li').each(function(i, item) {
var divs = $('div:not(.imagecontainer)', this);
var link = {
id: $(divs[0]).text(),
title: $(divs[1]).text(),
description: $(divs[2]).text(),
url: $(divs[3]).text(),
order: i + 1
};
$.post("/Home/ProcessLinks/Visible", $.toJSON(link), function(data, testStatus) {
/*This is where the user can be notified that the item was saved successfully*/
alert(link.id + " has been updated");
//window.location.reload();
}, "text");
});
$('#sortable2 li').each(function(i, item) {
var divs = $('div:not(.imagecontainer)', this);
var link = {
id: $(divs[0]).text(),
title: $(divs[1]).text(),
description: $(divs[2]).text(),
url: $(divs[3]).text(),
order: i + 1
};
$.post("/Home/ProcessLinks/Invisible", $.toJSON(link), function(data, testStatus) {
/*This is where the user can be notified that the item was saved successfully*/
alert(link.id + " has been updated");
//window.location.reload();
}, "text");
});
return false;
}
Since you are using jquery, you might as well use the jquery's shorthand for getting/setting text/html.
for instance getting text content:
link.id = $(VisibleList.childNodes[i].childNodes[1]).text();
link.title = $(VisibleList.childNodes[i].childNodes[2]).text();
link.description = $(VisibleList.childNodes[i].childNodes[3]).text();
link.url = $(VisibleList.childNodes[i].childNodes[4]).text();
link.order = i + 1;
getting html content:
link.id = $(VisibleList.childNodes[i].childNodes[1]).html();
link.title = $(VisibleList.childNodes[i].childNodes[2]).html();
link.description = $(VisibleList.childNodes[i].childNodes[3]).html();
link.url = $(VisibleList.childNodes[i].childNodes[4]).html();
link.order = i + 1;
This is the jquery equivalent:
$('#sortable1 li').each(function(){
var $li = $(this);
var link = {};
link.id = $li.children(1).text();
link.title =$li.children(2).text();
link.description = $li.children(3).text();
link.url = $li.children(4).text();
link.order = i + 1;
$.post("/Home/ProcessLinks/Visible", $.toJSON(link), function(data, testStatus) {
/*This is where the user can be notified that the item was saved successfully*/
//alert(link.id + " has been updated");
window.location.reload();
}, "text");
});

Categories