We Keep Coding

Dropzone isn't working on Modal Showing through ajax

Dropzone and Javascript isn't working on bootstrap Modal i'm calling Modal through ajax.Because i have hundreds of records i don't want to place Modal in foreach so i used ajax on button click controller method hits and return a new view and that view i'm calling and main view where modal will be displayed. Modal is working fine but i have used dropzone plugin which isn't working and even no other js code is working neither css.
MainView.blade.php
On button Click the following script hits
this the my main view where i am calling Bootstrap Modal
<div class="modal" id="Edit-SpecsModal-products">
<div class="modal-dialog modal-max ">
<div class="modal-content">
<!-- Modal Header -->
<!-- Modal body -->
<div class="modal-body text-center">
<span class="f-24 black bold">Edit Product</span>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body p0">
<div class="product_details" id="product_details"></div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn-bg2" data-dismiss="modal">Cancel</button>
<input type="button" class="btn-bg1" data-dismiss="modal" onclick="submitForms()">Add to Project</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.edit_product_model').click(function(){
var product_id = $(this).attr("id");
$.ajax({
url:"{{url('architecture-edit-product')}}/" + product_id ,
method:"post",
headers: {
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
},
data:{product_id:product_id},
success:function(data){
$('#product_details').html(data.html);
$('#Edit-SpecsModal-products').modal("show");
}
});
});
});
</script>
Controller
public function editArchitectureProductSave(Request $request, $id){
$data['products'] = Product::with('productImages')->where('id',$id)->get();
$returnHTML = view('manufacturer::projects.includes.ajaxhtmlviews.edit-product-Bootstrap-modal', $data)->render();
return response()->json( ['html'=> $returnHTML], 200);
edit-product-Bootstrap-modal.blade.php
<div class="max-wid">
<div class="pl-3 pr-3 mb-5 p0">
<div class="">
<div class=" f-column in">
<div class="">
<ul class="nav nav-tabs nav-border-producttab">
<li class="nav-item ">
<a class="nav-link active" data-toggle="tab" href="#add_new_products2">Add New Product</a>
</li>
</ul>
</div>
<div class="">
<div >
<div class=" mt-3">
<!-- Nav tabs -->
<!-- Tab panes -->
<div class="tab-content model-hit">
<div id="add_new_products2" class="container tab-pane active">
<br>
<div class=" row">
<div class="col-sm-6">
<div class="col-sm-12 p-0 mrg_modal_produt">
<div class="col-sm-12 p-0 label_modal_product">
Product Documents
<div class="clearfix"></div>
<div class="gry f-13">(Specs, CHPS Certificate, Product Data Sheet)</div>
</div>
<div class="my-form1 text-center" id="my-for2">
<?php echo Form::open(array('route' => 'architecture-product-file-save', 'files' => true, 'method' => 'PUT', 'id' => 'product-file-form', 'class' => 'dropzone', 'name' => 'formName')); ?>
<input type="hidden" name="last_product_inserted_id" id="last_product_inserted_id" value="">
<div class="col-sm-12 p-0 mrg_modal_produt">
<div id="preview-template" style="display: none;">
<div class="dz-preview dz-file-preview" style="width: 20% ;">
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-file-type">
<br />
<select name="file_type" class="dz-file-type-select" id="file_type">
<option value="">Select File Type</option>
<option value="datasheet_file">Datasheet</option>
<option value="cad_file">CAD file</option>
<option value="bim_file">BIM file</option>
<option value="leed_file">LEED Statement</option>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-12 p-0 mrg_modal_produt">
<div class="col-sm-12 p-0 label_modal_product">Product Images</div>
<div class="my-form1 text-center" id="my-for3">
<input form="product-form" id="file-input" name="product_images[]" type="file" multiple>
<div id="preview"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<?php echo Form::open(array('route' => 'architecture-product-save', 'files' => true, 'id' => 'product-form')) ?>
<input type="hidden" name="method_type" value="PUT">
<input type="hidden" name="id" value="{{$products['0']->id}}">
<div class="col-sm-12 p-0 mrg_modal_produt">
<input name="name" type="text" class="form-control input_product_modal" value="{{$products['0']->name}}">
<input name="" type="text" class="form-control input_product_modal" value="Manufacturer Name">
<input type="hidden" name="project_slug" value="{{Request::segment(2)}}">
<textarea name="description" class="form-control input_product_modal" cols="" rows="">{{$products['0']->description}}</textarea>
<input name="leed_file_url" type="text" class="form-control input_product_modal" value="{{$products['0']->leed_file_url}}">
</div>
<div id="product_images_div"></div>
<input type="submit" class="btn btn-info" value="Save" id="save-product-form-submit" style="display:hidden;">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Code is working fine modal is calling but problem is only when modal from edit-product-Bootstrap-modal.blade.php is called through the script used in mainView.blade.php for Bootstrap Modal is not working

Check if you have disabled autoDiscvoer for dropzone.js on Dropzone.autoDiscover
if its false set its value as true (Dropzone.autoDiscover = true;).
If thats also not working try manually initializing the dropzone by attaching it to the model.
myDropDown = new Dropzone('#product_details', {<options>})

I had a similar problem with modals, where my datepicker.js input field wouldn't work when I click it, but id didn't show any errors. I did some digging, and apparently, modals don't properly load scripts defined in your view (or wherever). I managed to do this, by initializing the same script again, but with another name, in my app.js, something like this:
$(document).ready(function () {
$('.datepickerCustom').datepicker({
//datepicker logic
}).on('changeDate', function (e) {
$(this).parent().find('.datePickerInput').val(e);
});
});
After compiling my views again (webpack), date picker was working fine. There's also another solution. Seems like sometimes js scripts "hide" behind the modal, so you need to set their z-index the modal's z-index which is 1050. This could be done inside your modal view:
<style>
.datepicker {
z-index: 1600 !important; /* has to be larger than 1050 */
}
</style>
If this still doesn't work, there's actually one more solution, where you need to initiate the date picker on the Modal shown event, something like this:
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
})
Hope that any of those solutions can solve your problem. Good luck.

