|
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) {
var $row = $(".webgrid-table").find("span[data-row-id='" + model.RowId + "']").closest("tr");
if ($row.length) {
updateRow($row, model)
}
else {
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.
|
|
|
|
|
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
|
|
|
|
|
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.
|
|
|
|
|
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>:
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
|
|
|
|
|
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.
|
|
|
|
|
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
|
|
|
|
|
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.
|
|
|
|
|
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.
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:
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();
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
|
|
|
|
|
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.
|
|
|
|
|
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?
|
|
|
|
|
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. 
|
|
|
|
|
[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),
))
}
}
and my JavaScript
function createNewRow(model)
{
var table = document.getElementById('divData');
var new_row = table.rows[1].cloneNode(true);
var len = table.rows.length;
new_row.cells[0].innerHTML = len;
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);
}
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.
|
|
|
|
|
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 />
|
|
|
|
|
When tried I do not see any border as you mentioned....?
modified 20-Sep-20 21:01pm.
|
|
|
|
|
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. 😊😊
|
|
|
|
|
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 |
|
|
|
|
|
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. 
|
|
|
|
|
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 |
|
|
|
|
|
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!)
|
|
|
|
|
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.
|
|
|
|
|
|
Thank you again!
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
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.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
