I have a problem on delete item using modal. I can delete the using just the href obtaining the id and passing it to the controller. But i dont know how to get the id of the item in modal and delete it.
List of persons and actions to be performed
<c:forEach var="user" items="${listpersons}">
<tr>
<td>${user.username}<!-- <span>Clients</span> --> </td>
<td>${user.email}</td>
<td>
<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Compose"><i class="fa fa-envelope-o"></i></button>
<i class="fa fa-edit" title="Edit"></i></button>
<i class="fa fa-trash-o"></i>
Launch Demo Modal
</td>
<td class="text-right mail-date">Jan 16</td>
</tr>
</c:forEach>
this part is the modal button when clicked pops.up a if i want to really delete the item
Launch Demo Modal
this is my delete button. i can delete here but i want to delete using modal
<i class="fa fa-trash-o"></i>
and this is my modal popup
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this user? </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<i class="fa fa-trash-o"></i>
</div>
</div>
</div>
</div>
I dont know how to pass the id of the person in the modal popup. delete doesnt work. it doent recognize any id
this is the controller
#RequestMapping(value = "/delete", method = RequestMethod.GET)
public ModelAndView delete(#ModelAttribute("SpringWeb")User user, ModelMap model, HttpServletRequest request)
{
try
{
UserDao ud = new UserJDBC();
int id = Integer.parseInt(request.getParameter("id"));
int delete = ud.deleteUser(id);
model.addAttribute("message", "User deleted Successfuly");
}
catch(Exception e)
{
System.out.print(e);
model.addAttribute("message", "Error occured in deleting user.");
}
return new ModelAndView("admin-view-users");
}
User is not deleted. i get this delete?id=0 when clicking the Delete on the modal
Append ${user.id} with href value of popup show button i.e.
#myModal_${user.id}
Add modal popup inside the foreach loop and now append ${user.id} with popup id.
i.e. myModal_${user.id}
replace your foreach with this code and remove popup.
<c:forEach var="user" items="${listpersons}">
<tr>
<td>${user.username}<!-- <span>Clients</span> --> </td>
<td>${user.email}</td>
<td>
<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Compose"><i class="fa fa-envelope-o"></i></button>
<i class="fa fa-edit" title="Edit"></i></button>
<i class="fa fa-trash-o"></i>
Launch Demo Modal
</td>
<td class="text-right mail-date">Jan 16</td>
</tr>
<div id="myModal_${user.id}" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this user? </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<i class="fa fa-trash-o"></i>Delete
</div>
</div>
</div>
</div>
</c:forEach>
Note:-Please do not forgot to add modal popup inside foreach.
Related
I do a simple vocabulary application as a practice. It can insert new vocabularies and then open that vocabulary so you can add some words in it.
My goal is to insert those words with a modal and with the button Save redirect to that current vocabulary's url.
So create a new Vocabulary and with an "Open" button you go to localhost:8080/vocabulary/1 where you can add new words with a modal, and then with the Save button you redirect back to that URL. (vocabulary/{id})
My question is: Could anyone recommend a solution? I have tried to find something, but it doesn't work.
I tried with this:
Controller:
#PostMapping("/vocabulary/{id}")
public ModelAndView addWord(#RequestBody Words word, #PathVariable(name="id") Integer id) {
ModelAndView mav = new ModelAndView("redirect:/vocabulary");
wordService.addWord(word);
List<Words> wordList = wordService.getWordsByVocabulary(id);
mav.addObject("listOfWords", wordList);
return mav;
}
HTML-Modal
<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="createModalLabel">New Word</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form th:object="${word}" method="post" th:action="#{'/vocabulary/' + ${vocId}}">
<div class="form-group">
<label for="english" class="col-form-label">English:</label>
<input type="text" class="form-control" id="english" th:field="*{english}">
</div>
<div class="form-group">
<label for="hungarian" class="col-form-label">Hungarian:</label>
<input type="text" class="form-control" id="hungarian" th:field="*{hungarian}">
</div>
<input type="hidden" th:field="*{vocabularyId}" id="vocabularyId">
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
The Save button starts the Controller's addWord() method.
I have a controller that processes the purchase of a product,it takes two parameters,count - the quantity of the product and id - the ID of the product that the user buys.
#PostMapping("/buyproduct")
public String buyProduct(#RequestParam int count,#RequestParam long id){
Product product = productRepository.findById(id);
int activeCount = product.getCount();
if (activeCount-count<0){
return "redirect:/";
}
product.setCount(activeCount-=count);
productRepository.save(product);
return "redirect:/buyproductsuccessful";
}
In index.html I have listed all available products in the database using Thymeleaf.
<div class="col-12 col-md-6 col-lg-4" th:each="element : ${products}">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/362/180" alt="Card image cap">
<div class="card-body">
<h5 style="text-align: center" class="card-title" th:text="${element.getName()}"</h5>
<span th:text="${element.getCost()}"></span></p>
<span th:text="${element.getCount()}"></span> </p>
...
Each product has its own button,when clicked, a popup opens in which you need to enter the quantity of the purchased product and Bank data (I don't process them, I don't Need them yet), and there is also a hidden field in which I want to put the product ID so that it can be passed to the controller later.
<form action="#" th:action="#{/buyproduct}" th:object="${element}" method="post">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" style="color: #368819"></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div>
<input type="hidden" name="id" th:value="*{getId()}">
<label><b>რაოდენობა</b></label><br>
<input class="col-4" type="number" min="1" value="1" name="count" required><br><br>
<label><b></b></label><br>
<input class="col-12" type="text"><br><br>
<label><b></b></label><br>
<input class="col-12" type="date"><br><br>
<label><b>CVV/CVC</b></label><br>
<input class="col-4" type="text"><br><br>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" class="btn btn-success"></button>
<button type="button" class="btn btn-danger" data-dismiss="modal"></button>
</div>
</form>
But Thymeleaf passes the id of the first product every time,what is my mistake?
The problem was with Bootstrap modal scopes.
<button style="margin-left: 40%" type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
<div class="modal" id="myModal">
After fix its looks like this.
<button style="margin-left: 40%" type="button" class="btn btn-success" data-toggle="modal" th:attr="data-target='#id-' + ${element.getId()}">
<div class="modal" th:id="'id-' + ${element.getId()}">
I have a problem with get a value of field from modal window.
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModal" aria-hidden="true">
<form th:action="#{/groups/add}" method="post">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addModal">Add group</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="recipient-name" class="col-form-label">Group Name</label> <input type="text"
class="form-control" id="addName" name="name">
</div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Faculty</label> <select
class="form-control">
<option th:value=0>Faculty not assign</option>
<option th:each="faculty : ${faculties}" th:value="${faculty.id}"
th:utext="${faculty.name}">Faculty</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</form>
</div>
In browser when I use "add" method, I can choose any Faculty from table, it works OK, but when I press button "save", only name returned to Controller and no info about faculty that was chosen. What I missed?
Finally I solved this problem- I forget to give a name for field where facultyId is stored.
Here was error:
<label for="recipient-name" class="col-form-label">Faculty</label>
<select class="form-control">
Correct:
<label for="faculyId" class="col-form-label">Faculty</label>
<select class="form-control" id="addFaculty" name="facultyId">
I had some success prior to this using below code.
driver.findElement(By.xpath("//xpath")).click();
driver.findElement(By.xpath("//div[#id='container']/div[#id='main']/div[#id='columnOne']/div[#class='ng-scope']/div[#class='content ng-scope']/div/div[#class='ng-isolate-scope']/div[#class='tab-content']/div[#class='tab-pane ng-scope active']/div[#class='ng-scope']/div[#id='uploadRequests']/div[#id='fileUploadPanel']/div[#class/span[#class='btn btn-primary']='panel-body']/div/div[#class='panel panel-default']/div[#class='panel-heading clearfix']/div[#class='pull-left']/label")).click();
Here is the html:
<div class="panel-body">
<div>
<div class="panel panel-default">
<div class="panel-heading clearfix">
<div class="pull-left">
<label for="inputFile"><input class="hidden" type="file" name="inputFile" id="inputFile" on-change-action="addFile" multiple="">
<span class="btn btn-primary xh-highlight"><i class="glyphicon glyphicon-plus"></i>Add</span>
</label>
</div>
<div class="pull-right ng-hide" ng-show="files.length > 0"><button ng-click="removeAll()" class="btn btn-primary"><i class="glyphicon glyphicon-remove"></i>Clear All</button></div>
</div>
<!-- ngRepeat: file in files -->
<div class="panel-body ng-hide" ng-show="progressBar">
<div>
<div class="progress-striped active progress ng-isolate-scope" value="uploadProgress" type="info">
<div class="progress-bar progress-bar-info" ng-class="type && 'progress-bar-' + type" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" ng-style="{width: (percent < 100 ? percent : 100) + '%'}" aria-valuetext="%" aria-labelledby="progressbar" ng-transclude="" style="width: 100%;"></div>
</div>
</div>
<div>
<button class="btn btn-primary" ng-click="progressBar = false">Continue</button></div>
</div>
</div>
</div>
</div>
I usually try By.className(className), By.id(id), By.name(name), By.linkText(linkText) before By.xpath, but even here as a last resort I'm not able to click on an "Add" files button after I log onto a site.
Try to avoid of using xpath. There are very few situations, when there is no possibility to use another selectors, like css selectors or classes. Also there is not enough HTML code to find out why your xpath doesn't work. Please add more info.
PS try this:
driver.findElement(By.xpath("//input[#id='inputFile']/span[#class='btn btn-primary']")).click();
I have a Jsp page in which there is a table that is populated from the database. I want to Implement a search based on the fields on this table please tell me how to do this.
My Jsp page is given below
<html>
<jsp:include page="Headj.jsp"/>
<body>
<script type="text/javascript">
function deletedata(prdid) {
var url = "Con_Product?action=delete&prdid=" + prdid;
window.location = url;
}
function editdata(prdid) {
var url = "Editprd.jsp?prdid=" + prdid + "&type=p&pg=prd";
window.location = url;
}
</script>
<div id="maindiv" class="container-fluid">
<jsp:include page="Headerj.jsp"/>
<div id="menu_content">
<jsp:include page="Menuj.jsp"/>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Product</h1>
<ul class="nav nav-tabs" role="tablist">
<li class="active">Display</li>
<li>Add New</li>
<!--<li><a href="#">Messages<a><li>-->
</ul>
<br>
<div class="panel panel-default">
<div class="panel-body" style="padding: 3px;">
<strong style="font-size: 20px; font-family: sans-serif; color: #3b6282; margin-left: 10px;">Display Products</strong>
<form class="navbar-right form-inline">
<div class="form-group">
<select class="form-control">
<option>Choose Option</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search...">
</div>
</div>
<button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-search"></button>
</form>
</div>
</div>
<div class="alert-success"><p>${param.message}</p></div>
<%
general gen = new general();
Op_Product opp = new Op_Product();
Op_Category opc = new Op_Category();
ResultSet rs = opp.getallproducts();
%>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<thead>
<th><strong>Sl. No.</strong></th>
<th><strong>Product</strong></th>
<th><strong>Category</strong></th>
<th><strong>Sub-Category</strong></th>
<th><strong>Creator</strong></th>
<th><strong>Operations</strong></th>
</thead>
<%
int no = 1;
while (rs.next()) {
%>
<tr>
<td><%= no%></td>
<td><%= rs.getString("Prd_nme")%></td>
<td><%= opc.getOnecategoryname(rs.getString("Prd_catid"))%></td>
<td><%= opc.getOnesubcategoryname(rs.getString("Prd_scatid"))%></td>
<td><%= gen.getCreator(rs.getString("Prd_usr"))%></td>
<td>
<button type="button" class="btn btn-default btn-sm btn-danger" onclick="deletedata('<%= rs.getString("Prd_id")%>');">
<span class="glyphicon glyphicon-trash"></span>
</button>
<button type="button" class="btn btn-default btn-sm btn-primary" onclick="editdata('<%= rs.getString("Prd_id")%>')">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
<button class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
<%
no++;
}
%>
<tfoot>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<div>
<jsp:include page="Footerj.jsp"/>
</div>
<!-- Modal -->
<div class="modal " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
ScreenShot of my page is given below.
The section the is circled is the search option the drop down list will have the field names and the search values will be entered in the text box.
To implement this you have 2 options:
The nice and slightly more complicated option
You can make an Ajax call using a JavaScript framework like jQuery to a servlet that will make the database query and respond to the ajax call via a Json object. This method will allow you to present the data without updating the page and the user experience will be better.
The easier option
You can submit that form to a servlet that makes the query and exposes the data as request attributes that are then presented in a jsp using jstl
Either way I recommend you to avoid scripting on the jsp files ( no <% %>) and instead use jstl and ${} to expose information. And do all the object creation and other login on servlets. That will make your code a lot easier and maintainable.
I did this operation using Jquery, this way there is no page reload and since it is in the client side it will be more faster. A sample of what i have done is given in
http://jsfiddle.net/9hGym/35/
The JQuery code is given below
$("#search").keyup(function(){
_this = this;
// Show only matching TR, hide rest of them
$.each($("#table tbody").find("tr"), function() {
console.log($(this).text());
var s = $("#sss").val(); if($(this).find('td').eq(s).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)
$(this).hide();
else
$(this).show();
});
});