Why by submitting a form with a link does not change the input text values?

I have a form with some hidden input fields. Additional I have a link, which has a reset function, by clicking on it, it sets the hidden fields a "0" as value and submits the form.
It works fine, except by output the POST array, I still see the old values. How can I change that ?
Here is the HTML form:
<form method="POST" action="http://localhost" accept-charset="UTF-8" id="filter_form">
<input name="_token" type="hidden" value="mWIbgqI6sXZTyZpaW3Z3x1QqxZpwnl0BdmJtDmRY">
<input type="hidden" id="select_finance" name="select_finance" value="0">
<input type="hidden" id="filter_finance" name="filter_finance" value="60">
<div class="row " style="margin-top: 5px; display: none;" id="finance_filters">
<div class="col-md-12">
<div class="owl-carousel col-md-12">
<div class="item">
<div class="top_sub_link">
COPPER
</div>
</div>
<div class="item">
<div class="top_sub_link">
WHEAT
</div>
</div>
<div class="item">
<div class="top_sub_link">
SILVER
</div>
</div>
<div class="item">
<div class="top_sub_link">
GOLD
</div>
</div>
<div class="item">
<div class="top_sub_link activemediasublink">
GAS <i class="close_filter"></i>
</div>
</div>
</div>
<div class="owl-nav"></div>
</div>
</div>
</form>
Here is the Javascript code:
$(document).ready(function() {
$(".close_filter").on('click', function() {
$('#filter_finance').val('0');
$('#select_finance').val('0');
$("#filter_form").submit();
});
});

