Topic: mdb-select inside modal
Version 4.5.15 - 2 material-select inside modal - When modal opens first time both display correct selected value - closing the modal and resetting the values in code - then opening it again only the first one displays the correct selected value and the second one is blank. Also when trying to set value before opening the modal only the first one will display the correct selected value. Sample below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="keywords" />
<meta name="description" />
<meta name="robots" content="noindex,nofollow" />
<!--Icons-->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!--Title-->
<title>Product Quality</title>
<!--Css-->
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/Content/mdb.min.css" rel="stylesheet" />
<link href="/Content/design.css" rel="stylesheet" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<div class="col-md-12">
<div class="md-form">
<div class="row">
<div class="col-2">
<a name="lnkAddOption" title="Open Model"><i class="fa fa-plus-circle" aria-hidden="true" style="font-size: 36px;margin-right: 10px;color: #ff9933;"></i></a>
</div>
<div class="col-2">
<a name="lnkSetValues" title="Set values on model" class="btn btn-md">Set Values</a>
</div>
<div class="col-8">
</div>
</div>
</div>
</div>
<!--Convert Modal-->
<div Class="modal fade right" id="optionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div Class="modal-dialog modal-full-height modal-right modal-notify" role="document">
<!--Content-->
<div Class="modal-content">
<!--Header-->
<div Class="modal-header text-center" style="background-color:rgba(0,0,0,.05);">
<h4 Class="modal-title black-text w-100 py-2">Add Quality Option</h4>
<Button type="button" Class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" Class="black-text">×</span>
</Button>
</div>
<form id="optionAddForm" role="form" method="post">
<!--Body-->
<div Class="modal-body">
<div Class="row">
<div Class="col-12">
<input type="hidden" id="qualityoptionid" name="qualityoptionid" />
<div class="md-form">
<select name="newyarn" class="mdb-select colorful-select dropdown-primary" required>
<option value="">--Select--</option>
<option value="1">New Zealand Wool</option>
<option value="2">European Wool</option>
<option value="3">Wool / Viscose</option>
</select>
<label for="newyarn">Yarn</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="md-form">
<select name="drpnewman" class="mdb-select colorful-select dropdown-primary" required>
<option value="">--Select--</option>
<option value="2">OSTA Carpets BV</option>
<option value="3">Deepak Rugs</option>
<option value="6">Rudra Rugs</option>
<option value="7">Bikaner Handloom Carpets</option>
<option value="11">Zoha Floorcoverings</option>
<option value="12">Knots International</option>
<option value="13">Dream Home Carpets Pvt. Ltd.</option>
<option value="14">Tauquir International (India Exports)</option>
</select>
<label for="drpnewman">Manufacturer</label>
</div>
</div>
</div>
<div Class="row">
<div Class="col-6">
<div Class="md-form">
<input type="number" id="productioncost" name="productioncost" Class="form-control" step="0.01" required />
<Label for="productioncost">Production Cost</Label>
</div>
</div>
<div Class="col-6">
<div Class="md-form">
<input type="number" id="customcost" name="customcost" Class="form-control" step="0.01" required />
<Label for="customcost">Custom Cost</Label>
</div>
</div>
</div>
<div Class="row">
<div Class="col-6">
<div Class="md-form">
<input type="text" id="vendorreference" name="vendorreference" Class="form-control" />
<Label for="vendorreference">Vendor Reference</Label>
</div>
</div>
<div Class="col-6">
<div Class="md-form">
</div>
</div>
</div>
</div>
<!--Footer-->
<div Class="modal-footer justify-content-center">
<input Class="btn btn-primary btn-md" type="submit" name="savecontact" value="Save" />
<input Class="btn btn-primary btn-md" type="button" data-dismiss="modal" value="Close" />
</div>
</form>
</div>
<!--/.Content-->
</div>
</div>
<script src="/Scripts/jquery-3.3.1.min.js"></script>
<script src="/Scripts/popper.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/mdb.min.js"></script>
<script type="text/javascript">
// dropdown control with built-in queries
new WOW().init();
$(document).ready(function () {
$(".mdb-select").material_select();
//Action Link
$("a[name='lnkAddOption']").on('click', function () {
$('#optionModal').modal('show');
});
//opening model
$("#optionModal").on('show.bs.modal', function () {
$('#optionModal').find('#optionAddForm').find('.md-form').each(function () {
$(this).find('input').next("label").addClass('active');
$(this).find('.select-wrapper').next("label").addClass('active');
});
});
//Closing model reset form
$("#optionModal").on('hide.bs.modal', function () {
$('#optionModal').find('#optionAddForm')[0].reset();
$("#optionModal input[name=qualityoptionid]").val("");
$("#optionModal select[name=newyarn] option:selected").removeAttr('selected');
$('#optionModal select[name=newyarn] option[value=""]').attr('selected', 'selected');
$("#optionModal select[name=drpnewman] option:selected").removeAttr('selected');
$('#optionModal select[name=drpnewman] option[value=""]').attr('selected', 'selected');
$("#optionModal input[name=productioncost]").val("");
$("#optionModal input[name=customcost]").val("");
$("#optionModal input[name=vendorreference]").val("");
$('#optionModal').find('#optionAddForm').find('.md-form').each(function () {
$(this).removeClass("has-error");
$(this).removeClass("has-success");
$(this).find('em').css("display", "none");
});
});
$("a[name='lnkSetValues']").on('click', function () {
$("#optionModal input[name=qualityoptionid]").val(1);
$('#optionModal select[name=newyarn] option[value=1]').attr('selected', 'selected');
$('#optionModal select[name=drpnewman] option[value=6]').attr('selected', 'selected');
$("#optionModal input[name=productioncost]").val(0.15);
$("#optionModal input[name=customcost]").val(1.25);
$("#optionModal input[name=vendorreference]").val("Test Note");
$('#optionModal').modal('show');
});
});
</script>
</body>
</html>
Hi there, the Dutch Boy,
Yes, the bug has been already reported elsewhere - has been added to the jQuery dev task board with high priority label. Should be dealt with soon enough.
By the way, since some time now have a great way of painlessly sharing code snippets - MDB Snippets.
It has all the MDB dependencies strapped in, aiding the community and staff in resolving issues on the fly, while keeping the support board readable.
With Best Regards,
Kuba
TheDutchBoy pro commented 5 years ago
FYI
Interesting that adding something like:
<div class="md-form" style="display:none;">
<select name="fake1" id="fake1" class="mdb-select colorful-select dropdown-primary" required></select>
</div>
Solves the issue. Basically it seem to always only effect the last mdb-select in the modal if this more then one.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.10
- Device: PC
- Browser: Chrome
- OS: Win 10
- Provided sample code: No
- Provided link: No