I have two parameters Deck and Compartment which belong to the same table om_m_compartment (mapped to the Hibernate Pojo CompartmentEntity ). I have a JSP page where these two parameters are intialised in the same div as shown below
<div class="row bpdiv">
<div class="col-xs-2 col-md-2 col-ld-2 form-group">
<label class="control-label">Deck </label>
</div>
<div class="col-xs-4 col-md-4 col-ld-4">
<div class="input-group">
<input type="text" style="border: 1px solid" class="form-control" id="Deck" readonly/>
<span class="input-group-addon">
<i data-id="0" class="fa fa-search-plus fa-lg clssSearchDeck" style="color: #ff0000; cursor: pointer" title="Search Deck"></i>
</span>
</div>
</div>
<div class="col-xs-2 col-md-2 col-ld-2 form-group">
<label class="control-label">Compartment </label>
</div>
<div class="col-xs-4 col-md-4 col-ld-4">
<div class="input-group">
<input type="text" style="border: 1px solid" class="form-control" id="Compartment" readonly/>
<span class="input-group-addon">
<i data-id="0" class="fa fa-search-plus fa-lg clssSearchCompartment" style="color: #ff0000; cursor: pointer" title="Search Compartment"></i>
</span>
</div>
</div>
<div id="searchDeckDialog" title="Search Deck" class="modal">
<body>
<span id="prompttext10"></span>
</body>
</div>
<div id="searchCompartmentDialog" title="Search Compartment" class="modal">
<body>
<span id="prompttext11"></span>
</body>
</div>
</div>
An ajax call is made on clicking .classSearchDeck or .classSearchCompartment which fires a REST url to load the JSP page in the modal as shown below
$('.clssSearchDeck').on( 'click', function (e) {
var srlno = $(this).attr('data-id');
$( "#searchDeckDialog" ).dialog({
modal: true,
height: 453,
width: 820,
title: 'Search Deck Names',
open: function(event, ui) {
var $led = $("#searchDeckDialog");
var yard_srl_no = $('#yardCode').val();
$led.load("/portal/initDeckNames?yard_srl_no="+yard_srl_no);
},
close: function(event, ui) {
$("#searchDeckDialog").html("");
$('#searchDeckDialog').on('hidden.bs.modal', function(event){
$('#searchDeckDialog').clear();
$("#searchDeckDialog").removeData('bs.modal');
});
},
buttons: {
Close: function() {
$( this ).dialog( "close" );
}
}
});
});
$('.clssSearchCompartment').on( 'click', function (e) {
var srlno = $(this).attr('data-id');
$( "#searchCompartmentDialog" ).dialog({
modal: true,
height: 453,
width: 820,
title: 'Search Compartment Names',
open: function(event, ui) {
var $led = $("#searchCompartmentDialog");
var yard_srl_no = $('#yardCode').val();
var deck = $('#Deck').val();
$led.load("/portal/initCompartmentNames?yard_srl_no="+yard_srl_no+"&deck="+deck);
},
close: function(event, ui) {
$("#searchCompartmentDialog").html("");
},
buttons: {
Close: function() {
$( this ).dialog( "close" );
}
}
});
});
The REST call is to a java controller which basically returns a ModelandView object as shown below
@GetMapping("/initDeckNames")
public ModelAndView initDeckNames(HttpServletRequest request) {
LoginUserVO auser = (LoginUserVO) request.getSession().getAttribute("logindtls");
String yardSrlNo = (String) request.getParameter("yard_srl_no");
//System.out.println("DISCIPLINE CODE:"+disciplineCode);
ModelAndView modelView = new ModelAndView();
modelView.setStatus(HttpStatus.OK);
if(auser == null)
{
modelView.setViewName("redirect:home");
} else {
modelView.addObject("yardSrlNo", yardSrlNo);
modelView.setViewName("jsp/LookUpAllDeckNames");
}
return modelView;
}
Within the jsp another ajax call is made which Popuplate the dataTable. The JSP then shows it in tabular format.
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@page import="co.in.grsc.inspectionrequest.entities.CompartmentEntity"%>
<script>
var errorClass= "bst-ui-state-error";
$(document).ready(function() {
var yard_srl_no = $("#yard_srl_no").val();
$('#srcDeck thead tr').clone(true).appendTo( '#srcDeck thead' );
$('#srcDeck thead tr:eq(1) th').each( function (i) {
var dataCode = $(this).attr('data-code');
if($(this).hasClass("no-search") == false)
{
var title = $(this).text();
$(this).html( '<input type="text" class="form-control '+dataCode+'" placeholder="Search" style="font-size: 13px; color:black; height: 22px !important;" />' );
$( 'input', this ).on( 'keyup change', function () {
if ( table.column(i).search() !== this.value ) {
}
} );
var dataCodeClass = "."+dataCode;
$(dataCodeClass).on("keypress", function(event) {
if(event.which == 13)
{
if($(this).val() === 'ALL')
{
table.column(i).search('').draw();
} else {
table.column(i).search($(this).val()).draw();
}
$("#btnRemoveCustSearch").removeClass('disable');
$("#btnRemoveCustSearch").addClass('enable');
}
});
$(dataCodeClass).autocomplete({
minLength:0,
delay:300,
source: function(request, response) {
},
select: function(event, ui) {
if(ui.item.value === 'ALL')
{
table.column(i).search('').draw();
} else {
table.column(i).search(ui.item.value).draw();
}
$("#btnRemoveCustSearch").removeClass('disable');
$("#btnRemoveCustSearch").addClass('enable');
}
});
} else {
$(this).html('');
}
} );
var table = $("#srcDeck").DataTable({
responsive: true,
orderCellsTop: true,
fixedHeader: true,
order: [0, 'asc'], //[[4, 'asc'],
dom: 'Brtip',
buttons: [
{
extend: 'colvis',
postfixButtons: [ 'colvisRestore' ],
text: '<i class="fa fa-filter" aria-hidden="true" style="font-size:12px"></i>',
className : 'red',
titleAttr: 'Filter Columns'
},
{
extend: 'excel',
sheetName: 'Exported data',
text: '<i class="fa fa-file-excel-o" aria-hidden="true" style="color:green; font-size:12px"></i>',
titleAttr: 'Excel'
},
{
extend: 'pdf',
text: '<i class="fa fa-file-pdf-o" aria-hidden="true" style="color:#a51919; font-size:12px"></i>',
titleAttr: 'PDF'
},
{
extend: 'pageLength'
},
{
extend: 'print',
text: '<i class="fa fa-print" aria-hidden="true" style="font-size:12px"></i>',
titleAttr: 'Print'
},
{
text: '<i class="fa fa-refresh" id="refreshTabe" aria-hidden="true"></i>',
titleAttr: 'Refresh Grid',
action: function ( e, dt, node, config ) {
$("#srcDeck").DataTable().ajax.reload();
}
},
{
text: '<i class="fa fa-remove" id="removeCustomSearch" aria-hidden="true"></i>',
attr: { title: 'Remove Custom Search', id: 'btnRemoveCustSearch', class: 'dt-button disable'},
action: function ( e, dt, node, config ) {
$('#srcDeck thead tr:eq(1) th').each( function (i) {
var dataCode = $(this).attr('data-code');
if(dataCode !== 'discipline')
{
if($(this).hasClass("no-search") == false)
{
var dataCodeClass = "."+dataCode;
$(dataCodeClass).val('');
table.column(i).search('').draw();
}
}
});
$("#btnRemoveCustSearch").removeClass('enable');
$("#btnRemoveCustSearch").addClass('disable');
}
},
{
text: '<i class="fa fa-search-plus" id="actionitems" aria-hidden="true"></i>',
attr: { title: 'Advance Search', id: 'btnActionItems', class: 'dt-button'},
action: function ( e, dt, node, config ) {
$("#searchDialog" ).dialog({
modal: true,
resizable: false,
height: 550,
width: 300,
title: 'Advance Search',
open: function(event, ui) {
},
close: function(event, ui) {
//$("#searchVendorDialog").html("");
},
buttons: {
Close: function() {
$( this ).dialog( "close" );
},
Search: function() {
$("#srcDeck").DataTable().ajax.reload();
$( this ).dialog( "close" );
}
}
});
}
}
],
columnDefs: [
{
//targets: [ 3]
//visible: false
}
],
lengthMenu: [
[ 5, 10, 15, 20, 30, 40, 50, -1 ],
[ '5 rows', '10 rows', '15 rows', '20 rows', '30 rows', '40 rows', '50 rows', 'Show all' ]
],
'bProcessing': true,
'bServerSide': true,
//'sAjaxSource': '/portal/getaparsbyyearv3.json?requestAparYear='+requestAparYear,
'sAjaxSource': '/portal/searchDeckNames.json?yard_srl_no='+yard_srl_no,
'initComplete': function(settings, json){
console.log(json);
},
'bJQueryUI': true,
'stateSave': false,
'bAutoWidth': false,
'bFilter': true,
'pageLength': 10,
"language": {
"lengthMenu": "Display _MENU_ records per page",
"zeroRecords": "No records available",
"infoEmpty": "No records available",
"infoFiltered": "(filtered from _MAX_ total records)",
"search": '',
"searchPlaceholder": "Search...",
"paginate": {
'first': '<i class="fa fa-chevron-left"></i><i class="fa fa-chevron-left"></i>',
'last': '<i class="fa fa-chevron-right"></i><i class="fa fa-chevron-right"></i>',
'previous': '<i class="fa fa-chevron-left"></i>',
'next': '<i class="fa fa-chevron-right"></i>'
},
"processing": "<i class=\"fa fa-cog fa-spin fa-3x fa-fw\" aria-hidden=\"true\"></i>"
},
//html = html + "<td><i class=\"fa fa-long-arrow-right\" style=\"padding-left: 20px;\"></i> <input type=\"hidden\" id=\"srlno\" value=\""+v.srlno+"\"/><strong>" + v.activity + "</strong></td><td>"+ milestone +"</td><td>" + v.systemDesc + "</td><td>" + v.subsystemDesc + "</td><td>"+actvtComponent+"</td><td>"+ v.weitage+"</td><td class=\"text-center\">"+assignToString+"</td><td>"+colData+"</td>";
'aoColumns': [
{
'mData': 'deck', 'sWidth': '15%'
},
{
'mData': null, 'defaultContent': '', 'sWidth': '1%',
'mRender': function(data, type, row) {
return '<td colspan=\"99\" class=\"text-center\"><input type=\"hidden\" class=\"srlno\" id=\"srlno\" value=\"'+row.deck+'\"/><i class=\"fa fa-check-circle fa-2x selectDeck\" aria-hidden=\"true\" style=\"color:#17c354;cursor:pointer;\" data-id="'+row.compartment_sl_no+'" data-name="'+row.deck+'"></i></td>';
//return '<button class="btn btn-primary btn-sm clsAddTarget" data-iomanno="'+row.reportee.ioManNo+'" data-manno="'+row.employeeRoll+'" >Add Target</button>';
}
}
],
aoColumnDefs: [
{
targets: [0,1],
className: "text-center"
}
]
});
$('#srcDeck tbody').on("click", ".selectDeck", function(e){
var deck = $(this).attr('data-name');
var compartment_sl_no = $(this).attr('data-id');
$('#Deck').val(deck);
$('#searchDeckDialog').dialog('close');
if( $.fn.DataTable.isDataTable('#srcDeck')) {
$('#srcDeck').DataTable().clearTable();
$('#srcDeck').DataTable().destroy();
}
});
function initializeLoadingTable()
{
$("#tblActivityLogs > tbody").html("");
$("#tblActivityLogs > tbody").html("<tr><td colspan=\"99\" class=\"text-center\"><i class=\"fa fa-cog fa-spin fa-3x fa-fw\" aria-hidden=\"true\"></i></td></tr>");
}
function populateTable(responseData) {
if(responseData.length <= 0)
{
$("#tblActivityLogs > tbody").html("<tr><td colspan=\"99\" class=\"text-center\">No Deck found.</td></tr>");
} else {
var html = "";
var rowsCount = responseData.length;
var iCounter = 0;
$.each(responseData, function(k, v) {
iCounter = iCounter + 1;
html = html + "<tr>";
html = html + "<td><input type=\"hidden\" class=\"srlno\" id=\"srlno\" value=\""+v.deck+"\"/></td><td>"+v.deck+"</td><td class=\"text-center\"> <i data-id=\""+v.deck+"\" class=\"fa fa-check-circle selectDeck\" title=\"Delete Log.\" style=\"font-size:19px; color:#17c354; cursor:pointer;\"></i></td>";
html = html + "</tr>";
});
$("#tblActivityLogs > tbody").html(html);
}
}
});
</script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 mb-12">
<div class="row" id="child_js_warning_container" style="display: none">
<div class="col-md-12 mb-4 clearfix" style="padding: 0;">
<div class="alert alert-warning ">
<span class="fa fa-exclamation-triangle" style="font-size: 30px;"></span><span id="child_errorText" style="vertical-align: top;line-height: 32px;font-size: 17px;padding-left: 9px;"> </span>
</div>
</div>
</div>
<div class="row custom" style="overflow: hidden">
<fieldset>
<div class="col-md-12 mb-4 clearfix">
<div class="row" style="margin-top: 10px;">
<fieldset style="padding-bottom: 2px;">
<legend style="margin-bottom: 6px">
<i class="fa fa-search-plus" style="font-weight: 900;color: black;"></i> Search All Deck Description
</legend>
<div class="col-md-12 mb-4 clearfix">
<div>
<input type="hidden" name="requestsrlno" id="requestsrlno" value="${requestScope.requestsrlno}" />
<input type="hidden" name="yard_srl_no" id="yard_srl_no" value="${yardSrlNo}" />
<fieldset>
<div class="col-md-12 mb-4 clearfix" style="max-height: 550px; overflow-y : scroll">
<div class="table-responsive">
<table id="srcDeck" class="row-border compact" style="width:100%">
<thead>
<tr>
<th data-code="man1" width="15%">Deck</th>
<th class="no-search">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</fieldset>
</div>
</div>
<div class="container-fluid"> </div>
</fieldset>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
The Problem is Both the Modals are loading the Datatable which is of the Same Type ie CompartmentyEntity hense the Deck Modal is Loading as expected but The Compartment Modal is not working. Can anyone give any solutions so that both the Modals are shown.
