We Keep Coding

Load Data in Modal with Ajax from Spring Controller

I just started with Spring two month ago and never did Ajax or JavaScript before. So i'm pretty new to this. What i want to do is load data from a GET Method in my Controller to populate this into a modal. I'm using ajax for this. Basicly i did what this guy https://qtzar.com/2017/03/24/ajax-and-thymeleaf-for-modal-dialogs/ is doing. But it's not working.
Hope somebody can help me with this.
Here is my Controller:
#RequestMapping(path="/reservations/details/{reservationId}", method=RequestMethod.GET)
public #ResponseBody String getReservationDetails(#PathVariable("reservationId") String reservationId, Model model, Principal principal, HttpServletRequest request){
LOGGER.info(LogUtils.getDefaultInfoStringWithPathVariable(request, Thread.currentThread().getStackTrace()[1].getMethodName(), " reservationId ", reservationId.toString()));
User authenticatedUser = (User) ((Authentication) principal).getPrincipal();
if(authenticatedUser.getAdministratedRestaurant() == null) {
LOGGER.error(LogUtils.getErrorMessage(request, Thread.currentThread().getStackTrace()[1].getMethodName(), "The user " + authenticatedUser.getUsername() + " has no restaurant. A restaurant has to be added before offers can be selected."));
return null;
}
Reservation reservation = reservationRepository.findOne(Integer.parseInt(reservationId));
if(reservation == null){
return null;
}
List<ReservationOffers> reservationOffers = reservation.getReservation_offers();
if(reservationOffers == null){
return null;
}
model.addAttribute("offers", reservationOffers);
return "reservations :: reservationTable";
}
This is the button which calls the JavaScript within the "reservation.html"
<button type="button" class="btn btn-success" th:onclick="'javascript:openReservationModal(\''+*{reservations[__${stat.index}__].id}+'\');'">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
Here is the modal I want to show:
<div id="reservationModal" class="modal fade" role="dialog" th:fragment="reservationTable">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" th:text="'Reservation Details'">Modal Header</h4>
</div>
<div class="modal-body">
<table class="table table-hover" id="reservationTable">
<thead>
<tr>
<td th:text="'Name'"></td>
<td th:text="'Amount'"></td>
</tr>
</thead>
<tbody>
<tr th:each="offer : ${offers}">
<td th:text="${offer.getOffer().getTitle()}"></td>
<td th:text="${offer.getAmount()}"></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
There is a empty div in my reservation.html
<div id="modalHolder">
</div>
And there is the JavaScript with Ajax:
<script th:inline="javascript" type="text/javascript">
function openReservationModal(id) {
$.ajax({
url: "/reservations/details/"+id,
success: function(data) {
console.log(data);
$("#modalHolder").html(data);
$("#reservationModal").modal("show");
}
});
}
</script>
Thank you guys!
EDIT:
Here is the Table which contains the button:
<form action="#" th:object="${wrapper}" method="post">
<div style="height: 190px; overflow: auto;">
<table class="table table-hover" id="reservationTable">
<thead>
<tr>
<th th:text="#{reservations.label.oderId}">Id</th>
<th th:text="#{reservations.label.customername}">name</th>
<th th:text="#{reservations.label.datetime}">date with time</th>
<th th:text="#{reservations.label.price}">price</th>
<th th:text="#{reservations.label.donation}">customer donation</th>
<th th:text="#{reservations.label.priceWithDonation}">price included with Donation</th>
<!-- <th th:text="#{reservations.label.confirmed}">finished reservation</th> -->
<!-- <th th:text="#{reservations.label.isfree}">free reservation</th> -->
<th th:text="#{reservations.label.choice}">reservation selection</th>
<th th:text="#{reservations.label.details}">reservation details</th>
</tr>
</thead>
<tbody>
<tr th:each="reservation, stat: *{reservations}">
<div th:switch="${reservation.isUsedPoints()}">
<div th:case="false">
<td th:text="${reservation.getReservationNumber()}"></td>
<td th:text="${reservation.getUser().getUsername()}"></td>
<td th:text="${#dates.format(reservation.reservationTime, 'HH:mm')}"></td>
<td><span th:text="${#numbers.formatDecimal(reservation.getTotalPrice(), 1, 'POINT', 2, 'COMMA')}"> </span> €</td>
<td><span th:text="${#numbers.formatDecimal(reservation.getDonation(), 1, 'POINT', 2, 'COMMA')}"> </span> €</td>
<td><span th:text="${#numbers.formatDecimal(reservation.getDonation() + reservation.getTotalPrice(), 1, 'POINT', 2, 'COMMA')}"> </span> €</td>
<!-- <td th:text="${reservation.isConfirmed()}"></td> -->
<!-- <td th:text="${reservation.isUsedPoints()}" ></td> -->
<td>
<input type="hidden" th:field="*{reservations[__${stat.index}__].id}" />
<input type="checkbox" th:field="*{reservations[__${stat.index}__].confirmed}"/>
<input type="hidden" th:field="*{reservations[__${stat.index}__].rejected}" />
<input type="hidden" th:field="*{reservations[__${stat.index}__].donation}"/>
<input type="hidden" th:field="*{reservations[__${stat.index}__].totalPrice}"/>
<input type="hidden" th:field="*{reservations[__${stat.index}__].usedPoints}"/>
</td>
</div>
<div th:case="true">
<input type="hidden" th:field="*{reservations[__${stat.index}__].id}" />
<input type="hidden" th:field="*{reservations[__${stat.index}__].confirmed}" />
<input type="hidden" th:field="*{reservations[__${stat.index}__].rejected}" />
<input type="hidden" th:field="*{reservations[__${stat.index}__].donation}"/>
<input type="hidden" th:field="*{reservations[__${stat.index}__].totalPrice}"/>
<input type="hidden" th:field="*{reservations[__${stat.index}__].usedPoints}"/>
</div>
<td>
<button type="button" class="btn btn-success" th:onclick="'javascript:openReservationModal(\''+*{reservations[__${stat.index}__].id}+'\');'">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</td>
</div>
</tr>
</tbody>
</table>
</div>
<button type="submit" class="btn btn-success" th:text="#{reservations.button.confirm}" name="confrim" style="float: right; margin-right: 25px;"></button>
<button type="reject" class="btn btn-success" th:text="#{reservations.button.reject}" name="reject" style="float: right; margin-right: 25px;"></button>
<input type="hidden"
th:name="${_csrf.parameterName}"
th:value="${_csrf.token}" />
</form>

