|
While we're at it, could you take a look at my question from yesterday?
I've been Googling this but can't figure out what to do.
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
Richard already tackled supplant and the question below answers the comma (it's just combining variable declarations). I imagine you're also wondering why the variable "$row" has a "$" though which I can answer - it's a naming style. Not required, but frequently I see JS developers use a "$" to indicate that a variable holds a jQuery object (as opposed to a DOM object or primitive or something). Similar to how some C# devs use a "_" to indicate a variable is private to it's containing object.
modified 25-Apr-17 16:01pm.
|
|
|
|
|
Thank you!
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
Quick follow up question:
var displayStock = formatStock(stock);
$row = $(rowTemplate.supplant(displayStock));
One line uses 'var' and the other doesn't. Why is this?
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
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.
|
|
|
|