Web Development

Re: Quick JavaScript Question

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

3-May-17 10:35

Thanks!

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

Kevin Marois3-May-17 10:37

MSChart load at Runtime raise error NullReferenceException System.Web.UI.DataVisualization.Charting.Axis.Resize

3-May-17 10:37

By the way. I ran into this problem.

Any thoughts on how to solve this?

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

lamiaa_moh23-Apr-17 2:06

lamiaa_moh

23-Apr-17 2:06

Hi,
I've created a UserControl in which I added MSChart
If I added the control directly at aspx page, the control works fine
BUT when I try to create the control at Runtime, I receive the following error:


<pre>Line 43:   <script language="JavaScript1.2" type="text/javascript" src="javaScriptFile.js"></script>
Line 44:  
Line 45:   <body runat="server" id="MasterBody" bgcolor="#ffffff" topmargin="0" leftmargin="0">

Source File: d:\WebProject\SolutionFolder\ProjectFolder\App_MasterPages\master_page.master    Line: 43 

Stack Trace: 


[NullReferenceException: Object reference not set to an instance of an object.]
   System.Web.UI.DataVisualization.Charting.Axis.Resize(ChartGraphics chartGraph, ElementPosition chartAreaPosition, RectangleF plotArea, Single axesNumber, Boolean autoPlotPosition) +116
   System.Web.UI.DataVisualization.Charting.ChartArea.Resize(ChartGraphics chartGraph) +1944
   System.Web.UI.DataVisualization.Charting.ChartPicture.Resize(ChartGraphics chartGraph, Boolean calcAreaPositionOnly) +2012
   System.Web.UI.DataVisualization.Charting.ChartPicture.Paint(Graphics graph, Boolean paintTopLevelElementOnly) +3435
   System.Web.UI.DataVisualization.Charting.ChartImage.GetImage(Single resolution) +1005
   System.Web.UI.DataVisualization.Charting.Chart.SaveImage(Stream imageStream) +113
   System.Web.UI.DataVisualization.Charting.Chart.Render(HtmlTextWriter writer) +369
   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +66
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
   System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +128
   System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +13
   System.Web.UI.Control.Render(HtmlTextWriter writer) +12
   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +66
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
   System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +128
   System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +13
   System.Web.UI.Control.Render(HtmlTextWriter writer) +12
   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +66
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
   System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +128
   System.Web.UI.HtmlControls.HtmlForm.RenderChildren(HtmlTextWriter writer) +9710296
   System.Web.UI.HtmlControls.HtmlContainerControl.Render(HtmlTextWriter writer) +32
   System.Web.UI.HtmlControls.HtmlForm.Render(HtmlTextWriter output) +53
   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +66
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
   System.Web.UI.HtmlControls.HtmlForm.RenderControl(HtmlTextWriter writer) +40
   System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +128
   System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +13
   System.Web.UI.HtmlControls.HtmlContainerControl.Render(HtmlTextWriter writer) +32
   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +66
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
   ASP.app_masterpages_master_page_master.__RenderMasterHtml(HtmlTextWriter __w, Control parameterContainer) in d:\WebProject\SolutionFolder\ProjectFolder\App_MasterPages\master_page.master:43
   System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +268
   System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +13
   System.Web.UI.HtmlControls.HtmlContainerControl.Render(HtmlTextWriter writer) +32
   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +66
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
   System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +128
   System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +13
   System.Web.UI.Control.Render(HtmlTextWriter writer) +12
   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +66
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
   System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +128
   System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +13
   System.Web.UI.Page.Render(HtmlTextWriter writer) +29
   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +66
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +5827

I don't know where is the Null value and don't know how to catch it since the code display error on line in which i include script file

Re: MSChart load at Runtime raise error NullReferenceException System.Web.UI.DataVisualization.Charting.Axis.Resize

Afzaal Ahmad Zeeshan23-Apr-17 2:33

Afzaal Ahmad Zeeshan

23-Apr-17 2:33

Null Reference Exception particularly means that the object you are currently using, does not exist in the memory. You can easily get rid of this error in many ways,

// First way, make sure object does exist.
var obj = new ObjectType();

// Second way, check if it exists
if(obj == null) {
   // Likely to throw error, 
} else {
   // Use the object, it is not null
}

// Third, not recommended
var value = obj?.Property;

Yet, there are many other ways to hide this. But in my own opinion, if you encounter null reference exception, then you should not try to avoid it, but have a look at why was it there in the first place. The object, in your Charting.Axis etc, they are null, I would say, Axis was null as you are trying to call a function on it. So, do check them. And properly create an instance of them so that this error can go away.

Also read this, What Is A Null Error in Code Execution

The sh*t I complain about
It's like there ain't a cloud in the sky and it's raining out - Eminem
~! Firewall !~

apprendre à coder facilement

Member 1312801214-Apr-17 0:51

Member 13128012

14-Apr-17 0:51