Okay i found two mistakes by myselfe. First the Table which contians the button had the same id as the modal. The second one was the #ResponseBody Annotation in the controller. Now its returning the right data to the console but still not to the modal.
Here is the output on the console:
Data: <div id="reservationModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Reservation Details</h4>
</div>
<div class="modal-body">
<table class="table table-hover" id="reservationOfferTable">
<thead>
<tr>
<td>Name</td>
<td>Amount</td>
</tr>
</thead>
<tbody>
<tr>
<td>Schwarzer Kaffe</td>
<td>1</td>
</tr>
<tr>
<td>Haxn</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Get id value from list jsp

I have view on my jsp like this:
<form:form name = "command"
method = "post"
action = "withdrawRequest"
class = "form-horizontal group-border-dashed"
style = "border-radius: 0px;">
<table class = "table table-bordered"
id = "datatable-icons" > <!-- start table table-bordered -->
<thead>
<tr>
<th>ID</th>
<th>NO</th>
<th>AMOUNT (RP)</th>
<th>DOCTOR BALANCE (RP)</th>
<th>DOCTOR ID</th>
<th>DOCTOR NAME</th>
<th>TRANSFER ADMIN NAME</th>
<th>TRANSFER DATE</th>
<th>TRANSFER REFERENCE</th>
<th>TRANSFERRED</th>
</tr>
</thead>
<tbody>
<c:forEach var = "withdrawal"
items = "${listWithdrawals}"
varStatus = "loopStatus">
<tr class="odd gradeX">
<td>${withdrawal.id}</td>
<td>${loopStatus.index + 1}</td>
<td class="text-right"><fmt:formatNumber type="number" maxFractionDigits="2" value="${withdrawal.amount}" /></td>
<td class="text-right"><fmt:formatNumber type="number" maxFractionDigits="2" value="${withdrawal.doctor_balance}" /></td>
<td>${withdrawal.doctor_id}</td>
<td>${withdrawal.doctor_name}</td>
<td>${withdrawal.transfer_admin_name}</td>
<td><%-- <fmt:formatDate type="date" value="${withdrawal.transfer_date}" /> --%>${withdrawal.transfer_date}</td>
<td>${withdrawal.transfer_reference}</td>
<td class="text-center">
<c:if test="${withdrawal.transferred == true}">
<span class="label label-success">Transferred</span>
</c:if>
<c:if test="${withdrawal.transferred == false}">
<button class="btn btn-warning btn-sm md-trigger" data-modal="form-primary" type="button">Pending</button>
</c:if>
<div class="md-modal colored-header danger custom-width md-effect-9" id="form-primary">
<div class="md-content">
<div class="modal-header">
<h3>Confirm Withdrawal Request</h3>
<button type="button" class="close md-close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body form">
<div class="form-group">
<label class="col-sm-3 control-label">Admin Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="adminName" value="${adminName}">
<input type="text" class="form-control" name="id" value="${withdrawal.id}" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Transfer Reference</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="transferReference" value="${transferReference}">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat md-close" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger btn-flat md-close" name="submitRequest">Submit</button>
</div>
</div>
</div>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</form:form>
I cannot get the ID of which button I selected from view,
<input type = "text"
class = "form-control"
name = "id"
value = "${withdrawal.id}" />
If I use this code
String withdrawalId = request.getParameter("id");
The value is always 120.
For example:
How do I get the correct ID when I click the modal window?

