Develop Reference

missing ) after argument list jQuery

Recently I posted on Hight Charts where I did like to create dynamic charts based on Razor view loop. Here's the link - Dynamic Chart
I tried one of the solution provided by a SO user as follows:
<script>
async function createChart(containerName, dryArgument, operatingArgument){
let dryData = await fech(dryArgument)
let operatingData = await fech(operatingArgument)
Highcharts.chart(containerName, {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
{
name: 'Dry',
data: JSON.parse(dryData)
}, {
name: 'Operating',
data: JSON.parse(operatingData)
}]
});
}
</script>
In the front-end, used this:
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-lg-12 col-md-12 col-xs-12">
//Dynamic Chart - Starts
#if (Model.aLstTopsideModuleGroupBy.ToList().Count > 0)
{
foreach (var item in Model.aLstTopsideModuleGroupBy)
{
foreach (var item2 in item)
{
int i = 0;
<div id="container#i"></div>
<p class="highcharts-description">
</p>
<script>
window.onload = function () {
createChart('#container#i',#item2.BaseDry,#item2.BaseOp);
};
</script>
i++;
}
}
}
//Dynamic Chart - Ends
</div>
</div>
</div>
I am not sure if this is the correct way to do it, but got the following exception while trying:
Uncaught SyntaxError: missing ) after argument list
Is there any way to resolve the exception? I know, am doing something doing wrong here, any idea or suggestion would be appreciated.
Update 1: Exception

