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>
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>
I have problems with Jquery and Bootstrap v3.3.7.
When I try to use .on ('show.bs.modal', function () on firefox and safari browser it does not work(work in chrome browser).
I can't get the value "date-id".
What should I do.
https://fiddle.jshell.net/05s5vzc7/11/
$(function(){
$('#bookModal').modal({
keyboard: true,
backdrop: "static",
show:false,
}).on('show.bs.modal', function(){
var getIdFromRow = $(event.target).data('id');
$(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow + '</b>'))
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-hover table-striped table-bordered">
<tr>
<td colspan="32" style="text-align: center;"> 2018 March</td>
</tr>
<tr>
<td> Date </td>
<td> Barber </td>
<td> 08.00-08.30 </td>
<td> 08.30-09.00 </td>
</tr>
<tr>
<td> 1st Sat. </td>
<td> Jack </td>
<td data-toggle="modal" data-id="2018-03-20_08:00_08:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_08:30_09:00_barber_id" data-target="#bookModal"></td>
</tr>
</table>
<div id="bookModal" class="modal fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true">
<div class="modal-dialog" 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>
</div>
<div id="orderDetails" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You need to bind event to the actual modal using code:-
.on('show.bs.modal', function(event){// pass event as a parameter
var targetTd = $(event.relatedTarget); // get td which triggered the modal
var getIdFromRow = $(targetTd).data('id');// get the attribute
$(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow + '</b>'))
});
Working snippet:-
$(function(){
$('#bookModal').modal({
keyboard: true,
backdrop: "static",
show:false,
}).on('show.bs.modal', function(event){
var targetTd = $(event.relatedTarget);
var getIdFromRow = $(targetTd).data('id');
$(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow + '</b>'))
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-hover table-striped table-bordered">
<tr>
<td colspan="32" style="text-align: center;"> 2018 March</td>
</tr>
<tr>
<td> Date </td>
<td> Barber </td>
<td> 08.00-08.30 </td>
<td> 08.30-09.00 </td>
<td> 09.00-09.30 </td>
<td> 09.30-10.00 </td>
<td> 10.00-10.30 </td>
<td> 10.30-11.00 </td>
<td> 11.00-11.30 </td>
<td> 11.30-12.00 </td>
<td> 12.00-12.30 </td>
<td> 12.30-13.00 </td>
<td> 13.00-13.30 </td>
<td> 13.30-14.00 </td>
<td> 14.00-14.30 </td>
<td> 14.30-15.00 </td>
<td> 15.00-15.30 </td>
<td> 15.30-16.00 </td>
<td> 16.00-16.30 </td>
<td> 16.30-17.00 </td>
<td> 17.00-17.30 </td>
<td> 17.30-18.00 </td>
<td> 18.00-18.30 </td>
<td> 18.30-19.00 </td>
<td> 19.00-19.30 </td>
<td> 19.30-20.00 </td>
<td> 20.00-20.30 </td>
<td> 20.30-21.00 </td>
<td> 21.00-21.30 </td>
<td> 21.30-22.00 </td>
<td> 22.00-22.30 </td>
<td> 22.30-23.00 </td>
</tr>
<tr>
<td> 1st Sat. </td>
<td> Jack </td>
<td data-toggle="modal" data-id="2018-03-20_08:00_08:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_08:30_09:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_09:00_09:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_09:30_10:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_10:00_10:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_10:30_11:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_11:00_11:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_11:30_12:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_12:00_12:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_12:30_13:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_13:00_13:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_13:30_14:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_14:00_14:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_14:30_15:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_15:00_15:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_15:30_16:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_16:00_16:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_16:30_17:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_17:00_17:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_17:30_18:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_18:00_18:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_18:30_19:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_19:00_19:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_19:30_20:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_20:00_20:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_20:30_21:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_21:00_21:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_21:30_22:00_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_22:00_22:30_barber_id" data-target="#bookModal"></td>
<td data-toggle="modal" data-id="2018-03-20_22:30_23:00_barber_id" data-target="#bookModal"></td>
</tr>
</table>
<div id="bookModal" class="modal fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true">
<div class="modal-dialog" 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>
</div>
<div id="orderDetails" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Working fiddle link:- https://fiddle.jshell.net/smu3k6rb/
If still facing an issue in safari check this thread :-Bootstrap modal issue on Safari/iOS/iPhone
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>
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 using partial view to show some detail according to user selection in dropdown button and click a search button.and i am using javascript for laoding partial view.But afer loading partial view the main view getting load and after a moment my partial view is gone.please help.
My main view named CreateBidSecondStep
<div id="container">
<div class="wrapper white-bg">
<div class="row mar-xsm-b">
<div class="col s12 l12 m12">
<div class="step">
<span class="pull-left">Step 1 ></span>
<span class="active pull-left">Step 2 ></span>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row mar-sm-b">
<div class="col s12 m12 l12">
<form id="form1" name="form1" method="post" action="">
<div class="border-light">
<div class="heading24 mar-sm-l mar-sm-r">Bill of Material</div>
<div class="row">
<div class="col s8 m8 l8" id="billMaterial">
<div class="ProdHeading">Search</div>
<div class="pull-left">
<label class="label pull-left">Item Code</label>
#*<div class="editor-field">
#Html.DropDownList("itemcode", Model.listofallitem, "Select Item")
</div>*#
<select class="browser-default pull-left width_120" name="itemcode" id="itemcodeid" >
<option>Select Item Code</option>
#foreach(var item in Model.listofallitem)
{
<option value="#item.Value">#item.Value</option>
}
#*<option>Item Code</option>
<option>Item Code</option>
<option>Item Code</option>*#
</select>
</div>
<div class="pull-left mar-lg-l">
<label class="label pull-left">Item Name</label>
<input type="text" class="pull-left" name="cap" />
</div>
<div class="pull-left mar-lg-l">
<button class="btn waves-effect waves-light" type="submit" name="action" id="btnsearch">Search</button>
</div>
<div class="clearfix"></div>
<div class="bdr-gray-b mar-sm-t mar-sm-b"></div>
<div class="pull-left">
<label class="label pull-left width_120">Total Item Quantity</label>
<input type="number" maxlength="5" class="pull-left width_80" name="cap" />
<div class="clearfix"></div>
<label class="label pull-left width_120">Item Quantity</label>
<input type="number" class="pull-left width_80" name="cap" />
<div class="clearfix"></div>
<label class="label pull-left width_120">Location</label>
<input type="text" class="pull-left width_80" name="cap" />
</div>
<div class="pull-left mar-lg-l">
<label>Description</label>
<div class="clearfix"></div>
<textarea></textarea>
</div>
<div class="pull-left mar-lg-l mar-md-t">
<button class="btn waves-effect waves-light" style="bottom:0px" type="submit" name="action">Add to BOM</button>
</div>
</div>
<div class="col s4 m4 l4">
<div class="table_h2" id="SAPdiv">
</div>
</div>
</div>
<div class="row">
<div class="col s12 l12 m12 ">
<div class="table_h2">
<table class="TableID2">
<thead>
<tr>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th>Approved Supplied</th>
</tr>
</thead>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="row border-light mar-sm-t pad-sm">
<div class="col s12 l12 m12">
<div class="pull-left">
</div>
<div class="pull-right">
<button class="btn waves-effect waves-light" type="submit" name="action">PREVIOUS</button>
<button class="btn waves-effect waves-light" type="submit" name="action">SEND TO ADVANCE PURCHASE</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
My partial view named _CreateBidSecondStep
model List<Company.Project.Shared.BiddingSecondStepSAP>
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
if (Model != null)
{
<table class="TableID2">
<thead>
<tr>
<th>Item Name</th>
<th>Item Code</th>
<th>SAP Quantity</th>
</tr>
</thead>
#foreach(var item in Model)
{
<tr>
<td>
#item.ItemId
</td>
<td>
#item.ItemName
</td>
<td>
#item.SAPQty
</td>
</tr>
}
</table>
}
}
JavaScript Code to call partial view
<script type="text/javascript">
var url = '#Url.Action("SAPPartailView", "CreateBid")';
$('#btnsearch').click(function () {
var keyWord = $('#itemcodeid').val();
$('#SAPdiv').load(url, { searchText: keyWord });
})
</script>
Partial view action
public PartialViewResult SAPPartailView(string searchText)
{
BiddingSecondStepBDC _obj=new BiddingSecondStepBDC();
List<BiddingSecondStepSAP> newlist = new List<BiddingSecondStepSAP>();
newlist = _obj.GetItemSAP(searchText);
return PartialView("_CreateBidSecondStepSAP",newlist);
}
You can use the preventDefault() method to stop the page from rendering.
$('#btnsearch').click(function (e) {
e.preventDefault();
var keyWord = $('#itemcodeid').val();
$('#SAPdiv').load(url, { searchText: keyWord });
})