my Jsp:
Below is my JSP and I am trying to get list of my customer and using a foreach tag () and with in the loop(foreach tag) I have list of Action in a drop down button for each row, to be able to edit and delete. The problem is that my code is not showing the Action button that has the drop down in my browser.
The issue is showing when i add the modal tag below. if the modal tag is removed then it works. But i want to be able to add a customer with a modal dialog. How could that be possible. Could someone help. Thanks.
issue Bigin
Edit Customer Detail issue End
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8"">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="resources/jquery/jquery-3.2.1.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<title></title>
<link rel="stylesheet" href="<c:url value="/resources/css/style.css"/>">
<script type="text/javascript"
src="<c:url value="/resources/script/script.js"/>"></script>
</head>
<body>
<div class="navbar-inner">
<img src="<c:url value="/resources/img/StNavBar.PNG"/>" />
</div>
<div class="content">
<div class="headers">
<div class="bottom1nav" id="myBottomnav">
<h4></h4>
</div>
<div class="utilityHeader" id="myUtilityHeader">
<h1>Utility Certificate Management</h1>
<div class="utilitySubHeader" id="mySubUtility">
<h2></h2>
<a href="#" class="createCustomer" data-toggle="modal"
data-target="#createCustomerModal">Create New Customer</a>
<section class="container">
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body">
<table class="table table-condensed table-hover outer-table table-sort">
<thead >
<tr>
<th>No.</th>
<th>Customer Name</th>
<th>Contact Name</th>
<th>Street</th>
<th>State</th>
<th>Zip-Code</th>
<th>Country</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
<c:forEach var="customer" items="${customers}">
<tr>
<td><c:out value="${status.count}" /></td>
<td><a title="Go to the Company Certificate Detail">${customer.customerName}</a></td>
<td>${customer.contactName}</td>
<td>${customer.customerName}</td>
<td>${customer.address.street}</td>
<td>${customer.address.state}</td>
<td>${customer.address.zipCode}</td>
<td>${customer.address.country}</td>
<td>${customer.email}</td>
<!--below line of code till end of tag </td> not showing on browser -->
<td>
<div class="btn-group">
<button type="button"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a data-toggle="modal"
data-target="#editCustomerModal">Edit Customer Detail</a></li>
<li><a onclick="alert('To be implemented.');">Delete Customer</a></li>
</ul>
</div>
</td>
</tr>
</c:forEach>
<tbody>
</table>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<!-- All modal dialog goes below this line -->
<!--create customer modal -->
<div id="createCustomerModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Create New Customer
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table class="form-table">
<tbody>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="pool-name">Customer Name:</label></td>
<td><input type="text" id="name" title="Company Name" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Contact Name:</label></td>
<td><input type="text" id="actName" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="description">Street:</label></td>
<td><input type="text" id="street" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Zip-Code:</label></td>
<td><input type="text" id="zip" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Country:</label></td>
<td><input type="text" id="country" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Email:</label></td>
<td><input type="text" id="email" path="#"
class="form-control" /></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<div>
<input type="submit" id="createNewCustomer" value="Create"
class="btn btn-default" onClick="alert('To be Implemented');" />
<button type="button" class="btn btn-default" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
</div>
<!--Edit Customer Modal -->
<div id="editCustomerModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Create New Customer
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table class="form-table">
<tbody>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="pool-name">Customer Name:</label></td>
<td><input type="text" id="name" title="Company Name" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Contact Name:</label></td>
<td><input type="text" id="contact" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="description">Street:</label></td>
<td><input type="text" id="street" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Zip-Code:</label></td>
<td><input type="text" id="zip" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Country:</label></td>
<td><input type="text" id="country" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Email:</label></td>
<td><input type="text" id="email" path="#"
class="form-control" /></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<div>
<input type="submit" id="createNewCustomer" value="Save"
class="btn btn-default" onClick="alert('To be Implemented');" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have test you code with below change,It Working fine.
<c:forEach var="customer" begin="1" end="5">
<tr>
<td><c:out value="${status.count}" /></td>
<td><a title="Go to the Company Certificate Detail">1</a></td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<!--below line of code till end of tag </td> not showing on browser -->
<td>
<div class="btn-group">
<button type="button"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a data-toggle="modal"
data-target="#editCustomerModal">Edit Customer Detail</a></li>
<li><a onclick="alert('To be implemented.');">Delete Customer</a></li>
</ul>
</div>
</td>
</tr>
</c:forEach>
Please check that is there any error in browser console?
Related
I'm using the bootstrap4 framework for my web application. Here's my requirement
I have a table generated with some values & each row has a edit button at the end of the row (last column).
when edit button is clicked, it should pop up a form with existing data in the row. So that user can change only the refuired fields. I know this should be done using javascript to fill the text boxes in the current form. But with bootstrap4 framework i dont know the correct way to do this .
This is my table
<div class="table-responsive">
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">Channel No</th>
<th scope="col">Channel Name</th>
<th scope="col">Descrption</th>
<th scope="col">Recording Status</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>TV 1</td>
<td>Otto</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>TV 2</td>
<td>Thornton</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">TV 3</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">4</th>
<td colspan="2">Derana</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">5</th>
<td colspan="2">TV 5</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">6</th>
<td colspan="2">TV 6</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">7</th>
<td colspan="2">TV 7</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
</tbody>
</table>
This is the edit button
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm" >
Edit
</button>
This is my POP form(modal) for the edit button
<div id="ModalLoginForm" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form role="form" method="POST" action="">
<input type="hidden" name="_token" value="">
<div class="form-group">
<label class="control-label">Channel No</label>
<div>
<input type="number" class="form-control input-lg" name="channelid" value="">
</div>
</div>
<div class="form-group">
<label class="control-label">Channel Name</label>
<div>
<input type="text" class="form-control input-lg" name="channel">
</div>
</div>
<div class="form-group">
<label class="control-label">Description</label>
<div>
<input type="text" class="form-control input-lg" name="description">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Channel Recordable
</label>
</div>
</div>
<div class="form-group">
<div>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-success">Update</button>
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Here is a fully working code and more dynamic approach to what you want. You can use native boostrap jQuery function to show your modal on edit click button in your row.
You can watch which button triggered the modal and from their you can grab all the data using jQuery function like closest() and find()
Once you have the respective row data you can then apply it to your form input which are in the modal
In addition, i have also a functionality where recording status is Y then the checkbox in the modal will automatically be checked and if its N then it will be unchecked.
Live Working Demo:
$("#ModalLoginForm").on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) //Button that triggered the modal
//get data
var cId = button.closest('tr').find('th').text() //1st th
var cName = button.closest('tr').find('th').next().text() //2nd th
var cDesc = button.closest('tr').find('th').next().next().text() //3 th
var isRecord = button.closest('tr').find('th').next().next().next().text() //4 th
//Apply data
$('[name="channelid"]').val(cId);
$('[name="channel"]').val(cName);
$('[name="description"]').val(cDesc);
//check the checkbox
if (isRecord == 'Y') {
$('[name="remember"]').prop('checked', true); //check the checbox
} else {
$('[name="remember"]').prop('checked', false);
}
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">Channel No</th>
<th scope="col">Channel Name</th>
<th scope="col">Descrption</th>
<th scope="col">Recording Status</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>TV 1</td>
<td>Otto</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>TV 2</td>
<td>Thornton</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">3</th>
<td>TV 3</td>
<td>dfdf</td>
<td>N</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">4</th>
<td>TV 4</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">5</th>
<td>TV 5</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">6</th>
<td>TV 6</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">7</th>
<td>TV 7</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
</tbody>
</table>
<div id="ModalLoginForm" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form role="form" method="POST" action="">
<input type="hidden" name="_token" value="">
<div class="form-group">
<label class="control-label">Channel No</label>
<div>
<input type="number" class="form-control input-lg" name="channelid" value="">
</div>
</div>
<div class="form-group">
<label class="control-label">Channel Name</label>
<div>
<input type="text" class="form-control input-lg" name="channel">
</div>
</div>
<div class="form-group">
<label class="control-label">Description</label>
<div>
<input type="text" class="form-control input-lg" name="description">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Channel Recordable
</label>
</div>
</div>
<div class="form-group">
<div>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-success">Update</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
$(".table .btn-info").on("click", function(){ //now it aply for every .btn-info in every .table... so its better to make a new class or id for your table
var thContentFromThisRow = $(this).closest("tr").find("th").html(); // copy data from the TH in the same ROW as your clicked button
$('[name="channelid"]').val(thContentFromThisRow); //here you select your desired input to fill by name and then use .val (short for value) and you insert your data...
});
This is a short way of collecting one inner html from your th inside row of your button. Just to show how it worsk. Anyway you should go to w3c or another basics page and learn the basics of js/jquery. This code I've written is in jquery since you have bootstrap.
hi m trying to append a form which is in bootstrap (using jQuery append funciton),,, it has to open it once but is opening it twice and the button which is at the end of for shows one time and hide other time i just wants to show the form once by clicking once, and when i click again then it display again:" this is the current output i just wants that it show only once https://ibb.co/CtLrBzr "
html code:
<div class="col-md-4 create-task-btn1">
<span href="" class="btn btn-info btn-lg dashboard-icon append">
<i class="fa fa-plus fa-1x"></i>
<br>
Assign Task
</span>
</div>
<div id="table-bordered">
</div>
$(document).ready(function() {
$('.append').click(function() {
$('#table-bordered').append(`<div class="container" style="margin-top:50px;">
<div class="row">
<form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate">
<table class="table table-bordered" style="width: 950px;">
<tbody>
<tr>
<th scope="row" style="font-size: 14px;">Task<span class="text-danger">*</span></th>
<td colspan="3">
<input type="text" class="form-control" value="" name="subject"></td>
<td rowspan="3">
<a data-id="" data-toggle="modal" data-original-title="" class="enable-tooltip btn" style="color: red; font-size: 20px;"><i class="fa fa-trash-o"></i></a>
</td>
</tr>
<tr>
<th scope="row" style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
<th style="font-size: 14px;">Due Date<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>`);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4 create-task-btn1">
<span href="" class="btn btn-info btn-lg dashboard-icon append">
Assign Task
</span>
</div>
$(".append").on("click", function(){
$('#table-bordered').html();
});
Use your form inside the jquery html function. it will help you.
Use jQuery's one :
$('.append').one("click" , function(){ ... }
$('.append').one("click", function() {
$('#table-bordered').append(`<div class="container" style="margin-top:50px;">
<div class="row">
<form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate">
<table class="table table-bordered" style="width: 950px;">
<tbody>
<tr>
<th scope="row" style="font-size: 14px;">Task<span class="text-danger">*</span></th>
<td colspan="3">
<input type="text" class="form-control" value="" name="subject"></td>
<td rowspan="3">
<a data-id="" data-toggle="modal" data-original-title="" class="enable-tooltip btn" style="color: red; font-size: 20px;"><i class="fa fa-trash-o"></i></a>
</td>
</tr>
<tr>
<th scope="row" style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
<th style="font-size: 14px;">Due Date<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4 create-task-btn1">
<span href="" class="btn btn-info btn-lg dashboard-icon append">
<i class="fa fa-plus fa-1x"></i>
<br>
Assign Task
</span>
</div>
<div id="table-bordered">
</div>
I just test your code and it's working fine..
Maybe you write the script before render the html? (mean in the head of the html, without defer)?
Make sure you add the script in the end of the body, or add the defer attribute there. otherwise when the script called, the button where you trying add a listener to is not exist in the moment when the script run
$(document).ready(function () {
$('.append').click(function () {
$('#table-bordered').append(`<div class="container" style="margin-top:50px;">
<div class="row">
<form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate">
<table class="table table-bordered" style="width: 950px;">
<tbody>
<tr>
<th scope="row" style="font-size: 14px;">Task<span class="text-danger">*</span></th>
<td colspan="3">
<input type="text" class="form-control" value="" name="subject"></td>
<td rowspan="3">
<a data-id="" data-toggle="modal" data-original-title="" class="enable-tooltip btn" style="color: red; font-size: 20px;"><i class="fa fa-trash-o"></i></a>
</td>
</tr>
<tr>
<th scope="row" style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
<th style="font-size: 14px;">Due Date<span class="text-danger">*</span></th>
<td><input type="text" class="form-control" value="" name="subject"></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>`);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4 create-task-btn1">
<span href="" class="btn btn-info btn-lg dashboard-icon append">
<i class="fa fa-plus fa-1x"></i>
<br/>
Assign Task
</span>
</div>
<div id="table-bordered"></div>
New to ajax and bootstrap modal, I am trying to implement an edit functionality with bootstrap modal. I need the content in DB to be loaded to the modal when user click edit link.I am doing this with ajax and below is how i implemented it however, i am getting the following error on browser:
-script.js:62 Uncaught TypeError: Cannot read property 'on' of undefined
at script.js:62 (anonymous) # script.js:62 (line where my ajax function starts)
Could someone please help. Thanks.
code Snippet:
my JSP: (the edit link to load the modal)
<c:forEach var="customer" items="${customers}" varStatus="status">
<tr>
<td><c:out value="${status.count}" /></td>
<td><a title="Go to the Company Certificate Detail">${customer.customerName}</a></td>
<td>${customer.contactName}</td>
<td>${customer.street}</td>
<td>${customer.state}</td>
<td>${customer.zipCode}</td>
<td>${customer.country}</td>
<td>${customer.email}</td>
<td>
<div class="btn-group">
<button type="button"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a data-toggle="modal" data-target="#editCustomerModal" data-customer-id="${customer.id}">Edit Customer Detail</a></li>
<li><a data-toggle="modal" data-target="#deleteCustomerModal_${customer.id}" >Delete Customer</a></li>
</ul>
</div>
</td>
</tr>
<!--Delete Customer Modal -->
</c:forEach>
My Edit Modal:(outside the forEach tag)
<!--Edit Customer Modal -->
<div id="createCustomerModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Edit Customer
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table class="form-table">
<tbody>
<tr>
<td><input type="hidden" id="customerId" path="#" class="form-control" /></td></tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="pool-name">Customer Name:</label></td>
<td><input type="text" id="customerName" title="Company Name" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Contact Name:</label></td>
<td><input type="text" id="contactName" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="description">Street:</label></td>
<td><input type="text" id="street" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="description">State:</label></td>
<td><input type="text" id="state" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Zip-Code:</label></td>
<td><input type="text" id="zipCode" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Country:</label></td>
<td><input type="text" id="country" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Email:</label></td>
<td><input type="text" id="email" path="#"
class="form-control" /></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<div>
<input type="submit" id="createNewCustomer" value="Save"
class="btn btn-default" onClick="alert('To be Implemented');" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
My script.js:
$(document).on('shown.bs.modal','#editCustomerModal', function () {
var customerId = this.dataset.customerId;
var id = $('#customerId').val(customerId);
//var customerId= $('#customerId').val();
var customerName= $('#customerName').val();
var contactName= $('#contactName').val();
var email= $('#email').val();
var street= $('#street').val();
var zipCode= $('#zipCode').val();
var state= $('#state').val();
var country= $('#country').val();
$.ajax({
type: "post",
url: "/UtilityCertificateWebApplication/edit?id=" + customerId,
cache: false,
contentType:'application/json',
dataType: 'json',
data:"customerName="+ customerName + "&contactName=" + contactName + "&street=" + street +
"&state=" + state + "&zipCode=" + zipCode + "&country=" + country +"&email=" + email ,
success: function(response){
alert("inside edit modal");
var obj = JSON.parse(response);
$('#customerName').val(obj.userName);
$('#contactName').val(obj.userName);
$('#email').val(obj.userName);
$('#street').val(obj.userName);
$('#zipCode').val(obj.userName);
$('#state').val(obj.userName);
$('#country').val(obj.userName);
},
error: function(){
alert('Error while edit request..');
}
});
});
Your issue is in this line:
$("#editCustomerModal_")+$('#customerId').val().on("show.bs.modal", function() {
Change that line to:
$("[id^=editCustomerModal_").on("show.bs.modal", function() {
Now, your issue is getting the source customerid? For this you can write inside your modal show event:
var customerId = this.id.replace('editCustomerModal_', '');
In any case, I'd suggest to use only one modal. This means you need to change this line:
<li><a data-toggle="modal" data-target="#editCustomerModal_${customer.id}">Edit Customer Detail</a></li>
to:
<li><a data-toggle="modal" data-target="#editCustomerModal" data-customer-id="${customer.id}">Edit Customer Detail</a></li>
Now, your issue is: how to get the customer id when the modal shows:
add a listener on anchor click
get the customer id as: this.dataset.customerId
$('[data-target="#editCustomerModal"]').on('click', function(e) {
var customerId = this.dataset.customerId;
$('#customerId').val(customerId);
})
$("#editCustomerModal").on("show.bs.modal", function (e) {
var customerId = $('#customerId').val();
console.log(customerId);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<ul>
<li><a data-toggle="modal" data-customer-id="222" data-target="#editCustomerModal">Edit Customer Detail: 222</a></li>
<li><a data-toggle="modal" data-customer-id="333" data-target="#editCustomerModal">Edit Customer Detail: 333</a></li>
</ul>
<!-- Modal -->
<div id="editCustomerModal" class="modal fade" type="hidden">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Edit Customer
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table class="form-table">
<tbody>
<tr>
<td><input type="hidden" id="customerId" path="#" class="form-control" /></td></tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="pool-name">Customer Name:</label></td>
<td><input type="text" id="customerName" title="Company Name" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Contact Name:</label></td>
<td><input type="text" id="contactName" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="description">Street:</label></td>
<td><input type="text" id="street" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="description">State:</label></td>
<td><input type="text" id="state" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Zip-Code:</label></td>
<td><input type="text" id="zipCode" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Country:</label></td>
<td><input type="text" id="country" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Email:</label></td>
<td><input type="text" id="email" path="#"
class="form-control" /></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<div>
<input type="submit" id="createNewCustomer" value="Save"
class="btn btn-default" onClick="alert('To be Implemented');" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
I have a jsp where i see the result saved at Data Base in a table on the browser with options to edit, delete each row. I want to be able to click the edit link, fetch the data for that particular customer from data base with spring MVC and Hibernate and show it on the edit modal so that user can see the data and know which to edit.
Below is code Snippet, the line Edit Customer Detail is the link to edit the customer. Am not sure from here where to go, wheather to call an ajax function and how would the ajax function look like? and how will the ajax call the modal?
I saw this solution(Spring MVC Populate Modal Form) but it doesnt show how the modal will be called to populate the values from ajax. Or is there any other way? Could anyone please help, thanks.
<c:forEach var="customer" items="${customers}" varStatus="status">
<tr>
<td><c:out value="${status.count}" /></td>
<td><a title="Go to the Company Certificate Detail">${customer.customerName}</a></td>
<td>${customer.contactName}</td>
<td>${customer.street}</td>
<td>${customer.state}</td>
<td>${customer.zipCode}</td>
<td>${customer.country}</td>
<td>${customer.email}</td>
<!--below line of code till end of tag </td> not showing on browser -->
<td>
<div class="btn-group">
<button type="button"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a data-toggle="modal"
data-target="#editCustomerModal">Edit Customer Detail</a></li>
<li><a data-toggle="modal" data-target="#deleteCustomerModal_${customer.id}" >Delete Customer</a></li>
</ul>
</div>
</td>
</tr>
<!--Delete Customer Modal -->
<div id="deleteCustomerModal_${customer.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 Customer? </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>
My Modal to edit:
<!--Edit Customer Modal -->
<div id="editCustomerModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Create New Customer
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table class="form-table">
<tbody>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="pool-name">Customer Name:</label></td>
<td><input type="text" id="customerName" title="Company Name" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Contact Name:</label></td>
<td><input type="text" id="contactName" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="description">Street:</label></td>
<td><input type="text" id="street" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="description">State:</label></td>
<td><input type="text" id="state" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Zip-Code:</label></td>
<td><input type="text" id="zipCode" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Country:</label></td>
<td><input type="text" id="country" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Email:</label></td>
<td><input type="text" id="email" path="#"
class="form-control" /></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<div>
<input type="submit" id="createNewCustomer" value="Save"
class="btn btn-default" onClick="alert('To be Implemented');" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Try this, put a hidden value for the customer Id in your edit model,
<input type="hidden" id="customerId" path="customerId" class="form-control" />
Change your submit button into ordinary button for save the customer.
<div class="modal-footer">
<div>
<button type="button" class="btn btn-default updateCustomer" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
You can play with js, specially into the ajax,
<script type="text/javascript">
function ajaxCall(customerId) {
$.ajax({
type: "POST",
url: "/clause/getUpdate?customerId="+customerId ,
success: function(result) {
//populate customer list page again..
}
}
});
$('.updateCustomer').on('click', '.accountsEmployees', function () {
customerId=$("#customerId").val();
ajaxCall(customerId);
}
</script>
how to make current table row as highlighted if I change any input text or image of that particular table row using Jquery. As code given below which contains two rows, so out of which how to make any of the row as highlighted if I modify input text or change image by keypress event or any other solutions please let me know
<table>
<tbody>
<tr>
<td>1</td>
<td>
<input type="text" class="form-control">
</td>
<td>
<textarea class="form-control"></textarea>
</td>
<td>
<div class="browse-chg-img">
<img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
<div class="overlay">
<div class="text" style="font-size: 10px;">Change Image</div>
</div>
</div>
</td>
<td>
<button type="button" class="btn btn-primary">Save</button>
</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="text" class="form-control">
</td>
<td>
<textarea class="form-control"></textarea>
</td>
<td>
<div class="browse-chg-img">
<img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
<div class="overlay">
<div class="text" style="font-size: 10px;">Change Image</div>
</div>
</div>
</td>
<td>
<button type="button" class="btn btn-primary">Save</button>
</td>
</tr>
</tbody>
</table>
Try this,
$(document).ready(function() {
$('td').on('keydown', function(ev) {
$('tr').css('background-color','');
$(this).closest('tr').css('background-color','red');
});
});
jsFiddle for the same
https://jsfiddle.net/0k8Lu50v/
Try giving styles to tr,
<style>
tr:focus { background: yellow; }
</style>
<table>
<tbody>
<tr>
<td>1</td>
<td><input type="text" class="form-control" ></td>
<td><textarea class="form-control"></textarea></td>
<td>
<div class="browse-chg-img">
<img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
<div class="overlay">
<div class="text" style="font-size: 10px;">Change Image</div>
</div>
</div>
</td>
<td>
<button type="button" class="btn btn-primary">Save</button>
</td>
</tr>
<tr>
<td>2</td>
<td><input type="text" class="form-control" ></td>
<td><textarea class="form-control"></textarea></td>
<td>
<div class="browse-chg-img">
<img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
<div class="overlay">
<div class="text" style="font-size: 10px;">Change Image</div>
</div>
</div>
</td>
<td>
<button type="button" class="btn btn-primary">Save</button>
</td>
</tr>
</tbody>
</table>