Web Development

2-May-17 11:39

I have a page that receives a notification from a SignalR server when either a new row is added to a table or an existing row is changed. The data is displayed in a WebGrid.

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

    // 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) {

        // if the row was found, then update it
        updateRow($row, model)
    }
    else {

        // The row does not exist, so add it to the table
        createNewRow(model);
    }

    function createNewRow(model)
    {
        var table = document.getElementById('MyGrid');

        var new_row = table.rows[0].cloneNode(true);

        new_row.cells[0].value = model.RowId;
        new_row.cells[1].value = model.SiteId;
        new_row.cells[2].value = model.InstrumentId;
        new_row.cells[3].value = model.TowerLocation;
        new_row.cells[4].value = model.BayLocation;
        new_row.cells[5].value = model.BaySerialNo;
        new_row.cells[6].value = model.BayStatus;
        new_row.cells[7].value = model.AccessionId;
        new_row.cells[8].value = model.Result;
        new_row.cells[9].value = model.AssayName;
        new_row.cells[10].value = model.Started;
        new_row.cells[11].value = model.Completed;
        new_row.cells[12].value = model.TestSummary;

        table.appendChild(new_row);
    }

    function updpateRow($row, model)
    {
        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);
    }
});

The code above fires when a new row is added to the database or changes are made to an existing row. The code does work, but I don't see the additions or updates appear in the grid. If I refresh the page then the controller is called again and the entire data set is returned, which is what I'm trying to avoid.

So, what I want is to see row additions or changes in the WebGrid. How can I refresh the WebGrid without going back to the server?

Thank you

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Richard Deeming3-May-17 10:52

3-May-17 10:52

Any errors in the browser console?

Have you tried adding some console.log calls to make sure your code is being called?

"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:54

3-May-17 10:54

Yes, the code is being called. No errors. I just dont see the new row appear

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

modified 3-May-17 17:17pm.

Richard Deeming3-May-17 11:03

3-May-17 11:03

Is it just the new rows that aren't appearing?

The code looks like it should work, but to be pedantic, the new row should be appended to the <tbody> rather than the <table>:

JavaScript

table.tBodies[0].appendChild(new_row);

It probably won't make a difference, unless your CSS is specifically targeting the tbody element.

"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 12:31

3-May-17 12:31

Richard Deeming wrote:
Is it just the new rows that aren't appearing?

I havent tried the Update code yet, but I do know that new rows are being added to the grid. They just don't appear

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Richard Deeming4-May-17 0:47

4-May-17 0:47

I think there's a problem with setting the new_row.cells[i].value - it's not a standard property for a table cell, so it doesn't change the content: Demo[^]

If you use innerHTML or innerText, the value will be updated: Demo[^]

But you'll still have the problem of the <span> elements disappearing for the new rows. As I said yesterday, I'd be inclined to combine the add and update code, and use jQuery to set the text of the spans instead.

You might also want to check which row you're cloning - I suspect rows[0] will be the header row.

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

Kevin Marois4-May-17 7:11

4-May-17 7:11

Well, first let me say Many Thanks for all your help so far. I've come a long way and I now have a functional app. I am now seeing new rows appear in the WebGrid.

However, one final issue:

The new row appears at the bottom of the grid. The data is returned from the server in descending order by the TestStarted column. See this image.

Here's the JS I have so far incorporating all the help you've given me, including the console.log entries shown in the image I linked.

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

console.log("notifyAllClientsOfChanges called");

var $row = $(".webgrid-table").find("span[x-RowId='" + model.RowId + "']").closest("tr");

console.log(model.RowId);

if (!$row.length) {

    var table = document.getElementById('MyGrid');
    console.log("TABLE");
    console.log(table);

    var len = table.rows.length;
    console.log("len = " + len);

    var new_row = table.rows[1].cloneNode(true);
    console.log("new_row");
    console.log(new_row);

    new_row = table.tBodies[0].appendChild(new_row);
    console.log("new_row");
    console.log(new_row);

    $row = $(new_row);
    $row.find("span[x-RowId]").data("rowId", model.RowId).text(model.RowId);
}

console.log("SETTING ROW VALUES");