The element on which you're attaching the onClick event is not the whole link but a tag inside the link. Thus, the clickable area is too small -maybe not even visible.
In your JavaScript, replace this:
$(".close_filter").on('click', function() {
With this:
$(".close_ink").on('click', function() {

Bootstrap modal not working using jquery

I have created a bootstrap modal box and anchor link. When i clicked anchor link it's open modal popup. I have written jquery when link anchor link is clicked to show modal popup. Can any give me suggestion to solve this problem.
index.html
<div class="update-heading">Email Updates</div>
<div class="email_text">Please confirm which of the FREE email services you would like to receive from us, you can unsubscribe at any time:</div>
<div class="checkbox_list"><input type="checkbox" name="newsletter-daily" value="newsletter-daily" class="ind"><span> </span> <label style="width: 400px;">Compelo Energy Daily Update </label> <a class="pview" data-toggle="modal" href="#mprof" >preview</a></div>
<div class="checkbox_list"><input type="checkbox" name="newsletter-weekly" value="newsletter-weekly"><span> </span> <label style="width: 400px;">Compelo Energy Weekly Round-up </label><a class="pview" data-toggle="modal" href="#mprof" >preview</a></div>
Script.js
$(document).ready(function(){
$(".pview").click(function(event){
if($(this).parent().find(':checkbox').is(':checked')){
//alert('parent field is checked');
$('#mprof').modal('show');
console.log('if');
}else{
//alert('parent field is not hecked');
$('#mprof').modal('hide');
console.log('else');
}
});
});

It can't work, modal is an html construct and you must set it like it needs, so you need html for the modal and change the javascript becuase you are doing an on click on class pview that is not correct....Try this and look the differences....Bye...
<div class="update-heading">Email Updates</div>
<div class="email_text">Please confirm which of the FREE email services you would like to receive from us, you can unsubscribe at any time:</div>
<div class="checkbox_list">
<input type="checkbox" name="newsletter-daily" value="newsletter-daily" class="ind">
<span> </span> <label style="width: 400px;">Compelo Energy Daily Update </label>
</div>
<div class="checkbox_list">
<input type="checkbox" name="newsletter-weekly" value="newsletter-weekly">
<span> </span> <label style="width: 400px;">Compelo Energy Weekly Round-up </label>
</div>
<div class="modal bs-example-modal-md fade" id="mprof" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalMprof" >
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header"align="center">
<h4 class="modal-title" id="myModalMprof">Modal</h4>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">× </span>
<span class="sr-only">Chiudi</span>
</button>
</div>
<b><div class="modal-body" id="contentModalMprof">
</div></b>
<div class="modal-footer">
</div>
</div>
</div>
</div>
JS:
$(".checkbox_list").click(function(event){
if($(this).parent().find(':checkbox').is(':checked')){
$('#contentModalMprof').html('preview');
$('#mprof').modal('show');
}else{
$('#mprof').modal('hide');
}
});
I think there is also another problem because you are doing find checkbox and if is checked modal open but in this way you can have two checkbox checked, maybe it's bettere use radio button or you must do a js to check only one checkbox at time...or when you open the modal reset the checkebox prop checked to false, reset checked...Ciao

How to add a "required" checkbox in this code

I want a checkbox in this code. Only if the checkbox is checked it should be possible to press upload / or to allow a upload.
Could you give me a hint how it's possible to change this?
Actually I can insert a checkbox but it's always uploading if the checkbox is unchecked.
#extends('master/index')
#section('custom')
<!-- Main page -->
<div id="content-wrapper" class="snap-content">
<!-- Progress bar -->
<div class="container progress-holder">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="progress-rate">--%</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">--% Complete</span>
</div>
</div>
</div>
</div>
</div>
<!-- Drag zone -->
#if($limitReached == true)
<div class="container text-center start-zone">
<p>{{ t('You have reached daily upload limit') }}</p>
</div>
#else
<div class="container text-center start-zone">
<form id="fileupload" action="{{ route('images.upload') }}" method="POST" enctype="multipart/form-data" accept="image/gif, image/jpeg, image/jpg, image/png">
<input type="file" id="input-browse" class="block-hide" multiple="multiple" name="files">
<p>{{ t('Drag photos from your computer in here. Select maximum 10 images') }}</p>
<div class="help-block">{{ t('Maximum file size allowed is') }} {{ maxUploadSize()*1024 < (int)siteSettings('maxImageSize')*(1024) ? maxUploadSize() : (int)siteSettings('maxImageSize') }}MB (o.O)</div>
<p>{{ t('You can also') }} <a class="browse_files" href="#">{{ t('browse') }}</a> {{ t('for photos to upload') }}.</p>
</form>
</div>
#endif
<div class="uploader block-hide">
<!-- Preview zone -->
<div class="container preview-zone">
<img src="{{ asset('static/img/mask-tran.png') }}"/>
</div>
<!-- Thumbnail zone -->
<div class="container thumbnail-zone">
<div class="row">
<div class="col-md-9">
<ul class="thumbnails-holder nav nav-tabs" id="myTab"></ul>
</div>
<div class="actions col-md-3 text-right">
<button type="button" class="btn btn-danger btn-remove"><i class="glyphicon glyphicon-trash"></i> remove</button>
<button type="button" class="btn btn-primary btn-upload"><i class="glyphicon glyphicon-open"></i> upload</button>
<p class="help-block"><span class="readyphoto"></span>/<span class="totalphoto"></span> photos are ready</p>
</div>
</div>
</div>
<!-- Edit zone -->
<div class="container-fluid tab-content edit-zone-holder"></div>
</div>
</div>

You can do this with JavaScript using the onchangeevent event to enable/disable button based on checked value
<input type="checkbox" onchange="document.getElementById('uploadButton').disabled = !this.checked;" />
<input type="submit" id="uploadButton" value=" Upload " />

you can disable and enable buttons with jQuery depending on the checkbox selection.
If you have:
<input type="checkbox" id="checkbox"/>
<button id="upload">Upload</button>
Then in your jQuery:
$("#upload").prop('disabled', true);
$("#checkbox").bind('change', function(){
var checked = this.checked;
if(checked){
$("#upload").prop('disabled', false);
} else {
$("#upload").prop('disabled', true);
}
});
JSFiddle

add a checkbox
<input type="checkbox" name="chk" id="chk" value="yourvalue">
add onclick event in your upload button
<button type="button" onclick="selected()">upload</button>
<script>
function selected()
{
if(document.getElementById('chk').checked) {
document.getElementById("fileupload").submit();
} else {
alert('YOUR CUSTOM MESSAGE');
}
}
</script>

Try this:
Add this in your html form.
<input type="checkbox" name="writeSomeName" value="value">
Then after that write some php code:
if ($_POST['writeSomeName'] == 'value')
{
//Add code for upload file here
}
else
{
echo "You have not checked the checkbox. Please make it check first"
}

Bootstrap modal z-index

The issue is: I'm using parrallx scrolling, so I have z-index in the page
now when I try to popup a box-modal by Bootstrap I get him to look like this https://www.dropbox.com/s/42tzvfppj4vh4vx/Screenshot%202013-11-11%2020.38.36.png
As you can see, the box-modal isn't on top and any mouse click disables it.
if I disable this css code :
#content {
color: #003bb3;
position: relative;
margin: 0 auto;
width: 960px;
z-index: 300;
background: url('../images/parallax-philosophy-ltl.png') top center;
}
the box modal works.
just to notice, Bootstrap default .modal is z-index:1050 , so I can't understand why it's not on top of all other context.
that's the box-modal:
<section id="launch" class="modal hide fade">
<header class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>אשר הגעה לחתונה </h3>
</header>
<div class="modal-body">
<form method="post" action="/update" id="myForm2">
<input type="radio" id="yes_arrive" name="arrive" checked="checked" value="yes">מגיע<br>
<p><input type="text" required name="fsname" value="" placeholder="הכנס שם פרטי ומשפחה "></p>
<p>כמה אנשים מגיעים? </p>
<select name="number" id="number">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<hr/>
<input type="hidden" name="title" id="title" value="{{title}}">
<input type="radio" name="arrive" id ="no_arrive" value="no">לא מגיע
<p>סיבה לאי הגעה</p>
<input type="text" name="no_arrive_reason" placeholder="קצר ולעניין, לא שדה חובה">
<hr/>
<p class="submit"><input type="submit" name="submit" value="שלח"></p>
</form>
</div>
<footer class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Close</button>
</footer>
</section>
and I trigger him from top menu:
<li><a class="launch" data-toggle="modal" href="#launch">Approve</a></li>
thanks ahead.
EDIT
Solution found if anyone falls to the same problem.
this is the way: add data-backdrop="false" to section or div that you contain the modal with
e.g: <section id="launch" class="modal hide fade in" data-backdrop="false">
notice that it doesn't get the gray background that way, so it's kinda a dirty solution, will be happy to hear of a better one.

The problem almost always has something to do with "nested" z-indexes. As an Example:
<div style="z-index:1">
some content A
<div style="z-index:1000000000">
some content B
</div>
</div>
<div style="z-index:10">
Some content C
</div>
if you look at the z-index only you would expect B,C,A, but because B is nested in a div that is expressly set to 1, it will show up as C,B,A.
Setting position:fixed locks the z-index for that element and all its children, which is why changing that can solve the problem.
The solution is to find the parent element that has the z-index set and either adjust the setting or move the content so the layers and their parent containers stack up the way you want. Firebug in Firefox has a tab in the far right named "Layout" and you can quickly go up the parent elements and see where the z-index is set.

I found this question as I had a similar problem. While data-backdrop does "solve" the issue; I found another problem in my markup.
I had the button which launched this modal and the modal dialog itself was in the footer. The problem is that the footer was defined as navbar_fixed_bottom, and that contained position:fixed.
After I moved the dialog outside of the fixed section, everything worked as expected.

The modal dialog can be positioned on top by overriding its z-index property:
.modal.fade {
z-index: 10000000 !important;
}

Well, despite of this entry being very old. I was using bootstrap's modal this week and came along this "issue".
My solution was somehow a mix of everything, just posting it as it may help someone :)
First check the Z-index war to get a fix there!
The first thing you can do is deactivate the modal backdrop, I had the Stackoverflow post before but I lost it, so I wont take the credit for it, keep that in mind; but it goes like this in the HTML code:
<!-- from the bootstrap's docs -->
<div class="modal fade" tabindex="-1" role="dialog" data-backdrop="false">
<!-- mind the data-backdrop="false" -->
<div class="modal-dialog" role="document">
<!-- ... modal content -->
</div>
</div>
The second approach was to have an event listener attached to the bootstrap's shown modal event. This is somehow not so pretty as you may think but maybe with some tricks by your own may somehow work. The advantage of this is that the element attaches the event listener and you can completely forget about it as long as you have the event listener attached :)
var element = $('selector-to-your-modal');
// also taken from bootstrap 3 docs
$(element).on('shown.bs.modal', function(e) {
// keep in mind this only works as long as Bootstrap only supports 1 modal at a time, which is the case in Bootstrap 3 so far...
var backDrop = $('.modal-backdrop');
$(element).append($(backDrop));
});
The second.1 approach is basically the same than the previous but without the event listener.
Hope it helps someone!

I had this problem too.
Problem is comming from html, created by bootstrap js:
<div class="modal-backdrop fade in"></div>
This line is created directly before end of <body> element. This cause "z-index stacked element problem." I believe that bootstrap .js do creation of this element wrong. If you have in mvc layout page, this script will cause still the same problem. Beter js idea cut be to get target modal id and inject this line to html before...
this.$backdrop = $(document.createElement('div'))
.addClass('modal-backdrop ' + animate)
.appendTo(this.$body)
SO SOLUTION IS repair bootstrap.js - part of modal:
.appendTo(this.$body)
//REPLACE TO THIS:
.insertBefore(this.$element)

ok, so if you are using bootstrap-rtl.css,
what you can do is go to the following class .modal-backdrop
and remove the z-index attribute.
after that all should be fine

I fell into this this with using the JQLayout plugin, especially when using nested layouts and modals with Bootstrap 4.
An overriding css needs to be added to correct the behaviour,
.pane-center{
z-index:inherit !important;
}

Try this Script:
function addclassName(){
setTimeout(function(){
var c = document.querySelectorAll(".modal-backdrop");
for (var i = 0; i < c.length; i++) {
c[i].style.zIndex = 1040 + i * 20 ;
}
var d = document.querySelectorAll(".modal.fade");
for(var i = 0; i<d.length; i++){
d[i].style.zIndex = 1050 + i * 20;
}
}, 10);
}

Resolved this issue for vue, by adding to the options an id: 'alertBox' so now every modal container has its parent set to something like alertBox__id0whatver which can easily be changed with css:
div[id*="alertBox"] { background: red; }
(meaning if id name contains ( *= ) 'alertBox' it will be applied.

function ShowGroupModal()
{
$('#dvGroupInfoPopup').removeClass("fade");
return false;
}
function GroupModelReset()
{
$('#txtGroupName').val("");
$('#dvGroupInfoPopup').addClass("fade");
return false;
}
function SaveClientDetails()
{
if($('#txtName').val() == "")
{
alert("Please enter Client Name");
$('#txtName').focus();
return false;
}
else
{
alert("Client information successfully saved.");
return false;
}
}
function SaveGroup()
{
if($('#txtGroupName').val() == "")
{
alert("Please enter Group Name");
$('#txtGroupName').focus();
return false;
}
else
{
alert("Group information successfully saved.");
return false;
}
}
.fade {display:none;}
.show {display:block;}
.modalParentBox { z-index : 10040 !important;}
.modalChildBox { z-index : 10042 !important;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Parent Modal-->
<div class="modal show modalParentBox" id="idModalAddClient" data-bs-backdrop="static" tabindex="1" aria-labelledby="ModalAddClientLabel" aria-modal="true" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content border-top border-0 border-4 border-primary">
<div class="modal-header">
<h5 class="modal-title" id="ModalAddClientLabel"></h5>
<div>
<i class="bx bxs-user me-1 font-22 text-primary"></i>
</div>
<h5 id="idH5AddUpdateClientHeader" class="mb-0 text-primary">Add Client</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xl-12 mx-auto">
<div class="border p-3 rounded">
<div class="row mb-3">
<label for="ddlGroupToAddClient" class="col-lg-4 col-form-label"><span class="text-danger">* </span>Group <b>:</b></label>
<div class="col-lg-8">
<div class="input-group">
<select class="form-select" id="ddlGroupToAddClient">
<option selected="selected" value="-1">-- Select Group --</option>
</select>
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#dvGroupInfoPopup" onclick="ShowGroupModal()">Add Group</button>
</div>
<span id="idSpnClientTypeError" name="nameSpnForClearAddClientError" class="text-danger small fw-bold"></span>
</div>
</div>
<div class="row mb-3">
<label for="txtName" class="col-lg-4 col-form-label"><span class="text-danger invisible">* </span>Client Name <b>:</b></label>
<div class="col-lg-8">
<input type="text" class="form-control" id="txtName" maxlength="150">
<span id="idSpnCompanyNameError" name="nameSpnForClearAddClientError" class="text-danger small fw-bold"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button id="idBtnSaveClient" type="button" class="btn btn-sm btn-primary" onclick="SaveClientDetails()">Save</button>
<button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!--Child Popup Modal-->
<div id="dvGroupInfoPopup" class="modal fade modalChildBox" tabindex="2" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="dvGroupInfoPopupLabel">Add Group</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="GroupModelReset()"></button>
</div>
<div class="modal-body">
<div class="row mb-2">
<div class="col-lg-5">
<label for="txtGroupName" class="form-label">Group Name:<span class="text-danger">*</span></label>
</div>
<div class="col-lg-7">
<input id="txtGroupName" type="text" maxlength="150" class="form-control" autocomplete="off" required />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success btn-sm" onclick="SaveGroup()">Save Group</button>
<button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal" aria-label="Close" onclick="GroupModelReset()">Cancel</button>
</div>
</div>
</div>