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>
Related
I have a basic search bar with about 25 options to be searched, what I need to do is hide 2 of those options from the user. Initially, the modal with the options loads like this:
But if i write and delete something in the input this is what happens:
I need to hide the repeated option CÓDIGO and the blank one from the user, (just like the first image) but I'm having trouble doing so...
Here is the JQuery code used to perform the search:
$('#searchColumns').on('keyup', function () {
var search = $(this).val().toLowerCase();
$('#selectColumnsTable tr').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(search) > -1);
});
});
And just in case, the code for the modal: (using Alpine.js v2.8.2 and laravel-livewire)
<div x-data="{
data:columns,
selectedColumns: ['sap_id'],
}"
wire:ignore class="modal fade" id="selectColumnsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Selecionar Colunas</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i aria-hidden="true" class="ki ki-close"></i>
</button>
</div>
<p class="mx-10 mt-4">Selecione até 9 colunas para exibir...</p>
<div class="text-center mx-10">
<div class="input-icon">
<input type="text" class="form-control" placeholder="Nome da coluna..." id="searchColumns">
<span>
<i class="flaticon2-search-1 text-muted"></i>
</span>
</div>
</div>
<div class="modal-body">
<div class="mt-6 text-center">
<table id="selectColumnsTable" class="table table-hover gy-5">
<thead>
<th class="text-left">
Coluna
</th>
<th class="text-left">
<i class="la la-eye"></i>
</th>
<thead>
<tbody>
<tr>
<td class="text-left ml-4">
<span x-html="columns[1].title"></span>
</td>
<td class="text-left">
<input
x-model="selectedColumns"
class="sapId"
id="sapId"
type="checkbox"
value="sap_id"
disabled
checked
>
</td>
</tr>
<template x-for="(column, index) in data" :key="index">
<tr x-show="column.field != 'id' && column.field != 'sap_id' &&column.title != '' && column.title != 'CÓDIGO'">
<td class="text-left ml-4">
<span x-html="column.title"></span>
</td>
<td class="text-left">
<input
x-model="selectedColumns"
id="selectColumns"
class="selectColumns"
type="checkbox"
:value=column.field
>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
<div class="modal-footer d-flex justify-content-around">
<button #click="displaySelected(selectedColumns)" type="button" class="btn btn-primary col-5" data-target="click">Exibir selecionadas</button>
<button type="button" class="btn btn-danger col-5" data-dismiss="modal">Cancelar</button>
</div>
</div>
</div>
</div>
I don't know livewire or alpine, but it seems that jquery is showing what alpine hid.
See if this works for you, I tried to make a similar html structure, with the 2 lines starting hidden, and skip these 2 lines when searching the others:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<style>
.hidden {
display: none;
}
</style>
</head>
<input type="text" id="searchColumns" />
<table id="selectColumnsTable">
<tr>
<td><span>CÓDIGO</span></td>
<td><input type="checkbox" checked="true" disabled /></td>
</tr>
<tr class="hidden">
<td><span>CÓDIGO</span></td>
<td><input type="checkbox" /></td>
</tr>
<tr class="hidden">
<td><span></span></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><span>RAZÃO SOCIAL</span></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><span>INT VISITA</span></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><span>INT COMPRA</span></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><span>ATENDIMENTO</span></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><span>SAC</span></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><span>INT COMPRA</span></td>
<td><input type="checkbox" /></td>
</tr>
</table>
<script>
$("#searchColumns").on("keyup", function () {
var search = $(this).val().toLowerCase();
$("#selectColumnsTable tr").filter(function () {
let linhaCodigo = $(this).find("span").html() === "CÓDIGO";
let linhaId = $(this).find("span").html() === "";
if (!linhaCodigo && !linhaId)
$(this).toggle($(this).text().toLowerCase().indexOf(search) > -1);
});
});
</script>
</html>
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>
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?
I'm simply trying to open a modal after a user submits a form that will contain either a "Success" message, or an error message. No matter what I try this modal will not open. Here's the code:
<div class="container-fluid" align="center">
<c:catch var="exception">${messages}</c:catch>
<c:if test="${not empty exception}">
<div style="text-align: left; color: orange">
<c:forEach var="msg" items="${messages}">
MESSAGE: ${msg}<br />
</c:forEach>
</div>
</c:if>
<div>
<form action="/save">
<table class="viewtable">
<tbody>
<tr>
<td class="labelfield">lab_id:</td>
<td>${lab.lab_id}<input name="lab_id" type="hidden"
value="${lab.lab_id}" /></td>
</tr>
<tr>
<td class="labelfield">display_name:</td>
<td><input name="display_name" type="text"
value="${lab.displayName}"></input></td>
</tr>
<tr>
<td class="labelfield">lab_type_id:</td>
<td><input name="lab_type_id" type="text"
value="${lab.lab_type_id}"></input></td>
</tr>
<tr>
<td class="labelfield">aventail_profile:</td>
<td><input name="profile" type="text"
value="${lab.profile}"></input></td>
</tr>
<tr>
<td class="labelfield">status:</td>
<td><input name="status" type="text" value="${lab.status}"></input></td>
</tr>
<tr>
<td class="labelfield">notes:</td>
<td><input name="notes" type="text" value="${lab.notes}"></input></td>
</tr>
</tbody>
</table>
<button type="submit" id="formSubmit" class="btn btn-primary" data-toggle="modal" data-target="#editLabModal" >Save Changes</button>
</form>
<div class="modal fade" id="editLabModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<c:catch var="exception">${messages}</c:catch>
<c:if test="${not empty exception}">
<div style="text-align: left; color: orange">
<c:forEach var="msg" items="${messages}">
MESSAGE: ${msg}<br />
</c:forEach>
</div>
</c:if>
</div>
<div class="modal-footer">
<button type="button" class="close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
If anyone has any suggestions it would be greatly appreciated!
You can't open a modal after a full page post, you will need to submit your form via Ajax and after the response show something
an example here jQuery AJAX submit form
I am trying to understand why does my modal footer starts at the same place where modal body starts.
How can i make it start after modal body ends.
basically i am trying to understand why are the bottons in the footer, save and cancel not lined same as modal body
<div class="modal fade " id="CustomizeModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<label class="modal-title" id="myModalLabel2">CUSTOMIZE ATTRIBUTES TO DISPLAY</label>
</div>
<div class="modal-body col-xs-12">
<div class="row">
<form role="form" >
<div style="margin-left: 10px; margin-right: 10px">
<table class="table table-striped">
<tr>
<td> <input type="checkbox"> </td>
<td> Search Attributes </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Event IDs </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Event Occurrence Location & File Source </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Event Catagory </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Event Type and Aggregation </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> DSMT Information </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Create By, Updated By and Event Description </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Data Quality Issues and Severity </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Event Channel </td>
</tr>
</table>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<div class="col-xs-12" >
<div class="row">
<div class="col-sm-4 pull-right">
<button class="btn btn-default btn-sm btn-block ebtn" data-dismiss="modal">Cancel</button>
</div>
<div class="col-sm-4 pull-right">
<button class="btn btn-block btn-sm btn-default ebtn" ng-click="submit()">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If you just want to display everything in the modal straight up and down, adding rows/columns isn't necessary.
Try using this:
<div class="modal fade " id="CustomizeModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<label class="modal-title" id="myModalLabel2">CUSTOMIZE ATTRIBUTES TO DISPLAY</label>
</div>
<div class="modal-body">
<form role="form" >
<div style="margin-left: 10px; margin-right: 10px">
<table class="table table-striped">
<tr>
<td> <input type="checkbox"> </td>
<td> Search Attributes </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Event IDs </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Event Occurrence Location & File Source </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Event Catagory </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Event Type and Aggregation </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> DSMT Information </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Create By, Updated By and Event Description </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Data Quality Issues and Severity </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Event Channel </td>
</tr>
</table>
</div>
</form>
</div>
<div class="modal-footer">
<div class="pull-right">
<button class="btn btn-default btn-sm btn-block ebtn" data-dismiss="modal">Cancel</button>
</div>
<div class="pull-right">
<button class="btn btn-block btn-sm btn-default ebtn" ng-click="submit()">Save</button>
</div>
</div>
</div>
</div>
</div>[![enter link description here][1]][1]
It is because col-xs-12 is on the body of the modal which makes the body float left.
remove col-xs-12 and the footer will appear underneath as you are expecting.
Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog. - modal-lg and modal-sm
Large
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
Small
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>