$row.find(".x-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);

console.log("DONE");

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Richard Deeming4-May-17 7:32

4-May-17 7:32

Kevin Marois wrote:

.find("span[x-RowId='" + model.RowId + "']")
...
$row.find("span[x-RowId]").data("rowId", model.RowId)

That's a bit confusing - you're looking for an attribute called x-RowId, but you're updating the data-row-id attribute. It would probably be better to stick with the data-row-id attribute, since that's the standard way of associating extra data with an element.

There's also no need to update the row ID for an existing row.

JavaScript

proxy.on('notifyAllClientsOfChanges', function (model) {
    
    console.log("notifyAllClientsOfChanges called");
    
    var $row = $(".webgrid-table").find("span[data-row-id='" + model.RowId + "']").closest("tr");
    console.log(model.RowId, $row);
    
    if (!$row.length) {
    
        var table = document.getElementById('MyGrid');
        console.log("TABLE", table);
        
        var len = table.rows.length;
        console.log("len = ", len);
        
        var new_row = table.rows[1].cloneNode(true);
        console.log("new_row", new_row);
        
        new_row = table.tBodies[0].appendChild(new_row);
        console.log("new_row", new_row);
        
        $row = $(new_row);
        $row.find("span[data-row-id]").data("rowId", model.RowId).text(model.RowId);
    }
    
    console.log("SETTING ROW VALUES");
    
    $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);
    
    console.log("DONE");
}

It looks like the server is sending 0 as the RowId, so you'd need to fix that on the server.

The appendChild method will always insert the element at the end of the specified parent. If you want to insert it at a specific position, you'll need to find the row that should immediately follow it, and use insertBefore[^] to add the node. Something like this:

JavaScript

var new_row = table.rows[1].cloneNode(true);
console.log("new_row", new_row);

var before_row = null;
var before_value = null;

$(".webgrid-table tr").each(function(){
    var value = $(this).find(".x-Started").text();
    
    // TODO: Convert the value to an appropriate type for sorting if necessary:
    if (value < model.Started) {
        if (!before_row || before_value < value) {
            before_row = this;
            before_value = value;
        }
    }
});

if (before_row) {
    new_row = table.tBodies[0].insertBefore(new_row, before_row);
}
else {
    new_row = table.tBodies[0].appendChild(new_row);
}

console.log("new_row", new_row);

If you can't convert the text value of the x-Started span to an appropriate type for sorting, you'll need to use another data- attribute to store and retrieve a sortable value.

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

Kevin Marois4-May-17 7:37

new page template not adding new css

4-May-17 7:37

Richard Deeming wrote:
That's a bit confusing - you're looking for an attribute called x-RowId, but you're updating the data-row-id attribute. It would probably be better to stick with the data-row-id attribute, since that's the standard way of associating extra data with an element.

I noticed that after I posed. Looking at that now.

Richard Deeming wrote:
The appendChild method will always insert the element at the end of the specified parent. If you want to insert it at a specific position, you'll need to find the row that should immediately follow it, and use insertBefore[^] to add the node.

I see. Got it!

Again, many thanks.

BTW, thanks for the link to jsfiddle. Pretty cool.

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Member 131671632-May-17 9:47

Member 13167163

2-May-17 9:47

genesis child theme- I have added a new page Template and need a little help. The template will allow me to style with old divs but when I try to add new styles to my style.css it will not pick up the changes.

Do I need to add a complete new style sheet to or do i need some type of new code in function.php?

Re: new page template not adding new css

Heather Maga3-May-17 10:07

Heather Maga

3-May-17 10:07

If there is another stylesheet with the same classes or style names which are overriding what you put in. You can override the cascading order by using !important.

Please see this link for information on the order in which stylesheets are loaded:
Assigning property values, Cascading, and Inheritance[^]

There is also an example of how to use !important on that page directly below where it describes which order stylesheets are loaded.

Hope this is what you are looking for. Smile | :)

JavaScript WebGrid Clone Row Problem

Kevin Marois1-May-17 12:20

html incorrectly displayed dashed border

1-May-17 12:20

[UPDATE]
I solved this. I set the WebGrid's Id by doing

htmlAttributes: new { id = "MyGrid" }

then doing this in the JS

var table = document.getElementById('MyGrid');

[UPDATE]

I'm trying to insert a new row into a WebGrid. I'm getting an error "Uncaught TypeError: Cannot read property '1' of undefined"

My WebGrid code

@using (@Html.BeginForm("Index", "Home"))
{

        @{
            var grid = new WebGrid(Model, rowsPerPage: 10, ajaxUpdateContainerId: "divData", canPage: true);

            @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: @@item.RowId),
                grid.Column(columnName: "SiteId", header: "Site Id", format: @@item.SiteId),

                // other columns omitted
            ))
        }

}

and my JavaScript

