I have the following list in my Jsp page.Each row in the list is accompanied by a button.
When I click om that button I need to pas the row index to the controller.
<tr th:each="idBean : ${idBeanLst}" >
<td th:text="${idBeanStat.count}" id="count"></td>
<td th:text="${idBean.identifierId}" id="idenId"></td>
<td th:text="${idBean.idNumber}" id="idNumber"></td>
<td th:text="${idBean.issueLocation}" id="issueLocation"></td>
<td th:text="${idBean.issueDate}" id="issueDate"></td>
<td th:text="${idBean.expiryDate}" id="expDt"></td>
<td><button type="button" name="identifierRow" id="identifierRow" th:value="${idBeanStat.index}" onclick="doAjaxCallRemoveIdentifier(${idBean.index})">Remove</button>
</td>
function doAjaxCallRemoveIdentifier(id) {
alert(id);
//do ajax call to the controller..
}
But I am not able to pass the row id .Any help is much appreciated.
This is what worked for me
<button type="button" name="identifierRow" id="identifierRow" th:value="${idBeanStat.index}" th:onclick="'javascript:doAjaxCallRemoveIdentifier(\'' + ${idBeanStat.index} + '\');'">Remove</button>
Thanks to #ohiocowboy for suggesting me to use th:onclick.Hope this helps some one else.
See 6.2 of the docs. http://www.thymeleaf.org/doc/html/Using-Thymeleaf.html
${idBean.index} will get you the index
Related
I'm trying to do the following: I have a table populated with data from the DB. Apart from that, I have an input where you can write something and a button that will filter, only showing the lines that have that string. This is working now!
The thing is, the input should only allow you to filter by foo.name/foo.code (two propertys of my entity).
I'm adding the code I have in case anyone can guide me out, I've tried several things but this are my first experiences with JQuery while I have a strict story-delivery time. Thanks everyone!
<tbody>
<c:forEach var="foo" items="${foo}">
<tr id = "fooInformation" class="mtrow">
<th id="fooName" scope="row">${foo.name}</th>
<td id="fooCode" class="left-align-text">${foo.code}</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
</c:forEach>
</tbody>
$("#search").click(function () { -> button id
var value = $("#fooRegionSearch").val(); -> value of the input
var rows = $("#fooRegionTable").find("tr"); -> table id
rows.hide();
rows.filter(":contains('" + value + "')").show();
});
To start with, your HTML is invalid - there cannot be elemenets with duplicate IDs in HTML. Use classes instead of IDs.
Then, you need to identify which TRs pass the test. .filter can accept a callback, so pass it a function which, given a TR, selects its fooName and fooCode children which contain the value using the :contains jQuery selector:
$("#search").click(function() {
var value = $("#fooRegionSearch").val();
var rows = $("#fooRegionTable").find("tr");
rows.hide();
rows.filter(
(_, row) => $(row).find('.fooName, .fooCode').filter(`:contains('${value}')`).length
).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="fooRegionTable">
<tr id="fooInformation" class="mtrow">
<th class="fooName" scope="row">name1</th>
<td class="fooCode" class="left-align-text">code1</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
<tr id="fooInformation" class="mtrow">
<th class="fooName" scope="row">name2</th>
<td class="fooCode" class="left-align-text">code2</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
</table>
<button id="search">click</button><input id="fooRegionSearch" />
I need to obtain the value of the checkbox when "expand" is clicked, I have tried the following this looks clumsy and when the DOM is modified then it may render undefined instead of the expect value CBVALUE
<tr>
<td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
<td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
<td class="third"><a class="option s" id="option_0">Expand</a> </td>
<td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr>
$('.option').click(function(e) {
e.preventDefault();
alert($(this).parent().prev().prev().children().first().val()); //should alert as CBVALUE
});
Is there an easier solution than traversing with relative elements?
You can try below logic where find parent tr and then find checkbox to read value
$(function(){
$('.option').on('click', function(e) {
e.preventDefault();
var value = $(this).closest('tr').find('input:checkbox').val();
alert(value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
<td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
<td class="third"><a class="option s" id="option_0">Expand</a> </td>
<td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr>
</table>
Try $.parents() instead:
$(this).parents('tr').find('input[type=checkbox]').val()
You can use jQuery's $(...).siblings() method and pass it a selector:
$('.option').click(function(e) {
e.preventDefault();
alert($(this).siblings("#r0[type='checkbox']").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
<td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
<td class="third"><a class="option s" id="option_0">Expand</a> </td>
<td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr>
for me, .find() method seems to return an array of checkbox objects, I need to add [0] to the end to be able to apply .val() method, otherwise I got 'on' all times. Example:
var value = $(this).closest('tr').find('input:checkbox')[0].val()
Yo can do by using filtering. See this demo link
$(this).closest('td').parent().find('input[type=checkbox]').val()
if my HTML is like this :
<tbody id="hasil-pencarian">
<tr>
<td align="center">1</td>
<td>TMS/IT/06/001</td>
<td>Erika Julia Widiyanti</td>
<td>Marketing</td>
<td>14-06-2015 13:59</td>
<td>14-06-2015 14:00</td>
<td>Erika test 1</td>
<td id="action" class="center" width="10px">
<a class="btn btn-success">
</td>
</tr>
</tbody>
I got all the html above like this :
var result = $("#hasil-pencarian").html();
But, How can I get all the HTML without the <td> with id='action' ?
Little confused. Any help will be so appreciated.
I think you could create clone then remove the element then get the content like
var result = $("#hasil-pencarian").clone().find('#action').remove().end().html();
I have jQuery to add a some content to a page:
$('#upper').on("click",'a',function(e){
e.preventDefault();
var url = $(this).attr('href');
if (!$(this).hasClass('new')) {
$('#lower').load(url);
}
});
It works fine but the added content includes some links. I.e.:
<table class="report">
<tr>
<td class="report">
PG010000001
</td>
<td class="report">società</td>
<td class="report">LSSF Consulting SRL</td>
<td class="report">
PF010000002
</td>
<td class="report">IC - Intestatario di un credito</td>
</tr>
</table>
First time I click on the href nothing happens. Second time it works fine . Looks like I miss something in the code I have posted to focus the added content. Any advice? Will try to create a fiddle in the meanwhile (never done before...)
Thanks in advance!
I have a "mini-cart" in a eCommerce site that I am bulding. For the "mini-cart" i use foreach to add items to a table.
The "mini-cart" is a dropdown and it is rendered from a razor file. When i close the "mini-cart" and opens it again it automatically appends all the rows one more time. So everytime I close the "mini-cart" and opens it again. All the rows gets appended one more time.
When the cart is opened this code is run.
showCart = function () {
WebService.PostJson("/services/CartService.svc/GetCart", {},
function (cartDto) {
updateCart(cartDto);
postman.deliver('cartShown', 1);
},
function () {
});
};
The table looks like this.
<table width="100%" >
<thead data-bind="foreach: Items, stripe: Items, evenClass: 'even', oddClass: 'odd'">
<tr>
<td data-bind="text: ArticleNo">
</td>
<td data-bind="text: Name" style="width:390px;">
</td>
<td>
<input type="text" data-bind="value: Quantity" class="quantity"/>
</td>
<td class="cart-price-column">
<span class="cartRowSubTotal" style="display: none;" data-bind="text: SubTotal"></span>
</td>
<td>
Ta bort
</td>
</tr>
</thead>
</table>
updateCart does a Items.splice(0); so it should reload it self each time. But it does not seem to work i internet explorer 7 and 8.
Is there anyway to "clear" the table everytime? Or can the viewmodel figure this out on its own?
Thanks.
UPDATE:
It seemed that the splice method did not empty the array for some reason. When changed to cart.Items([]) it started to work.
Set cart.items(null);
Nothing to do with IE!
In IE, the length parameter is required. Leaving it empty causes the function to do nothing. Call it like this: Items.splice(0, Items().length).