You don't have your Java Script correctly set up.
First of all, fetch() does return a promise that will give you a response object once fulfilled. That response object has json() function returning a promise that will return the json as JavaScript object once fulfilled. Promises are best awaited. The start of your createChart function should look this:
async function createChart(containerName, dryArgument, operatingArgument){
let dryData = await fetch(dryArgument) /* note you have a typo in your question */
let dryJson = await dryData.json();
let operatingData = await fetch(operatingArgument)
let operatingJson = await operatingData.json();
/* rest of code here */
In the series setup of HighCharts you now need to make these changes:
series: [
{
name: 'Dry',
data: dryJson
}, {
name: 'Operating',
data: operatingJson
}]
This does assume that dryJson and operatingJson are single dimension javascript arrays with numbers in it (so [1,2,3] will work, ['1', '2', '3'] doesn't nor does {items:[{score:1}]}.
The exact setup in the Razor page is a task I leave at you, it shouldn't be that hard to verify if the outcome of the rendered page matches the actual need.
For testing purposes I created stack snippet where I use posts and users from the Stack API as Json sources. As those are a slightly different shape you see a map over its items array to get the desired array of numbers:
async function createChart(containerName, dryArgument, operatingArgument){
let dryData = await fetch(dryArgument)
let dryJson = await dryData.json();
let operatingData = await fetch(operatingArgument)
let operatingJson = await operatingData.json();
Highcharts.chart(containerName, {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
{
name: 'Dry',
data: dryJson.items.map(i => i.score)
}, {
name: 'Operating',
data: operatingJson.items.map(i => i.reputation / 100)
}]
});
}
async function start() {
var key = '1*tsYg4Q3UbK06qftc8VmQ(('
await createChart('container1', 'https://api.stackexchange.com/2.3/posts?order=desc&sort=votes&pagesize=12&site=stackoverflow&key='+key, 'https://api.stackexchange.com/2.3/users?order=desc&sort=reputation&pagesize=12&site=stackoverflow&key='+key)
}
start()
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/highcharts.js"></script>
<div id="container1">
loading ...
</div>

Angular Typescript CKEDITOR

I am trying to use this inline mode but I am having a lot of problems with it. Some how the style is being removed and I am getting this error about reading 'config'. I wanted to make sure I was setting the config for this control my using the object editor. Any help would be great.
Cannot read properties of undefined (reading 'config')
view
<div class="col-sm-10">
<div class="controls">
<textarea id="indicationElementId"
formControlName="indicationContent"
class="form-control"
[(ngModel)]="item.ValueName"
placeholder="Indication text"
[class.has-error]="indicationContentNeedsErrorClass">
</textarea>
</div>
</div>
ts
CKEDITORInitializer() {
if ((<any>window).CKEDITOR.instances.indicationElementId)
(<any>window).CKEDITOR.instances.indicationElementId.destroy();
(<any>window).CKEDITOR.instances["indicationElementId"];
let editor = (<any>window).CKEDITOR.inline("indicationElementId", {
keystrokes: [
[13 /*Enter*/, 'doNothing'],
[(<any>window).CKEDITOR.SHIFT + 13, 'doNothing']
],
enterMode: 2,
toolbar: [
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Subscript', 'Superscript'] },
{ name: 'insert', items: ['SpecialChar'] },
{ name: 'source', items: ['Sourcedialog'] }
],
specialChars: ['©', '®', '–', '¾', '≥', '≤'],
removeButtons: '',
extraPlugins: 'sourcedialog'
});
editor.CKEDITOR.config.allowedContent = true;
editor.CKEDITOR.config.autoParagraph = false;
editor.CKEDITOR.disableAutoInline = true;
editor.on("change", () => {
this.ngZone.run(() => {
this.item.ValueName = this.getContent();
this.indicationContentChanged.next(null);
});
});
output

the problem is trying to set the config. Can try:
editor.config.set('allowedContent', true);
editor.config.set('autoParagraph', false);
editor.config.set('disableAutoInline', true);

Error ajax error-datatables warning: table id -example

I click "ok" and in console error :
I'm new to programming and I need help. I need to use json to form a datatable from several data structures. At this point, I'm stuck on this error. Help please understand
The function in the controller is json.
[HttpGet]
public JsonResult Lowx()
{
var query = db.Infos.
Include(x => x.Profile).
Include(x => x.Cars).
ToList();
return Json(new { data = query });
}
table and ajax
<table class= "table" id="example" >
<thead>
<tr >
<th>first name</th>
<th>last name</th>
<th>middle name</th>
<th>birthday</th>
<th>carname</th>
<th>carnumber</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function (data) {
$("#example").DataTable({
ajax: {
url: '#Url.Action("Lowx")',
type: 'GET',
dataSrc: ""
},
columns: [
{ data: "FirstName", name: "FirstName" },
{ data: "LastName", name: "LastName" },
{ data: "MiddleName", name: "MiddleName" },
{ data: "BirthDate", name: "BirthDate" },
{ data: "CarName", name: "CarName" },
{ data: "CarNumber", name: "CarNumber" }
]
});
Console: Failed to load resource: the server responded with a status of 500 (Internal Server Error).
SCREENSHOTS FOR ALFRED AND ALL)
Screenshot copy-paste

Try copy-pasting this example in your view file. When it works fine, change the url to parse your own data and it should work. Note that the action is a POST, not a GET.
[HttpPost]
public JsonResult Lowx()
{
var query = db.Infos.Include(x => x.Profile).Include(x => x.Cars).ToList();
return Json(new { data = query });
}
http://jsfiddle.net/bababalcksheep/ntcwust8/
$(document).ready(function () {
var url = 'http://www.json-generator.com/api/json/get/cbEfqLwFaq?indent=2';
var table = $('#example').DataTable({
'processing': true,
'serverSide': true,
'ajax': {
'type': 'POST',
'url': url,
'data': function (d) {
return JSON.stringify( d );
}
}
});
$('#reload').click(function (e) {
table.ajax.reload();
});
$('.toggleCols').click(function (e) {
e.preventDefault();
var column = table.column( $(this).attr('data-column') );
column.visible( ! column.visible() );
});
});

Please declare the DataTable as follows:
$('#example').DataTable({
"ajax": {
"url": '#Url.Action("Lowx")',
"dataSrc": ""
},
"columns": [
{ "FirstName", "data.Profile.FirstName" },
{ "LastName", "data.Profile.LastName" },
{ "MiddleName", "data.Profile.MiddleName" },
{ "BirthDate", "data.Profile.BirthDate" },
{ "CarName", "data.Cars.CarName" },
{ "CarNumber", "data.Cars.CarNumber" }
]
});
In Chrome, look at the Network tab to see if the Ajax call was formed properly. In Visual Studio, put a Breakppoint at the beginning of Lowx() to see if you reach the code. Please share your findings.

Using variable from a C# class in a Javascript code with Razor

I'm developing a web application with Telerik Kendo in Razor. Here is my problem:
I have a variable that I set as a type List<class>.
#{
ViewBag.Title = "Home Page";
var dpdminst = new DB();
var data = dpdminst.getdata();}
I want to be able to use this variable (data) to set my DataSource in my Javascript:
<script>
var displaydata = #data
$(document).ready(function () {
$("#grid").kendoGrid({
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
dataSource: {
data:displaydata,
schema: {
model: {
fields: {
amount: { type: "string" },
}
}
},
columns:["amount"]
}
});
});
</script>
Does anyone know if this can be done?
Here is my JsonResult:
public JsonResult GetJsonData()
{
var DBinst = new DB();
var TradeData = DBinst.tradedata();
var json = JsonConvert.SerializeObject(TradeData);
var result = new JsonResult()
{
Data = json
};
return result;
}

Have an action method which returns the data you want in JSON format. in your document.ready event, make an ajax call to get this data and then you can set it as your data source.
public ActionResult GetJsonData()
{
var dpdminst = new DB();
var data = dpdminst.getdata();
return Json(data,JsonRequestBehaviour.AllowGet);
}
and in your view use the getJSON method to get data from this action method and use that as needed. You may format the incoming json as per your UI requirements
$(document).ready(function () {
$.getJSON("#Url.Action("GetJsonData","YourControllerName")",function(data){
// you have your json data in the "data" variable.
// now you may use it to set the data source of your grid library
});
});

If you dont want to deal with ajax/json, then I would try to achieve what you want as follows:
<script>
var displaydata = [
#foreach (var record in dpdminst.getdata())
{
#: { amount: '#record' },
}
];
$(document).ready(function () {
$("#grid").kendoGrid({
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
dataSource: {
data:displaydata,
schema: {
model: {
fields: {
amount: { type: "string" },
}
}
},
},
columns:["amount"]
});
});
</script>
Also please notice that you had columns:["amount"] in a wrong place, also this code has to be in your cshtml for razor syntax to work properly.

asp:HiddenField get value from JavaScript Variable upon Button Click

I am quite new to JavaScript and jQuery, although I have often used jQuery UI Components, I barely made any modifications before. In this case, I needed to adjust the jQuery Slider to adjust the date, and I created something as the following: http://jsfiddle.net/ryn_90/Tq7xK/6/.
I'm happy with that so far, and now that I got the slider working as I would like it to, I would like to be able to bind a C# HiddenValue from the JavaScript attribute or from the HTML so I can save the date I have. Unless there is any better method to get this value to the backend...
So far I have been able to bind a JavaScript value from c# variables, but have not found out how to do it the other way round.
This is my javascript code:
<script>
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
jQuery(function() {
var dlg = jQuery("#sliderPopup").dialog({
draggable: true,
resizable: true,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10
});
dlg.parent().appendTo(jQuery("form"));
});
$("#popupOpener").click(function () {
$("#dialog").dialog("open");
});
$("#sliderPopupOpener").click(function () {
$("#sliderPopup").dialog("open");
});
});
$(function () {
$("#slider").slider({
max: 30,
min: -30,
value: 0,
slide: function (event, ui) {
$("#days").val(ui.value);
$("#date").text(addDaysToDate(parseInt($("#days").val())));
},
create: function (event, ui) {
$("#date").text(addDaysToDate(parseInt($("#days").val())));
}
});
});
$("#days").val($("#slider").slider("value"));
$("#days").change(function (event) {
var data = $("#days").val();
if (data.length > -30) {
if (parseInt(data) >= 0 && parseInt(data) <= 30) {
$("#slider").slider("option", "value", data);
}
else {
if (parseInt(data) < -30) {
$("#days").val("-30");
$("#slider").slider("option", "value", "-30");
}
if (parseInt(data) > 30) {
$("#days").val("30");
$("#slider").slider("option", "value", "30");
}
}
}
else {
$("#slider").slider("option", "value", "0");
}
$("#date").text(addDaysToDate(parseInt($("#days").val())));
});
function addDaysToDate(days) {
var mths = new Array("Jan", "Feb", "Mar",
"Apr", "May", "Jun", "Jul", "Aug", "Sep",
"Oct", "Nov", "Dec");
var d = new Date(<%=deadlineYear%>, <%=deadlineMonth%>, <%=deadlineDay%>);
d.setHours(d.getHours() + (24 * days));
var currD = d.getDate();
var currM = d.getMonth();
var currY = d.getFullYear();
return mths[currM] + " " + currD + ", " + currY;
}
jQuery(function() {
var dlg = jQuery("#sliderPopup").dialog({
draggable: true,
resizable: true,
show: 'Transfer',
hide: 'Transfer',
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10
});
dlg.parent().appendTo(jQuery("form"));
});
</script>
This is the asp.NET Code:
<div id="sliderPopup" title="Modify Deadline">
<div id="slider"></div>
<input type="text" id="days" value="0"/>
<div id="date"></div>
<asp:HiddenField ID="ModifiedDeadlineDateFromSlider" />
<asp:Button ID="DeadlineDateSave" Text="Save Deadline" runat="server" OnClick="saveDeadline" />
</div>
Please let me know if you need any more information. I would appreciate your answers and comments.