function createNewRow(model)
{
    // Make a copy of the first row
    var table = document.getElementById('divData');
    var new_row = table.rows[1].cloneNode(true);        // <======  Error occurs here. The Table exists, the rows collection does not.
    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 = model.SiteId;
    new_row.cells[2].value = model.InstrumentId;
    new_row.cells[3].value = model.TowerLocation;
    new_row.cells[4].value = model.BayLocation;
    new_row.cells[5].value = model.BaySerialNo;
    new_row.cells[6].value = model.BayStatus;
    new_row.cells[7].value = model.AccessionId;
    new_row.cells[8].value = model.Result;
    new_row.cells[9].value = model.AssayName;
    new_row.cells[10].value = model.Started;
    new_row.cells[11].value = model.Completed;
    new_row.cells[12].value = model.TestSummary;

    // Add the new row to the table
    table.appendChild(new_row);
}

There are rows in the table, so why doesn't the Rows collection exist? I can see row data in the Console.

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

modified 2-May-17 13:16pm.

dcof26-Apr-17 9:09

dcof

26-Apr-17 9:09

I am having an issue with the HTML that is used in a .net web form application. The problem is a dashed line line border is being displayed around the left, right, and bottom borders of where the 'option 1' and 'option 2 with corresponding wording is displayed.
The html that is being displayed is the deprecated apple-style-span class. Thus can you show me how to fix the html that is listed in code so the border does not display in the html?

<blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;"><blockquote dir="ltr" style="margin-right: 0px;">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p >&CUR_DATE.EVAL 
</p>
</blockquote></blockquote></blockquote></blockquote></blockquote></blockquote></blockquote></blockquote></blockquote></blockquote></blockquote></blockquote></blockquote>
<p><span style="font-size: 11pt;"><br />
Parent;STU_FNAME.EVAL &STU_LNAME.EVAL<br />
</span><span style="font-size: 11pt;">&PAR_ADDR.EVAL<br />
&PAR_CITY.EVAL, &PAR_STATE.EVAL. &PAR_ZIP.EVAL</span><span style="font-size: 11pt;"> </span></p>
<p><span style="color: #000000;" class="apple-style-span"><br />
<br />
<br />
Dear &PAR_NAME.EVAL and &STU_FNAME.EVAL &STU_LNAME.EVAL:<br />
<br />
I am sending you this correspondence as the designated person, authorized through state statute, responsible for the enforcement of mandatory attendance laws. </span></p>
<p></p>
<p><span style="color: #000000;" class="apple-style-span">Schools is very concerned about &STU_FNAME.EVAL''s attendance pattern. Presently, &STU_FNAME.EVAL has the equivalent of 5 or more days of unexcused absence from school.  </p>
<p><span style="color: #000000;" class="apple-style-span"> </span></p>
<p><span style="color: #000000;" class="apple-style-span">(Option 1) </span></p>
<table style="border: currentColor; border-image: none; border-collapse: collapse;" cellspacing="0" cellpadding="0" width="749" height="148" border="0">
    <tbody>
        <tr>
            <td style="border-color: #f0f0f0; padding: 0in 5.4pt; background-color: transparent;" valign="top">
            <p><span style="font-size: 11pt;">I have scheduled a collaborative plan  review on DATE at TIME.  We will meet at PLACE </span><span style="font-size: 11pt;">located at ADDRESS, ROOM #.  Please check in at the main office upon your arrival.  </span><span style="font-size: 11pt;">During this meeting we will address concerns and issues that may be contributing to the lack </span><span style="font-size: 11pt;">of school attendance.  The student and parent are required to attend. If applicable, please </span><span style="font-size: 11pt;">bring any medical documentation regarding absences.    </span><span style="font-size: 11pt;">If you cannot attend this meeting </span><span style="font-size: 11pt;">please contact me at PHONE #</span></p>
            <p><span style="font-size: 11pt;"> </span></p>
            <p><span style="font-size: 11pt;">(Option 2)</span> </p>
            </td>
        </tr>
        <tr>
            <td style="border-color: transparent; padding: 0in 5.4pt; background-color: transparent;" valign="top">
            <p> </p>
            </td>
        </tr>
        <tr>
            <td style="border-color: transparent; padding: 0in 5.4pt; background-color: transparent;" valign="top">
            <p><span style="font-size: 11pt;">No meeting required.  This letter is meant to serve as a notice of the student’s absences. Please call me if you have any questions.<br />
            </span></p>
            </td>
        </tr>
    </tbody>
</table>
<br />
<p>Please know that Schools is required to report the names of students of unexcused absences.   <br />
<br />
Sincerely,<br />
<br />
<br />
<br />