It seems that the problem is in Nifty Modal Window Effects you are using for popup. It opens modal window for the last row.
It can be fixed with following jsp modifications.
Move modal window declaration out of table. Make it single for page. And rename id field to make it unique, e.g. transferredId
Add onclick to buttons opening modal window in order to init it (set transferredId and others) with necessary values
So your form would be (just ending to save space)
....
<td class="text-center">
....
<c:if test="${withdrawal.transferred == false}">
<button class="btn btn-warning btn-sm md-trigger" data-modal="form-primary" type="button"
onclick="document.getElementById('transferredId').value=${withdrawal.id}">
Pending
</button>
</c:if>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<div class="md-modal colored-header danger custom-width md-effect-9" id="form-primary">
<div class="md-content">
<div class="modal-header">
<h3>Confirm Withdrawal Request</h3>
<button type="button" class="close md-close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body form">
<div class="form-group">
<label class="col-sm-3 control-label">Admin Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="adminName" value="${adminName}">
<input type="text" class="form-control" name="transferredId" id="transferredId" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Transfer Reference</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="transferReference">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat md-close" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger btn-flat md-close" name="submitRequest">Submit</button>
</div>
</div>
</div>
After that String withdrawalId = request.getParameter("transferredId"); will return correct id.

Excuse me for not add this as a comment, as i can't because i still not have 50 reputation (still 16), i just want you to test something, try to refresh the page, and open row with ID 119 for example first time, i mean any Id rather than 120, and see what happen, if the value that you opened first time is always still exist, so the problem is not in id 120 and the problem is that u may use if not null to set the value some where, so first time it will be null and the value added to it, but next times it will have a value already so u can't change it, and if u can't solve the problem after doing that, please upload your controller so we can detect the problem

Check the generated HTML. Looks to me that it contains listWithdrawals.length instances of that <input and all of them have the same name.
request.getParameter("id") is going to return a single value, not a list of all the values. What you need is request.getParamaterValues("id") that is going to return all of them.
This is because when the form is submitted all those input values are going to be sent.
So the simple solution (with no JavaScript magic) is to get all the lists of values with request.getParamaterValues and deal with everything that changed. ids[0] and transferReferences[0] would be the needed values for the first item in listWithdrawals:
String[] ids = request.getParamaterValues("id");
String[] transferReferences = request.getParamaterValues("transferReference");
for (int i = 0; i < ids.length; i++) {
System.out.println(ids[i]);
System.out.println(transferReferences[i]);
}
Another solution would be to generate unique names for each input/item in listWithdrawals:
<c:forEach var="withdrawal" items="${listWithdrawals}" varStatus="loopStatus">
<input type="text" class="form-control" name="${'transferReference_'.concat(withdrawal.id)}" value="${withdrawal.id}" />
</c:forEach>
And then you'd be able to access the transferReference value of a withdrawal with ID 119 like this:
request.getParameter("transferReference_119")

