I have have following line that is working correctly:
html: "<td>" + goalcard.Name + "</td><td>" + goalcard.Customer + "</td><td>" + goalcard.PlannedDate + "</td><td>" + goalcard.CompletedDate + "</td>"
When I try this I get my JSON displayed.
html: "<td>" + goalcard.Name + "</td><td>" + goalcard.Customer + "</td><td>" + goalcard.PlannedDate + "</td><td>" + goalcard.CompletedDate + "</td><td>" + #Html.ActionLink("Ändra", "Edit") | #Html.ActionLink("x", "Inactive", new { #class = "deleteLink" }) + "</td>"
I also recieve a bunch of errors such as:
'return' statement outside of function'
Expected ';'
Syntax error
Expected identifier or string
Am I doing something wrong here?
This is the complete function:
result.forEach(function (goalcard) {
$("#GoalcardSearchResult tbody").append(
$('<tr/>', {
click: function() {
id = goalcard.Id;
var url = '#Url.Action("AnswerForm", "AnswerNKI", new { id = "__id__"})';
window.location.href = url.replace('__id__', id);
},
// steg Create a row for each result
html: "<td>" + goalcard.Name + "</td><td>" + goalcard.Customer + "</td><td>" + goalcard.PlannedDate + "</td><td>" + goalcard.CompletedDate + "</td><td>" + #(Html.ActionLink("Ändra", "Edit")) | #(Html.ActionLink("x", "Inactive", new { #class = "deleteLink" })) + "</td>"
}));
});
$('#GoalcardSearchResult tbody').trigger("update");
$("#GoalcardSearchResult").tablesorter();
});
return false;
Thanks in advance!
This code
"</td><td>" + #(Html.ActionLink("Ändra", "Edit")) | #(Html.ActionLink("x", "Inactive", new { #class = "deleteLink" })) + "</td>"
generates
"</td><td>" + Ändra | x + "</td>"
Note that generated anchors do not have string identifiers (' or "), so you get errors. You should change code to
"</td><td>" + '#(Html.ActionLink("Ändra", "Edit")) | #(Html.ActionLink("x", "Inactive", new { #class = "deleteLink" }))' + "</td>"
Related
I am using the for loop below to retrieve the data form a "x-ml" result set and I build a t body out of the results. What I would like to do is assign a class to several rows based on the nodes value. For example:
-If Percent Reporting > 90% then assign class "green",
-If Percent Reporting > 70% and less than 90% then assign class "yellow",
-If Percent Reporting < 70% then assign class "red".
I was thinking I could analyze this while I was building the t body and assign the classes individually to each t d or cell, but I'm not sure how to go about it.
Ultimately I want to conditional format three of my columns differently based on their values.
Any ideas or tips would be much appreciated.
for (i = 0; i < x.length; i++) {
tbody += "<tr><td>" + x[i].getElementsByTagName("Site")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("TotalUnits")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("PercentReporting")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("PercentNotReporting")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("PercentBypassed")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("NumberLogins")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("NumberAlarms")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("TotalEnergySavings")[0].childNodes[0].nodeValue +
"</td></tr>";
}
In your loop just create a variable for your class and use some if conditions to set the class.
for (i = 0; i < x.length; i++) {
var statusClass = 'good', //default value
percentReporting = parseFloat(x[i].getElementsByTagName("PercentReporting")[0].childNodes[0].nodeValue);
if (percentReporting < 70)
statusClass = 'bad';
else if (percentReporting < 90 && percentReporting > 70)
statusClass = 'warning';
tbody += "<tr><td>" + x[i].getElementsByTagName("Site")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("TotalUnits")[0].childNodes[0].nodeValue +
"</td><td class='" + statusClass + "'>" + percentReporting +
"</td><td>" + x[i].getElementsByTagName("PercentNotReporting")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("PercentBypassed")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("NumberLogins")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("NumberAlarms")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("TotalEnergySavings")[0].childNodes[0].nodeValue +
"</td></tr>";
}
Just calculate the class you want to add and add it to the row:
for (i = 0; i < x.length; i++) {
var percentReporting = x[i].getElementsByTagName("PercentReporting")[0].childNodes[0].nodeValue;
var class = "";
if(percentReporting > 90)
class = "green";
else if(percentReporting > 70)
class = "yellow";
else
class = "red";
tbody += "<tr><td>" + x[i].getElementsByTagName("Site")[0].childNodes[0].nodeValue +
"</td><td class ='" + class +"'>" + x[i].getElementsByTagName("TotalUnits")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("PercentReporting")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("PercentNotReporting")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("PercentBypassed")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("NumberLogins")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("NumberAlarms")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("TotalEnergySavings")[0].childNodes[0].nodeValue +
"</td></tr>";
}
I am working on IndexedDB using JsStore wrapper. Everything works fine in the code when I set the column name directly in the Where block but if I make it dynamic as shown in the following code then the code doesn't work.
var searchValueType = $('input:radio[name=searchValueType]:checked').val();
var searchValue = $("#searchValue").val();
var column1 = 'Name';
var whereClause = column1+':'+searchValue;
alert ("where clause >> "+whereClause);
DbConnection.select({
From: "Student",
Where: {
whereClause
},
},
function (students) {
var HtmlString = "";
students.forEach(function (student) {
HtmlString += "<tr ItemId=" + student.Id + "><td>" +
student.Name + "</td><td>" +
student.Gender + "</td><td>" +
student.Country + "</td><td>" +
student.City + "</td><td>" +
"<a href='#' class='edit'>Edit</a></td>" +
"<td><a href='#' class='delete''>Delete</a></td>";
}, function (error) {
console.log(error);
})
$('#tblGrid tbody').html(HtmlString);
});
Issue is clearly visible in code, Where expects an object but you are passing a string within curly bracket.
You need to create the object in a variable and assign it to Where option of jsstore.
Please check the below code -
var searchValueType = $('input:radio[name=searchValueType]:checked').val();
var searchValue = $("#searchValue").val();
//var column1 = 'Name';
//var whereClause = column1+':'+searchValue;
//alert ("where clause >> "+whereClause);
// Where clause is now an object
var whereClause = {
Name: searchValue
}
DbConnection.select({
From: "Student",
Where: whereClause,
}, function(students) {
var HtmlString = "";
students.forEach(function(student) {
HtmlString += "<tr ItemId=" + student.Id + "><td>" +
student.Name + "</td><td>" +
student.Gender + "</td><td>" +
student.Country + "</td><td>" +
student.City + "</td><td>" +
"<a href='#' class='edit'>Edit</a></td>" +
"<td><a href='#' class='delete''>Delete</a></td>";
}, function(error) {
console.log(error);
})
$('#tblGrid tbody').html(HtmlString);
});
I'm trying to add a header to this JSON output table, but I have no clue how to do that. This code gives me a table populated with the data returned from the database and puts it in a table format as structured by the <td><tr> tags. The problem is that I need a header for the table and I don't know how to get that part coded. Any ideas?
function renderSearchResults( results, domNode ) {
var i;
var out = "<table>";
if (results.length === 0) {
domNode.innerHTML = 'No results matching your search.';
return;
}
// loop to print the JSON in a table format
results.forEach(function (result) {
console.info(result);
out += "<tr><td>" +
result.ContractId +
"</td><td>" +
result.ContractTitle +
"</td><td>" +
result.Terminal +
"</td><td>" +
result.Cabinet +
"</td><td>" +
result.Section +
"</td><td>" +
result.Folder +
"</td><td>" +
result.Sheet +
"</td><td>" +
result.Consult +
"</td><td>" +
result.Location +
"</td><td>" +
result.Active +
"</td><td>" +
result.Theme +
"</td><td>" +
result.Construction +
"</td><td>" +
result.Subtheme +
"</td><td>" +
result.AsBuilt +
"</td><td>" +
result.Year +
"</td><td>" +
"<a href= " + result.Path + " target=_blank>" + "Binder" + "</a>"
} );
out += "</table>";
domNode.innerHTML = out;
}
During your initial declaration of out you can put in <th> or tableheader tags, i.e:
function renderSearchResults( results, domNode ) {
var i;
var out = "<table><th>ContractId</th><th>ContractTitle</th><th>Terminal</th><th>Cabinet </th><th>Section </th><th>Folder </th><th>Sheet </th><th>Consult </th><th>Location </th><th>Active </th><th>Theme </th><th>Construction </th><th>Subtheme </th><th>AsBuilt </th><th>Year </th>";
if (results.length === 0) {
domNode.innerHTML = 'No results matching your search.';
return;
}
results.forEach(function (result) {
console.info(result);
out += "<tr><td>" +
(result.ContractId !== null ? result.ContractId : 'Not Applicable') +
"</td><td>" +
(result.ContractTitle !== null ? result.ContractTitle : 'Not Applicable') +
"</td><td>" +
(result.Terminal !== null ? result.Terminal : 'Not Applicable') +
"</td><td>" +
(result.Cabinet !== null ? result.Cabinet : 'Not Applicable') +
"</td><td>" +
(result.Section !== null ? result.Section : 'Not Applicable') +
"</td><td>" +
(result.Folder !== null ? result.Folder : 'Not Applicable') +
"</td><td>" +
(result.Sheet !== null ? result.Sheet : 'Not Applicable') +
"</td><td>" +
(result.Consult !== null ? result.Consult : 'Not Applicable') +
"</td><td>" +
(result.Location !== null ? result.Location : 'Not Applicable') +
"</td><td>" +
(result.Active !== null ? result.Active : 'Not Applicable') +
"</td><td>" +
(result.Theme !== null ? result.Theme : 'Not Applicable') +
"</td><td>" +
(result.Construction !== null ? result.Construction : 'Not Applicable') +
"</td><td>" +
(result.Subtheme !== null ? result.Subtheme : 'Not Applicable') +
"</td><td>" +
(result.AsBuilt !== null ? result.AsBuilt: 'Not Applicable') +
"</td><td>" +
(result.Year !== null ? result.Year : 'Not Applicable')+
"</td><td>" +
"<a href= " + result.Path + " target=_blank>" + "Binder" + "</a>"
} );
out += "</table>";
console.log(out);
domNode.innerHTML = out;
}
There is a different tag for the table header.
<tr> is for row <th> for your headers and <td> for the data.
You can check here for more info.
You can either add your header after your check for results:
if (results.length === 0) {
domNode.innerHTML = 'No results matching your search.';
return;
} else {
out += "<tr><th>Header</th></tr>"
}
Variables pass, time and place are inputs from HTML, so when I click on button I am appending new row in the table, but every new row appended need to have different class and title, and that should be get from place input i.e. place.val().
$("button").click(function() {
var pass = $("#pass");
var time = $("#time");
var place = $("#place");
$("table").append("<tr><td>" + pass.val() + "</td><td>" + time.val() +
"</td>" + "<td title=place.val() class=place.val()>" + 2 + "</td></tr>");
});
Try this:
$("button").click(function() {
var pass = $("#pass");
var time = $("#time");
var place = $("#place");
$("table").append("<tr><td>" + pass.val() + "</td><td>" + time.val() +
"</td>" + "<td title=" + place.val() + " class=" + place.val() + ">" + 2 + "</td></tr>");
});
The below span tag containing an onclick event is not working
var test="<span onClick="gotoNode(\'' + result.name + '\',\'' + result.xaxis + '\',\'' + result.yaxis + '\',\'' + result.detail + '\',\'' + result.status + '\')" />"
the above escaped string has some problems with the method call.
How can I fix it?
If you're creating this in JavaScript to create an element, then the first single-quote needs to be escaped.
function gotoNode(name, xaxis, yaxis, detail, status) {
alert("name = " + name + "\r\nxaxis = " + xaxis + "\r\nyaxis = " + yaxis + "\r\ndetail = " + detail + "\r\nstatus = " + status);
}
var result = { name: "name", xaxis: "xaxis", yaxis: "yaxis", detail: "detail", status: "status" };
var htmlText = '<input value="Button" type="button" onclick="gotoNode(\'' + result.name + '\',\'' + result.xaxis + '\',\'' + result.yaxis + '\',\'' + result.detail + '\',\'' + result.status + '\')" />';
$("#lonely").append(htmlText);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lonely"></div>
Generally speaking, whatever quote type you begin with (out of ' or "), you need to escape the same type that you want to use within the string and not escape the same type to terminate the string. You can leave the other type without escapes.
For your edited version, this should work if you want those result variables to be replaced with their values.
var test = "<span onclick=\"gotoNode('" + result.name + "','" + result.xaxis + "','" + result.yaxis + "','" + result.detail + "','" + result.status + "')\" />";
Do you use php to generate the output?
Then you should try
echo "<input type=\"button\" onClick=\"gotoNode(\" + result.name + \",\" +
result.xaxis + \",\" + result.yaxis + \",\" + result.detail + \",\" +
result.status + \")\" />";