Good day.
I am a beginner in this, I have a table with the following records and I want to add the Red Team, Yellow Team and Turquoise Equipment column and show the sum in the labels that are at the top of the table
For this I attach my html code with jsp and the reference image
Score Table
<div class="tabs-body">
<div class="tabs-item" id="tab1">
<div class="container">
<div class="con-contador">
<label>Puntaje Rojo :</label>
<label id="projo" class="contador"></label>
<label >Puntaje Amarillo :</label>
<label id="pamarillo" class="contador"></label>
<label>Puntaje Turqueza :</label>
<label id="pturqueza" class="contador"></label>
Reporte
</div>
<div class="table-responsive-vertical" >
<table id="reporte" class="table table-bordered table-striped table-hover table-mc-light-blue">
<thead>
<tr>
<th>Disciplina</th>
<th>Categoria</th>
<th>Genero</th>
<th style="background-color: red">Equipo Rojo</th>
<th style="background-color: yellow">Equipo Amarillo</th>
<th style="background-color: turquoise">Puntaje Turqueza</th>
</tr>
</thead>
<tbody>
<%
for (int i=0; i < v.size();i++){
puntaje p = (puntaje)v.elementAt(i);
%>
<tr>
<td data-title="Disciplina"><%=p.getNombredeporte()%></td>
<td data-title="Categoria"><%=p.getCategoria() %></td>
<td data-title="Genero"><%=p.getGenero() %></td>
<td data-title="Puntaje"><%=p.getPuntaje1() %></td>
<td data-title="Puntaje"><%=p.getPuntaje2() %></td>
<td data-title="Puntaje"><%=p.getPuntaje3() %></td>
</tr>
<%
}
%>
</tbody>
</table>
</div>
</div>
</div>
</div>
I understand that it can be done with a function in javascript but I am still a newbie, I ask for your kind support.
Firstly I'd say that JSP is Java Server Pages, not javascript. JSP code gets run (for example, generating puntaje sums) on the server before the webpage is returned to the web browser. In contrast, javascript code is executed after the webpage is returned to the web browser. Since you already have JSP code, why not just run your code server-side? Perhaps another "for" loop that runs to generate sums before your elements. That said, if you really want to use javascript then the general procedure will be: add another data-attribute to your points TDs, like
<td data-puntaje-rojo=<%=p.getPuntaje1() %>>
Add classed spans to your labels like:
<label>Puntaje Rojo : <span class="puntaje-sum-rojo"></span></label>
Then in your javascript, use some form of selector to iterate over a collection/array of the TDs and store the sum of all data-puntaje-rojo values. Then, use javascript or jquery to inject the appropriate sum value into the appropriate label span.
While best practice is to store your javascript code in an external file on your web server website location, you can also write javascript directly inside of your JSP page, the javascript code must be inside tags. And, it's best to have your javascript code run after your HTML is fully loaded: javascript and jquery both provide ways to accomplish that.
Related
I'm currently making a sales screen on my web application, that has an input box for a product SKU.
I'm trying to add to the sale list using an action, that takes the model with the inputted SKU. The action then searches for the relevant product in the database and adds it the models list.
<div class="form-group">
<label class="form-check">Scan Product</label>
#Html.TextBoxFor(m => m.AddEpc, new { #class = "form-control" })
</div>
This works, the item gets added, and shown in the list, but as I add more items, the list is emptied, and will only ever contain a single object.
Here is the code for my razor view, iterating over the list of objects:
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Inventory</th>
<th>Action</th>
</tr>
</thead>
#foreach (var p in Model.SaleItems) {
<tr>
<td class="col-md-8">
#p.InventoryId
</td>
<td>#Html.ActionLink("Delete", "Delete", "Inventory", new {id = #p.Id}, null)</td>
</tr>
}
</table>
All the other fields stay, such as Customer information, within the customer object.
Can anyone provide me with an ideal workaround? I don't have experience with JQuery, or Javascript, and I'm trying to run this solely using ASP, but if it is really necessary, I'll look into learning JQuery to support it.
First and foremost, hello! I'm new here.
I've been recently learning AngularJS and web development as I'm working so I apologize for my newbieness. I had stumbled upon a wall of sorts regarding datatable integration with AngularJS. Here's the structure of it:
<table class="datatable table table-hover">
<thead>
<tr>
<th ng-repeat="column in columns">
{{column.name}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="form in forms | filter : {userName : activeFilter['user name']|rangeDate:activeFilter['range begin']:activeFilter['range end']:'birthDate'">
<td class="row-md-1">
<span ng-model="approvedForm.userName">
{{approvedForm.userName}}
</span>
</td>
<td class="row-md-1">
<span ng-model="approvedForm.birthDate">
{{approvedForm.birthDate}}
</span>
</td>
</tr>
</tbody>
</table>
I've to mention I make use of the filters on the client side, so they can choose the correct rows. The problem was that upon filtering some users and row-sorting with datatable, the data would get misteriously duplicated on the view, and I couldn't delete it or whatsoever. To solve it I had to take out the ng-repeat filters and filter with datatable filter support. Does anybody know what might have caused this behaviour?
Btw I'm using angularJS 1.x and datatable 1.10
Thanks!
Your data is duplicating because you bind it twice as the attribute of the HTML element and with handlebars. Remove either ng-model="..." attribute or {{...}} in your code so it would look like this:
<span>
{{approvedForm.userName}}
</span>
as #Shaishab Roy mentioned ng-model is not supposed to work with <span> so try ng-bind instead:
<span ng-bind="approvedForm.userName"></span>
I'm using stripes java framework. I have jsp page:
<table id="mlTable" style="">
<col width="200">
<col width="250">
<thead>
<tr>
<th align="center"><p>Name</p></th>
<th align="center"><p>Address</p></th>
</tr>
</thead>
<c:forEach items="${actionBean.mLocations}" var="ml">
<tr>
<td><p>${ml.name}</p></td>
<td><p>${ml.address}</p></td>
</tr>
</c:forEach>
</table>
In my actionbean I'm returning list:
public List<Location> getmLocations() {
mLocations = wrapperBean.getLocations();
return mLocations;
}
What I want is pagination because list is very long. And pagination must be asynchronous without reloading the page. Because I have also search field and that value must stay in field. And I don't want use DISPLAYTAG because I'm adding some custom classes to table. What can I do? please help
You could use a Javascript library such as List.js to paginate a HTML table client-side. This avoids refreshing the page, but if the amount of data is truly staggering, it may cause performance issues, since you're always downloading the whole thing (but only once per loading the page itself).
I'm trying to add multiple angular controllers within the same tr tag, the problem is that chrome rewrites the table to standardize it, and there is no element between tr and td in the HTML table hierarchy.
Here is what I currently have, each color represents a different controller to call.
The final aim is to have a table like below, with a different controller for one or multiple td, instead or multiple trs
I know I could use a global controller to handle all the data, or use multiple div elements with a fixed width to achieve this, but I'd prefer using a single tr table.
Here is the code :
<table>
<tr>
<div ng-controller="testController">
<td>{{testcontrollerscopevalue}}</td> <!-- empty when displayed -->
<td>{{testcontrollerscopevalue2}}</td> <!-- empty when displayed -->
<td>{{testcontrollerscopevalue3}}</td> <!-- empty when displayed -->
</div>
<div ng-controller="testController2">
<td>{{testcontroller2scopevalue}}</td> <!-- empty when displayed -->
</div>
</tr>
</table>
The following works :
<table ng-controller="testController">
<tr>
<td>{{testcontrollerscopevalue}}</td> <!-- set when displayed-->
</tr>
</table>
Here is what chrome generates :
<body>
<div ng-controller="testController"></div>
<div ng-controller="testController2"></div>
<table>
<tbody>
<tr>
<td>{{testcontrollerscopevalue}}</td> <!-- out of scope-->
<td>{{testcontrollerscopevalue2}}</td> <!-- out of scope-->
<td>{{testcontrollerscopevalue3}}</td> <!-- out of scope-->
<td>{{testcontroller2scopevalue1}}</td> <!-- out of scope-->
</tr>
</tbody>
</table>
<table ng-controller="testController">
<tbody>
<tr>
<td>{{testcontrollerscopevalue}}</td> <!-- set -->
</tr>
</tbody>
</table>
Is there any way I can achieve this ?
Is there any tag I could use instead of div to get this to work?
Thanks,
As we discussed at length in the chat session, This is a case where you are best served by using the ControllerAs Syntax, and wrapping the <table> element in multiple <div> elements holding each controller's logic.
My suggestion was something similar to the following code:
<div ng-controller="testController as tc">
<div ng-controller="testController2 as tc2">
<table>
<tbody>
<tr>
<td>{{tc1.testcontrollervalue}}</td>
<td>{{tc1.testcontrollervalue2}}</td>
<td>{{tc1.testcontrollervalue3}}</td>
<td>{{tc2.testcontroller2value1}}</td>
</tr>
</tbody>
</table>
</div>
</div>
For this to work, your variables need to be converted to be properties of the controller, rather than properties of $scope.
var tc1 = this; //consistent reference to controller object
SomeService.get(function(data) {
tc1.someProperty = data;
});
You should probably just do:
<td ng-controller="testController2">{{testcontrollerscopevalue}}</td>
If you really need the div:
<td><div ng-controller="testController2">{{testcontrollerscopevalue}}</div></td>
Chrome 18.0.1025.162m
Struts 1.x
Here's the basic structure of the divs I'm creating using js/mootools:
<div class="track">
<table>
<tr>
<td style="white-space:nowrap; width:1%;">
<td style="white-space:nowrap; width:1%;">
<td>
</tr>
</table>
<div>
<table>
<tr>
<td style="width:50%;">
<fieldset style="height: 244px; ">
<legend></legend>
<table>
<tr>
<td>
<img>
</td>
<td>
<table>
<tr>
<td class="label"></td>
<td class="comparable"></td>
</tr>
<tr>
<td class="label"></td>
<td class="comparable"></td>
</tr>
... 8 more of same
</table>
</td>
</tr>
</table>
<table>
<tr>
<td style="text-align: center; ">
<button type="button"></button>
</td>
</tr>
</table>
</fieldset>
</td>
<td>
...essentially same as prior td
</td>
</tr>
</table>
</div>
</div>
relevant css:
div.track {
outline:solid thin;
margin-bottom:10px;
background-color:#DCEDEA;
}
td.label {
text-align:right;
white-space:nowrap;
}
'comparable' is just a flag so I can find and possible restyle them later.
These structures are created in the onreadystatechange function from a single JSON response. 100+ of these are being created but I don't see anything until they're all ready and then they all appear at once. I would expect (and prefer so the user sees progress) each div to display as soon as it's ready and added (using mootools Element.inject) to the DOM. If I step through using Chrome's dev tools I see the expected behavior of the div displaying immediately after the inject.
I'm fairly new to web development, so if you feel the need to critique my methods I'm open to hearing your thoughts, but I'd really like an explanation for the behavior I'm seeing.
Thanks.
edit
Basic idea of page html:
<body>
<div id='foo'></ div>
</body>
Basic idea of js (within onreadystatechange):
var jsonObj = JSON.decode(req.responseText);
for (var i = 0; i < jsonObj.objects.length; ++i) {
getStructure(jsonObj.objects[i]).inject('foo'); //getStructure builds the div above and returns the div element
}
I suspect that the DIVs are being displayed one at a time, but they're all being displayed so quickly that it looks like it's happening all at once. Add console.log(i); into that for loop and watch your console while the DIVs are loading. You can bring up the console with Ctrl+Shift+J using Google Chrome, or by installing the Firebug extension under Firefox.
EDIT:
In that case, I'd guess it has something to do with the display loop in your browser. Probably something like (in very rough pseudocode):
while (1) {
executeJavascript(); // blocks until all javascript is executed, including your loop
displayPage();
}
You may therefore find this discussion useful: How can I force the browser to redraw while my script is doing some heavy processing?