|
In the original code, the first row ends with a comma, not a semi-colon.
var displayStock = formatStock(stock),
$row = $(rowTemplate.supplant(displayStock));
It's the same thing as below - multiple variables declared on a single line.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Ya I figured that out by fiddling with it
Thanks
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
Looking at this article.
In the JS code there is
var ticker = $.connection.stockTickerMini,
up = '▲',
down = '▼',
$stockTable = $('#stockTable'),
$stockTableBody = $stockTable.find('tbody'),
rowTemplate = '<tr data-symbol="{Symbol}"><td>{Symbol}</td><td>{Price}</td><td>{DayOpen}</td><td>{Direction} {Change}</td><td>{PercentChange}</td></tr>';
Can someone please break this down for me?
I understand that the first line is a reference to the SignalR hub, but other than that, I have zero clue what's happening here.
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
It's creating and assigning multiple variables in a single statement:
var ticker = $.connection.stockTickerMini;
var up = '▲';
var down = '▼';
var $stockTable = $('#stockTable');
var $stockTableBody = $stockTable.find('tbody');
var rowTemplate = '<tr data-symbol="{Symbol}"><td>{Symbol}</td><td>{Price}</td><td>{DayOpen}</td><td>{Direction} {Change}</td><td>{PercentChange}</td></tr>';
AFAIK, the only benefit is for "minified" scripts, where you save four characters ("var ") per variable.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Oh, I see. So it's a set og global variables?
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
Not quite. You can't access them from outside of the containing function, so they're only "global" to the rest of that block.
$(function(){
var foo = 42;
function bar(){
alert(foo);
}
bar();
(function(){
alert(foo);
})();
$("form").on("submit", function(){
alert(foo);
});
alert(foo);
});
alert(foo);
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I see, thank you
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
I found this piece of code
function formatStock(stock) {
return $.extend(stock, {
Price: stock.Price.toFixed(2),
PercentChange: (stock.PercentChange * 100).toFixed(2) + '%',
Direction: stock.Change === 0 ? '' : stock.Change >= 0 ? up : down
});
}
After some research, I THINK it's a function called formatStock that extends a stock object by adding 3 properties to it.
Am I right here?
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
Close - it's replacing the existing Price and PercentChange properties with formatted values, and either adding or replacing the Direction property.
(I assume the missing quotes around up and down are copy/paste errors, or those symbols are defined elsewhere. If not, the code won't work.)
jQuery.extend() | jQuery API Documentation[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
OK, I see.
The Up/Down are images
See this about halfway down
Thanks
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
So why not instead of
function formatStock(stock) {
return $.extend(stock, {
Price: stock.Price.toFixed(2),
PercentChange: (stock.PercentChange * 100).toFixed(2) + '%',
Direction: stock.Change === 0 ? '' : stock.Change >= 0 ? up : down
});
}
just do
function formatStock(stock) {
stock.Price: stock.Price.toFixed(2);
stock.PercentChange: (stock.PercentChange * 100).toFixed(2) + '%';
stock.Direction: stock.Change === 0 ? '' : stock.Change >= 0 ? up : down;
return stock;
}
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
You'd need = instead of : for the property assignments, but both versions would effectively do the same thing. 
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Got it. Thanks
Any thoughts on why they used that format?
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
To make the code look more complicated than it is? 
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thanks, for both questions. You've learnt me somethin'
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
I have this data table:
@using (@Html.BeginForm("Index", "Home"))
{
<div id="divData">
@{
var grid = new WebGrid(Model, rowsPerPage: 20);
<pre>
@grid.GetHtml(
tableStyle: "webgrid-table",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
mode: WebGridPagerModes.All,
columns:
grid.Columns
(
grid.Column(columnName: "RowId", header: "Row Id", format: @<text>@item.RowId</text>),
grid.Column(columnName: "SiteId", header: "Site Id", format: @<text>@item.SiteId</text>),
))
}
}
I then listen to a SignalR service for new or updated row data. My javaScript code
@section scripts
{
<script src="/Scripts/jquery-3.1.1.min.js"></script>
<script src="/Scripts/jquery.signalR-2.1.2.js"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
$(function () {
var conn = $.hubConnection("<a href="http:
var proxy = conn.createHubProxy('dashboardHub')
proxy.on('notifyAllClientsOfChanges', function (model) {
console.log("notifyAllClientsOfChanges received");
});
});
</script>
}
Could use some help here.
Thanks
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
modified 25-Apr-17 18:29pm.
|
|
|
|
|
You're going to need some way to extract the ID from each row. There doesn't seem to be any way to add custom attributes to the table rows, so you'll need something within a colunm:
grid.Column(columnName: "RowId", header: "Row Id", format: @<text><span data-row-id="@item.RowId">@item.RowId</span></text>),
You should then be able to use jQuery to select the row with the specified ID:
var $row = $(".webgrid-table").find("span[data-row-id='" + model.RowId + "']").closest("tr");
if ($row.length){
$row.find("td").eq(1).text(model.SiteId);
...
}
else {
$row = createNewRow(model);
$(".webgrid-table > tbody").append($row);
}
How you create the new row will depend on how complicated your grid is. You could use something like Handlebars.js[^] to create the row based on a template.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Awesome. Thanks for the headstart!
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
OK, still a bit confused...
What does this do?
Richard Deeming wrote: $row.find("td").eq(1).text(model.SiteId);
Looks like it's looking for a row by the site Id??
Does "find(td") search for a Table Definition?
What does the eq(1) do?
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
$row.find("td") That returns all of the <td> elements within the specified row.
.eq(1) That reduces the set to the second <td> element in the row.
.eq() | jQuery API Documentation[^]
.text(model.SiteId) That sets the text of the matched element.
If your row is particularly complex, it might be easier to use the same Handlebars.js[^] template you're using for the new row, and use $row.replaceWith(newRow)[^] to replace the row, rather than trying to update each cell.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
If you look at this SignalR example, about halfway down, they seem to be doing something similar to this.
They are hard coding in the HTML for a row. This sounds like what I would need in the createNewRow function you posted. Im I correct on this?
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
Yes, that would probably work for a simple row template.
But they're building the entire table in Javascript, so they can use data- attributes on the <tr> elements to identify the row. There isn't any way to do that with the WebGrid helper, so you'd still need to include the <span data-row-id="..."> within a column, and use that to find the row to update.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Using what you've taught me, as well as examples like this, I now have this
The Table
I added SPAN tags to the table rows
grid.Column(columnName: "RowId", header: "Row Id", format: @<text><span data-row-id="@item.RowId">@item.RowId</span></text>),
grid.Column(columnName: "SiteId", header: "Site Id", format: @<text>@item.SiteId</text>),
grid.Column(columnName: "Instrument", header: "Instrument", format: @<text>@item.InstrumentId</text> ),
grid.Column(columnName: "TowerLocation", header: "Tower", format: @<text>@item.TowerLocation</text>),
grid.Column(columnName: "BayLocation", header: "Bay Location", format: @<text>@item.BayLocation</text>),
grid.Column(columnName: "BaySerialNo", header: "Bay Serial #", format: @<text>@item.BaySerialNo</text>),
grid.Column(columnName: "BayStatus", header: "Bay Status", format: @<text>@item.BayStatus</text>),
grid.Column(columnName: "AccessionId", header: "Accession ID", format: @<text>@item.AccessionId</text>),
grid.Column(columnName: "Result", header: "Result", format: @<text>@item.Result</text>),
grid.Column(columnName: "AssayName", header: "Assay Name", format: @<text>@item.AssayName</text>),
grid.Column(columnName: "TestStarted", header: "Started", format: @<text>@item.Started</text>),
grid.Column(columnName: "TestCompleted", header: "Completed", format: @<text>@item.Completed</text>),
grid.Column(columnName: "TestSummary", header: "Test Summary", format: @<text>@item.TestSummary</text> )
The JavaScript Code
var $row = $(".webgrid-table").find("span[data-row-id='" + model.RowId + "']").closest("tr");
if ($row.length) {
var col01 = $row.find(".x-SiteId").text(model.SiteId);
var col02 = $row.find(".x-InstrumentId").text(model.InstrumentId);
var col03 = $row.find(".x-TowerLocation").text(model.TowerLocation);
var col04 = $row.find(".x-BayLocation").text(model.BayLocation);
var col05 = $row.find(".x-BaySerialNo").text(model.BaySerialNo);
var col06 = $row.find(".x-BayStatus").text(model.BayStatus);
var col07 = $row.find(".x-AccessionId").text(model.AccessionId);
var col08 = $row.find(".x-Result").text(model.Result);
var col09 = $row.find(".x-AssayName").text(model.AssayName);
var col10 = $row.find(".x-Started").text(model.Started);
var col11 = $row.find(".x-Completed").text(model.Completed);
var col12 = $row.find(".x-TestSummary").text(model.TestSummary);
}
else {
var table = document.getElementById('divData');
var new_row = table.rows[0].cloneNode(true);
var len = table.rows.length;
new_row.cells[0].innerHTML = len;
new_row.cells[1].value = mode.SiteId;
new_row.cells[2].value = mode.InstrumentId;
new_row.cells[3].value = mode.TowerLocation;
new_row.cells[4].value = mode.BayLocation;
new_row.cells[5].value = mode.BaySerialNo;
new_row.cells[6].value = mode.BayStatus;
new_row.cells[7].value = mode.AccessionId;
new_row.cells[8].value = mode.Result;
new_row.cells[9].value = mode.AssayName;
new_row.cells[10].value = mode.Started;
new_row.cells[11].value = mode.Completed;
new_row.cells[12].value = mode.TestSummary;
table.appendChild(new_row);
}
Any reason this technique would not work?
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
modified 1-May-17 14:03pm.
|
|
|
|
|
It looks close, but I think you'd end up losing the <span data-row-id="..."> on the new rows.
I'd be inclined to try to combine the two branches:
var $row = $(".webgrid-table").find("span[data-row-id='" + model.RowId + "']").closest("tr");
if (!$row.length) {
var table = document.getElementById('divData');
var len = table.rows.length;
var new_row = table.rows[len - 1].cloneNode(true);
new_row = table.appendChild(new_row);
$row = $(new_row);
$row.find("span[data-row-id]").data("rowId", model.RowId).text(model.RowId);
}
$row.find(".x-SiteId").text(model.SiteId);
$row.find(".x-InstrumentId").text(model.InstrumentId);
$row.find(".x-TowerLocation").text(model.TowerLocation);
$row.find(".x-BayLocation").text(model.BayLocation);
$row.find(".x-BaySerialNo").text(model.BaySerialNo);
$row.find(".x-BayStatus").text(model.BayStatus);
$row.find(".x-AccessionId").text(model.AccessionId);
$row.find(".x-Result").text(model.Result);
$row.find(".x-AssayName").text(model.AssayName);
$row.find(".x-Started").text(model.Started);
$row.find(".x-Completed").text(model.Completed);
$row.find(".x-TestSummary").text(model.TestSummary);
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thanks!
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