How to insert picture through textbox using selenium webdriver?

Code trials:
package modules;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.remote.LocalFileDetector;
import org.openqa.selenium.support.ui.Select;
public class PostUpdating {
public void Execute()
{
WebElement w = LaunchApplication.driver.findElement(By.id("whats-new"));
w.sendKeys("/C:/Users/Public/Pictures/Sample Pictures/Desert.jpg");
Select sel = new Select(LaunchApplication.driver.findElement(By.id("rtSelectPrivacy")));
sel.selectByVisibleText("Public");
Select sel1 = new Select(LaunchApplication.driver.findElement(By.id("whats-new-post-in")));
sel1.selectByVisibleText("My Profile");
LaunchApplication.driver.findElement(By.id("aw-whats-new-submit")).click();
}
}
The html
<div id="whats-new-textarea" style="position: relative;">
<textarea id="whats-new" class="bp-suggestions linkBox" rows="10" cols="50" name="whats-new" style="display: inline-block; height: 50px;"></textarea>
<div id="rtm-drop-files-title">Drop files here</div>
<div class="rtmp-url-scrapper-container">
<img class="rtmp-url-scrapper-loading" src="http://demo.rtcamp.com/rtmedia/wp-content/plugins/buddypress-media/app/assets/admin/img/boxspinner.gif">
<table id="rtmp-url-scrapper" style="display: none;">
<tbody>
<tr>
<td>
<table id="rtmp-url-scrapper-img-holder">
<tbody>
<tr>
<td style="height:100px; overflow:hidden;" colspan="2">
<div id="rtmp-url-scrapper-img">
<img src="">
</div>
</td>
</tr>
<tr>
<td id="" style="width:50%; text-align:right;">
<input id="rtmp-url-prevPicButton" type="button" value="<">
</td>
<td id="" style="width:50%; text-align:left;">
<input id="rtmp-url-nextPicButton" type="button" value=">">
</td>
</tr>
<tr>
<td colspan="2">
<div id="rtmp-url-scrapper-img-count"></div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
I want to insert a image into my text box but when I use Sendkeys and gave the path from my computer but instead of sending the image it is sending the path only into my text box.Also there is a button in my webpage for uploading the picture but when I clicked on button windows dialoge box open. So selenium can't deal with Windows GUI.So Any help how to do this?

drv.find_element_by_id("IdOfInputTypeFile").send_keys(os.getcwd()+"/image.png")

To insert an image into the text box you need to send the filename along with the absolute path as a character sequence to the element inducing WebDriverWait for the elementToBeClickable() and you can use either of the following locator strategies:
cssSelector:
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("textarea.bp-suggestions.linkBox#whats-new"))).sendKeys("/C:/Users/Public/Pictures/Sample Pictures/Desert.jpg");
xpath:
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//textarea[#class='bp-suggestions linkBox' and #id='whats-new']"))).sendKeys("/C:/Users/Public/Pictures/Sample Pictures/Desert.jpg");

how to insert values in multiple text box and updating the value in it seqentially?

