Web Development

Re: JavaScript Question #3

25-Apr-17 12:31

In the original code, the first row ends with a comma, not a semi-colon.

JavaScript

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

Kevin Marois25-Apr-17 12:32

25-Apr-17 12:32

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.

Next JavaScript Question

Kevin Marois25-Apr-17 7:50

25-Apr-17 7:50

Looking at this article.

In the JS code there is

var ticker = $.connection.stockTickerMini, // the generated client-side hub proxy
    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.

Richard Deeming25-Apr-17 8:14

25-Apr-17 8:14

It's creating and assigning multiple variables in a single statement:

JavaScript

var ticker = $.connection.stockTickerMini; // the generated client-side hub proxy
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

Kevin Marois25-Apr-17 8:16

25-Apr-17 8:16

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.

Richard Deeming25-Apr-17 8:22

25-Apr-17 8:22

Not quite. You can't access them from outside of the containing function, so they're only "global" to the rest of that block.

JavaScript

$(function(){
    var foo = 42;
    
    function bar(){
        alert(foo); // 42
    }
    
    bar();
    
    (function(){
        alert(foo); // 42
    })();
    
    $("form").on("submit", function(){
        alert(foo); // 42
    });
    
    alert(foo); // 42
});

alert(foo); // undefined

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Kevin Marois25-Apr-17 8:23

Quick JavaScript Question

25-Apr-17 8:23

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.

Kevin Marois25-Apr-17 6:27

25-Apr-17 6:27

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.

Richard Deeming25-Apr-17 6:59

25-Apr-17 6:59

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

Kevin Marois25-Apr-17 7:09

25-Apr-17 7:09

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.

Kevin Marois25-Apr-17 7:16

25-Apr-17 7:16

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.

Richard Deeming25-Apr-17 8:10

25-Apr-17 8:10

You'd need = instead of : for the property assignments, but both versions would effectively do the same thing. Smile | :)

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Kevin Marois25-Apr-17 8:11

25-Apr-17 8:11

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.

Richard Deeming25-Apr-17 8:15

25-Apr-17 8:15

To make the code look more complicated than it is? Laugh | :laugh:

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Kevin Marois25-Apr-17 8:19

Add or Update Row In Data Table

25-Apr-17 8:19

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.

Kevin Marois24-Apr-17 12:13

24-Apr-17 12:13

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>),
        ))

        //other columns ommitted
    }

}

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://000.000.00.00:8094/signalr">http://000.000.00.00:8094/signalr</a>");
                    var proxy = conn.createHubProxy('dashboardHub')

                    proxy.on('notifyAllClientsOfChanges', function (model) {

                        console.log("notifyAllClientsOfChanges received");

                        //Here I want to either Add or Update the row who's Id matches the Model's id.

                        // 1) See if the row exists in the table

                        // 2) If the row exists, update it from the model passed in

                        // 3) If the row does not exist, add it

                    });
                });
    </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.

Richard Deeming25-Apr-17 12:48

25-Apr-17 12:48

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:

JavaScript

var $row = $(".webgrid-table").find("span[data-row-id='" + model.RowId + "']").closest("tr");
if ($row.length){
    // The row exists:
    $row.find("td").eq(1).text(model.SiteId);
    ...
}
else {
    // The row does not exist:
    $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

Kevin Marois25-Apr-17 12:49

25-Apr-17 12:49

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.

Kevin Marois26-Apr-17 8:01

26-Apr-17 8:01

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.

Richard Deeming27-Apr-17 1:39

27-Apr-17 1:39

$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

Kevin Marois28-Apr-17 7:21

28-Apr-17 7:21

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.

Richard Deeming28-Apr-17 8:27

28-Apr-17 8:27

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

Kevin Marois1-May-17 6:55

1-May-17 6:55

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

// Find the row who's Id matches the model's RowId
var $row = $(".webgrid-table").find("span[data-row-id='" + model.RowId + "']").closest("tr");

// If the row was found...
if ($row.length) {

    // Update the row
    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 {

    // The row does not exist, so add it to the table

    // Make a copy of the first row
    var table = document.getElementById('divData');
    var new_row = table.rows[0].cloneNode(true);
    var len = table.rows.length;
    new_row.cells[0].innerHTML = len;

    // Copy the model's data to the new row
    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;

    // Add the new row to the table
    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.

Richard Deeming3-May-17 9:51

3-May-17 9:51

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:

JavaScript

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

Kevin Marois3-May-17 10:35