Re: html incorrectly displayed dashed border

User 418025428-Apr-17 9:32

User 4180254

28-Apr-17 9:32

When tried I do not see any border as you mentioned....?

modified 20-Sep-20 21:01pm.

save client side form data to disk

bandula ck26-Apr-17 2:55

bandula ck

26-Apr-17 2:55

I need technical advice on this matter. How to save form data to a disk file(Excel, text, XML format). Web server is not belongs to me. I just fill form for a web site. I need to use same data later to make comparisons and analyze. I need this to do to avoid duplicate data entry. Any method that can be used?. Any possibility to write memory resident program to to figure this out?. Thanks. 😊😊

Re: save client side form data to disk

W∴ Balboos, GHB26-Apr-17 6:28

W∴ Balboos, GHB

26-Apr-17 6:28

Client side and Server side are are deliberately quite isolated. If you don't have write access to the server then you're not going to make any changes to it that those who control it do not want you to make.

If you had write access to the web server then you'd still need a server-side method to do this.

I, for example, use php[^]. There's a lot to this and you'll need to study it.

Ravings en masse^
"The difference between genius and stupidity is that genius has its limits." - Albert Einstein
"If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010

Re: save client side form data to disk

bandula ck26-Apr-17 9:15

bandula ck

26-Apr-17 9:15

Hi Balboos,
I totally agree and understand your point. I have no write access to server end components/materials. I am at clients end. is there any possibility to run a routine/program at client end(my pc) that record all data I entered to the web site(I mean record all keyboard entries locally). This may be crazy question, but if I could figur out a method to do so I can save lot of my time to spent my time to repeat same data twice.
Thanks in advance.
Note : I am good at php/c#/Delphi coding. Smile | :)

Re: save client side form data to disk

W∴ Balboos, GHB27-Apr-17 0:02

W∴ Balboos, GHB

27-Apr-17 0:02

For the saving time part, when, for example, filling out forms, Windows since XP has the capability of remembering form data (it certainly remembers mine). I mention this on the chance that your system has this disabled.

This would be helpful for content for other forms. Some (not me) even allow uid/pwd saves.

The other option would be for you to find/create a screen-scraper you can install in your particular browser. If you're making your own, you'll need to access DOM - which is accessed through javaScript (not much different than php). You'd probably be able to find one.

Ravings en masse^
"The difference between genius and stupidity is that genius has its limits." - Albert Einstein
"If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010

Filtering Gallery

Member 1315220725-Apr-17 12:40

Member 13152207

25-Apr-17 12:40

Hi,

I am building a portfolio with a filtered gallery. I am using bootstrap and mixitup js for the filters. However, I have a problem. When I don't filter, the gallery seems fine:
http://imgur.com/szTPSAd

but when I filter the gallery, the pictures stay in the position where they were before, leaving blank space between:
http://imgur.com/mlamAnL

Could you please give me an advice on how to fix that? I want to sort all the images from the beginning all the time. I am sure there is an easy css fix.

Thx!)

JavaScript Question #3

Kevin Marois25-Apr-17 8:44

Re: JavaScript Question #3

25-Apr-17 8:44

ticker.client.updateStockPrice = function (stock) {
      var displayStock = formatStock(stock),
          $row = $(rowTemplate.supplant(displayStock));

      $stockTableBody.find('tr[data-symbol=' + stock.Symbol + ']')
          .replaceWith($row);
      }

The line that starts with "$row =" - supplant appears to be similar to C#'s String.Replace() function. Am I understanding this?

What I don't understand is what that line is attached to the previous line with a ','

var displayStock = formatStock(stock),
            $row = $(rowTemplate.supplant(displayStock));

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:52

Re: JavaScript Question #3

25-Apr-17 8:52

It's using a regular expression, so closer to Regex.Replace with a match evaluator function[^]:

JavaScript

// A simple templating method for replacing placeholders enclosed in curly braces.
if (!String.prototype.supplant) {
    String.prototype.supplant = function (dataObject) {
        return this.replace(
            /{([^{}]*)}/g, // The regular expression to match (see links below)
            function (wholeMatch, propertyName) {
                var dataValue = dataObject[propertyName];
                return typeof dataValue === 'string' || typeof dataValue === 'number' 
                    ? dataValue 
                    : wholeMatch;
            }
        );
    };
}

String.prototype.replace() - JavaScript | MDN[^]
Regexper - /{([^{}]*)}/g[^]
Refiddle - /{([^{}]*)}/g[^]

"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 10:51