my java code
package com.ej.zob.modules;
import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
public class Revenue {
public void Execute(String value)
{
LaunchApplication.driver.findElement(By.linkText("VIEW")).click();
LaunchApplication.driver.findElement(By.linkText("REVENUE")).click();
LaunchApplication.driver.findElement(By.name("click")).click();
LaunchApplication.driver.findElements(By.xpath("//a[contains(#id,'Edit_')")).click();
List<WebElement> a = LaunchApplication.driver.findElements(By.xpath("//input[#type='text']"));
List<WebElement> b = LaunchApplication.driver.findElements(By.xpath("//input[#value='Update']"));
for(WebElement elem_1:a){
elem_1.clear();
elem_1.sendKeys(value);
}
for(WebElement elem_2:b)
{
elem_2.click();
}
}
}
}
my HTML
<tr>
<td>Arunachal Pradesh</td>
<td>
<div>
<input id="1_1" type="text" value="44155" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_1")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_2" type="text" value="79103" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_2")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_3" type="text" value="11639" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_3")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_4" type="text" value="22004" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_4")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_5" type="text" value="65958" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_5")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_6" type="text" value="76837" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_6")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_7" type="text" value="3642" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_7")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_8" type="text" value="84573" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_8")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_9" type="text" value="3438" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_9")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_10" type="text" value="32859" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_10")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_11" type="text" value="45793" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_11")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_12" type="text" value="95662" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_12")" style="width:60px">
</div>
</td>
<td>
<a id="Edit_1" href="#" onclick="fnEditRevenue("1");" style="visibility: hidden;">Edit</a>
|
<a id="Hide_1" href="#" onclick="fnHideRevenue(1);" style="visibility: hidden;">Hide</a>
|
<a id="Show_1" href="#" style="visibility:hidden" onclick="fnShowRevenue(1);">Show</a>
</td>
Lets first understand the functionality of my application.In my webpage there are more than 26 rows and 12 column.Each row contains 12 text box and 12 buttons and a "Edit" button too.when Edit button is clicked then text box and 'update' button will be open.this is my functionality of my webpage.
And what I want to do is when Edit button is clicked then some value should enter in text box and 'update' button should be clicked.this should happens for each row.By using the above code I am able to click on single 'Edit' button and updating only single row.
Can anyone help ?

It is updating only single row because you have not identified based on column names, try this-
WebElement table = driver.findElement(By
.cssSelector("table[id='yourtableid']"));
List<WebElement> col = table.findElements(By.tagName("td"));
for (int cnum = 0; cnum < col.size(); cnum++) {
WebElement text = driver.findElement(By.xpath("//input[#type='text']"));
text.clear();
text.sendKeys(value);
WebElement update = driver.findElement(By.xpath("//input[#value='update']"));
update.click();
}

How to check checkbox based on row table (database)?

I've a form that can edit/update data build in modal (bootstrap), I want to check the checkbox based on my row table...
this is my edit/update form :
<td><fieldset id="menu_e">
<input type="checkbox" name="menu" value="User" class="ceksmenu">User<br />
<fieldset id="sub_menu_user_e">
<input type="checkbox" name="sub_menu_user" value="User1" class="ceksmuser">User1
<input type="checkbox" name="sub_menu_user" value="User2" class="ceksmuser">User2
<input type="checkbox" name="sub_menu_user" value="User3" class="ceksmuser">User3<br />
</fieldset>
<input type="checkbox" name="menu" value="Monitoring" class="ceksmenu">Monitoring<br />
<fieldset id="sub_menu_monitoring_e">
<input type="checkbox" name="sub_menu_monitoring" value="Monitoring1" class="ceksmmonit">Monitoring1
<input type="checkbox" name="sub_menu_monitoring" value="Monitoring2" class="ceksmmonit">Monitoring2
<input type="checkbox" name="sub_menu_monitoring" value="Monitoring3" class="ceksmmonit">Monitoring3<br />
</fieldset>
<input type="checkbox" name="menu" value="Parameter" class="ceksmenu">Parameter<br />
<fieldset id="sub_menu_parameter_e">
<input type="checkbox" name="sub_menu_parameter" value="Parameter1" class="ceksmparam">Parameter1
<input type="checkbox" name="sub_menu_parameter" value="Parameter2" class="ceksmparam">Parameter2
<input type="checkbox" name="sub_menu_parameter" value="Parameter3" class="ceksmparam">Parameter3</fieldset>
</fieldset>
</td>
this is my table code :
<tbody>
<c:forEach var="row" items="${requestScope.authorityuser}">
<tr>
<td>${row.id_authority}</td>
<td>${row.nama_authority}</td>
<td><c:forEach var="u" items="${row.menu}">|${u}| </c:forEach></td>
<td><c:forEach var="u" items="${row.sub_menu_user}">|${u}| </c:forEach></td>
<td><c:forEach var="u" items="${row.sub_menu_monitoring}">|${u}| </c:forEach></td>
<td><c:forEach var="u" items="${row.sub_menu_parameter}">|${u}| </c:forEach></td>
<input type="hidden" name="id_authority" value="${row.id_authority }">
<td><a href="#update" role="button" data-toggle="modal"
class="update" id_update="${row.id_authority}"
nama_authority="${row.nama_authority}" menu="${row.menu}"
sub_menu_user="${row.sub_menu_user}" sub_menu_monitoring="${row.sub_menu_monitoring}"
sub_menu_parameter="${row.sub_menu_parameter}"> <i class="icon-edit"></i> <spring:message code="edit" text="default text" />
</a><a href="#delete" role="button" data-toggle="modal"
class="delete" id_delete="${row.id_authority}">
<i class="icon-trash"></i> <spring:message code="delete" text="default text" />
</a></td>
</tr>
</c:forEach>
</tbody>
I tried like this and it's not work :(
<script type="text/javascript">
$(document).ready(function() {
$('.update').click(function() {
if($('input:checkbox[name=sub_menu_user]').is(':checked')){
$('input:checkbox[name=sub_menu_user]').prop('checked', true);
}else{
$('input:checkbox[name=sub_menu_user]').prop('checked', false);
}
var id_update = $(this).attr("id_update");
var nama_authority = $(this).attr("nama_authority");
var menu = $('input:checkbox[name=menu]').is(':checked');
var sub_menu_user = $('input:checkbox[name=sub_menu_user]').is(':checked');
var sub_menu_monitoring = $('input:checkbox[name=sub_menu_monitoring]').is(':checked');
var sub_menu_parameter = $('input:checkbox[name=sub_menu_parameter]').is(':checked');
$('#id_authority_e').val(id_update);
$('#id_authority_l').val(id_update);
$('#nama_authority_e').val(nama_authority);
$('#menu_e').val(menu);
$('#sub_menu_user_e').val(sub_menu_user);
$('#sub_menu_monitoring_e').val(sub_menu_monitoring);
$('#sub_menu_parameter_e').val(sub_menu_parameter);
});
$('.delete').click(function() {
var id_delete = $(this).attr("id_delete");
$('#id_authority_d').val(id_delete);
});
$('#example').dataTable({
});
});
</script>
this is the output of my table
how is it possible?? any help will be pleasure :)
this is my edit/update form
this is my table

