Thymeleaf does not Serialize the object - javascript

I had trying to display a bootstrap modal when i click a row with the extra data
but when y try to print the object , it does not work:
<table id="datatable" class="table table-striped table-bordered">
<thead>
<tr>
<th># Factura</th>
<th>Cliente</th>
<th>Fecha</th>
<th>Accion</th>
</tr>
</thead>
<tbody>
<tr th:each="bill : ${bills}">
<td th:text="${bill.bill_id}"></td>
<td th:text="${bill.client.name}"></td>
<td th:text="${bill.date}"></td>
<td>
<a class="btn btn-info btn-xs open-modal" data-whatever="[[{$bill}]]" data-toggle="modal" data-target="#billModal">Ver Detalles</a>
</td>
</tr>
</tbody>
</table>
so, i dont know how to that bill object and send it to the modal, i have tried many ways.And it only serialize when i put with th:text or th:value

At least in Thymeleaf 2.x, you need to use the th:attr directive to populate arbitrary attribute values (like data-whatever).
For example
th:attr="data-whatever=${bill}"
In Thymeleaf 3, you may be able to use inlined attributes. I haven't used it yet and the documentation does not make it clear if it's safe for attribute values.
See http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#setting-attribute-values
According to the docs, you may even be able to use the default attribute processor
th:data-whatever="${bill}"

th:attr="data-whatever=${bill}"

Related

Using JavaScript variables in a Thymeleaf th:each

I am trying to build a table using th:each and have the whole row of the table clickable as a link through JavaScript.
<table>
<th:block th:each='user : ${list}'>
<script th:inline="javascript">
var userid = [[${user.id}]];
</script>
<tr onclick="location.href='user?id='+userid">
<td th:text="${user.firstName}"></td>
<td th:text="${user.lastName}"></td>
</tr>
</th:block>
</table>
However, the variable always refers to the latest value and not the one it was when the row was created. Is there a way to do that? Or maybe a different solution to what I'm trying to do?
No need for the th:block, you can simply put the th:each on the tr.
To accomplish the click, I recommend putting the id in a data attribute, and retrieving it in JavaScript. This should work for you:
<table>
<tr th:each="user : ${list}"
th:data-id="${user.id}"
onclick="location.href = 'user?id='+this.getAttribute('data-id')">
<td th:text="${user.firstName}"></td>
<td th:text="${user.lastName}"></td>
</tr>
</table>
You can avoid using JavaScript by adding an <a> element to each table cell (Inspired by https://stackoverflow.com/a/17147909/40064):
<table>
<th:block th:each='user : ${list}'>
<tr>
<td><a th:href="#{/user(id=${userid})}" th:text="${user.firstName}"></a></td>
<td><a th:href="#{/user(id=${userid})}" th:text="${user.lastName}"></a></td>
</tr>
</th:block>
</table>

HTML table how i can insert values of that table to sql (laravel)

On Laravel test.blade.php i got this table with data, editable data. User see that table,adds some values to editable td.How i can parse that table with button onclick or code to sql table database.Tried Jquery to PHP conversion didnt worked (converted data to array in query and tried get array to php variable), tried Simple DOMS didnt worked too.
<table id="examplecopy10" class="table table-striped">
<thead>
<tr>
<th>id</th>
<th>code</th>
<th>stuff</th>
<th>editable stuff</th>
<th>editable stufftwo</th>
</tr>
</thead>
<tbody>
#foreach ($a as $b)
<tr>
<td> {{ $b->id }} </td>
<td> {{ $b->code }} </td>
<td> {{ $b->stuff }} </td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
#endforeach
</tbody>
</table>
I think you should use some Javascript framework to do that. Vue js is the best idea, Vue js is support with Laravel, so you can use it easy. You can do any thing with Laravel and Vue js.

ng-repeat in headers and angular-datatables

I have an HTML table which I want to build the most generic as possible.
I am using jquery-datatables, my problem is that I have try to use ng-repeat on headers of the table and jquery-datatables and I got an error of undefied of current data in the headers.
It is clear to me that when I ran the command $(ID).DataTables() in document ready it is run before angular.
The solutions for this situation is using a directive or angular-datatables.
But when I use angular-datatables with attribute datatables="ng" I get a strange error of loading screen. I am clueless about the solutions for this situation, I would be happy for any help.
This my code of my table which should work but doesn't work as expected.
<table id="gases_data_table" datatable="ng" cellpadding="1" cellspacing="1" border="1">
<thead>
<tr>
<th class="gases_data_table_title" ng-repeat="header in headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="dga in listOfDGAs">
<td class="gases_data_table_item" ng-repeat="detail in dga">{{detail}}</td>
</tr>
</tbody>
</table>

Run ng-repeat on-click (when ng-show is true)?

I have a table that is populating with ng-repeat. Table has 100 rows, if you click on any row new table will show up, (with ng-show) with more deep description of the product. But ng-repeat is slow and generating 101 table on-load of the page, and this is slowing down the performance of my web-app. Is there a way, using angular (without external libraries), to run ng-repeat only when user clicks on the some row (ng-show is true)?
NOTE: Every hidden table is unique.
Here is my html table:
<tbody>
<tr ng-repeat-start="car in sortedCarList" ng-click="showTable(car)">
<td><a target="_blank" href="{{car.carLink}}">{{car.name}}</a></td>
<td>{{car.review}}</td>
<td>{{car.rating}}</td>
<td>{{car.fiveStarPercent}}</td>
<td>{{car.recommended}}</td>
<td>{{car.price}}</td>
</tr>
<tr ng-repeat-end ng-show="modelRow.activeRow==car.name && showDetails && car.allReviews.length!=0" class="hidden-table">
<td colspan="6">
<table class="table table-striped table-bordered table-condensed table-hover">
<thead>
<tr>
<th>Year</th>
<th>Reviews</th>
<th>Rating <span class="fiveStar">/5</span></th>
<th>Recommended</th>
<th>Reliability Rating</th>
<th>Performance Rating</th>
<th>Running Costs Rating</th>
</tr>
</thead>
<tbody ng-repeat="rev in car.allReviews">
....
Try using ng-if rather than ng-show to toggle the nested tables. This should delay any ng-repeat in the nested table to happen until it's shown.

Taking the count of number of 'table' tags using jquery

This is my HTML code
<div class="tableStyle myWebsiteTable">
<table cellspacing="0" cellpadding="0" id="site0" class="site active">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr class="websiteDetails">
<td colspan="5">
<div id="websiteDetails0" class="divWebsiteDetails" style="display: block;">
<table>
<tbody>
<tr id="190">
<td>index</td>
<td></td>
<td></td>
</tr>
<tr class="addPage">
<td align="center" colspan="5"></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr><!--Website Details-->
</tbody>
</table>
<table id="addNewSiteTable">
<thead>
<tr>
</tr>
</thead>
</table>
</div>`<br/>
Now table get added dynamically to this structure.I want to write some logic based on the no of table inside the first div.I tried doing this but did not work $('myWebsiteTable').children('table').length)
PLease suggest the correct way to achieve it
Thank you
You need to use . before class in Class Selector (“.class”)
Live Demo
$('.myWebsiteTable').children('table').length
Also make sure you have added jQuery and elements are added to DOM.
You may need to use find() as children will give you only first level childs where as find will get all the tables in descendants.
$('.myWebsiteTable').find('table').length
$('.myWebsiteTable').children('table').length
And if you actually want to count nested tables:
$('.myWebsiteTable table').length
i think it's class
http://api.jquery.com/class-selector/
$('.myWebsiteTable')
try this, this is more helpfull for you
Demo Here

Categories