You can set the date value to the hidden field by adding just single line of code. Add the following code inside the slide event and the create event of your .slider function
$("#ModifiedDeadlineDateFromSlider").val(addDaysToDate(parseInt($("#days").val())));
or
$("#ModifiedDeadlineDateFromSlider").val($("#date").text());
Your .slider function will look like this after the modification.
$(function () {
$("#slider").slider({
max: 30,
min: -30,
value: 0,
slide: function (event, ui) {
$("#days").val(ui.value);
$("#date").text(addDaysToDate(parseInt($("#days").val())));
$("#ModifiedDeadlineDateFromSlider").val($("#date").text());
},
create: function (event, ui) {
$("#date").text(addDaysToDate(parseInt($("#days").val())));
$("#ModifiedDeadlineDateFromSlider").val($("#date").text());
}
});
});
P.S. Add the mentioned line of code to create event only if you want to set date in hidden field value on creation of slider also. If you want to set only if date is changes then just add that code in slide event only.
Note: In this particular scenerio it was not working with the changes also. So after discussion and couple of trials we discovered one more thing which was minor but created the problem. asp hidden field's property ClientIDMode was not set to static due to which its ID was changed during rendering and as a result value was not available in code behind late
Hope that helps!

To pass javascript value to c# do this way:
<script type="text/javascript">
function abc()
{
var str = "yourValue";
document.getElementById("HiddenField1").value = str;
}
</script>
and then access HiddenField1.Value on code-behind.
To pass c# variable to javascript you can bind public variable like this:
<%=this.YourVariable%>