Well i just looked at the javascript portion, here is my answer.
You would have to read the Text in the HTML and parse it, for that you need to be able to get a specific cell. With the row_id you can narrow your search down and over the classname for the cloumn you get the right cell.
I hope this short working demo on jsFiddle might help you with your "problem".
HTML:
<table class="data-table">
<tr id="row_1"><td class="authority">...</td>
<!-- id should be constructed something like id="row_${row.id_authority}" -->
<td class="...">...</td>
<td class="users">|user1|user2|user3|</td>
<td class="...">...</td>
<td> edit </td>
<!-- id_update should be as in your code id="${row.id_authority}" -->
</tr>
</table>
Javascript:
$(function(){
$(".update").click(function(){
var id_update = $(this).attr("id_update");
var users = $("#row_" + id_update).find(".users").text().split("|").slice(1,-1);
for(var user in users)
alert(users[user]);
});
});
// tested on Windows 7 with Chrome 33+
edit: added some "Code"
possible JSP Code:
<c:forEach var="row" items="${requestScope.authorityuser}">
<tr id="row_${row.id_authority}">
<td class="...">${row.id_authority}</td>
<td class="...">...</td>
<td class="users"><c:forEach var="u" items="${row.sub_menu_user}">|${u}| </c:forEach></td>
<td class="...">...</td>
<td>
<a href="#update" role="button" data-toggle="modal"
class="update" id_update="${row.id_authority}"
nama_authority="${row.nama_authority}" menu="${row.menu}"
sub_menu_user="${row.sub_menu_user}" sub_menu_monitoring="${row.sub_menu_monitoring}"
sub_menu_parameter="${row.sub_menu_parameter}"> <i class="icon-edit"></i> <spring:message code="edit" text="default text" />
</a> ...
</td>
</tr>
</c:forEach>
edit:
i updated the jsFiddle (this link is different to the one above).
the important part is here...
for(var user in users){
// it could be optimized, but like this it could work.
$("input[name='sub_menu_user'][value='" + users[user] + "']")[0].checked=true;
}
// tested on Windows 7 with Chrome 33+