Bonjour tout le monde. Je m'appelle Arridano, étudiant en commerce, 2e année. Est-ce possible pour quelqu'un de moyen en math d'apprendre à coder facilement ? Merci d'avance pour vos différentes réponses.

Re: apprendre à coder facilement

User 418025416-Apr-17 16:46

User 4180254

16-Apr-17 16:46

The primary language of the forum is English. You can use any translate service to post your question here in English.

modified 20-Sep-20 21:01pm.

cookies not storing in login page why???showing NO cookies found

LOKENDRA YADAV7-Apr-17 20:19

LOKENDRA YADAV

7-Apr-17 20:19

-----------------------------------------login.jsp--------------------------------------
<pre lang="HTML">
<%@page import="java.util.*" %>
<%@page import="java.io.*" %>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

<form action="login.jlc" method="post">
<%
String st1="";
String st2="";

Cookie cks[]=request.getCookies();

if(cks!=null){

for(Cookie c1:cks){

if(c1.getName().equals("unm")){

st1=c1.getValue();

}

if(c1.getValue().equals("pwd")){

st2=c1.getValue();
}

}

}else{

System.out.println("NO COOKIES FOUND");

}
%>

<table>

<tr>
<td colspan="2" align="center">ACCOUNT LOGIN</td>
</tr>

<tr>
<td>
<h2>USERNAME</h2>
</td>

<td><input type="text" name="username" value="<%=st1%>"/></td>
</tr>

<tr>
<td>
<h2>PASSWORD</h2>
</td>
<td>
<input type="password" name="password" value="<%=st2%>"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="rem" />REMEMBERME<br>
</td>
</tr>

<tr>
<td>
<input type="submit" value="login"/>
</td>
</tr>
</table>
</form>
</body>
</html>
</pre>

---------------------------------------loginServlet-----------------------------------------
<pre lang="java">
package com.jlc;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;

public class LoginServlet extends HttpServlet {

protected void service(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException{

PrintWriter out=res.getWriter();

String unm=req.getParameter("username");

String pwd=req.getParameter("password");

String rem=req.getParameter("rem");

if(unm.equals(pwd)){

if(rem!=null){
Cookie ck1=new Cookie("u",unm);
Cookie ck2=new Cookie("p",pwd);

res.addCookie(ck1);

res.addCookie(ck2);

Cookie c[]=req.getCookies();

for(Cookie c1:c){

c1.setMaxAge(-1);
}

}

}else{

out.println("INCORRECT USERNAME PASSWORD");

}

}//service

}//class
</pre>

-- modified 8-Apr-17 3:38am.

Re: cookies not storing in login page why???showing NO cookies found

Richard Deeming10-Apr-17 7:41

Should i use bootstrap for my project?

10-Apr-17 7:41

1) An unformatted code-dump is not a question.

2) Storing the username and password in cookies is an EXTREMELY bad idea. Please tell us which site(s) your code will be deployed on, so that we can blacklist them.

3) Look at the cookie names you're setting, then look at the cookie names you're trying to read.

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

Member 131100775-Apr-17 23:37

Member 13110077

5-Apr-17 23:37

I know that this question probably have been asked many times before but things changes over time.

We are developing a huge website in size comparison to facebook. It will be very unique design wise and should be pixel perfect from the design. As we see it most of the features in the bootstrap framework will only take resources, as much of those will not be used or highly customized using less in our case.

Is bootstrap still really the right way to go for this project or should we just base it on normalize?

We know the development will be heavily decreased with bootstrap but that doesn't matter.

Re: Should i use bootstrap for my project?

Richard Deeming6-Apr-17 2:06

Re: Should i use bootstrap for my project?

6-Apr-17 2:06

Member 13110077 wrote:
should be pixel perfect from the design

Start by giving up on that unrealistic goal. Smile | :)

Trying to make the site a "pixel perfect" match for a design image is hard enough in a single browser at a fixed resolution. Once you start throwing in multiple browsers at different resolutions, it becomes virtually impossible. So unless you're going to add a 90's style footer saying "This site is best viewed in Internet Explorer 4 at 1024x768", it's not going to work.

Member 13110077 wrote:
much of those will not be used or highly customized

So either customise Bootstrap[^], and remove the components you're not going to use; or don't use Bootstrap.

If you're not going to use most of the features from Bootstrap, then it wouldn't make sense to use Bootstrap. There are other lightweight frameworks available that you could base your site on - eg: W3.CSS Home[^]. Or you could build your CSS from scratch, which would give you complete control.

There's no point fighting to adapt a framework that isn't a good fit for your requirements.

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

Member 131100776-Apr-17 7:35

Member 13110077

6-Apr-17 7:35

Thanks for your answer. Do you have any examples of some frameworks that just takes care of these basic problems as normalize does that should be used even though i am writing my own css?

Re: Should i use bootstrap for my project?

Richard Deeming6-Apr-17 7:41