mdb-select inside modal

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: mdb-select inside modal

TheDutchBoy pro asked 6 years ago

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="https://mdbcdn.b-cdn.net/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="https://mdbcdn.b-cdn.net/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://mdbcdn.b-cdn.net/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://mdbcdn.b-cdn.net/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://mdbcdn.b-cdn.net/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://mdbcdn.b-cdn.net/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://mdbcdn.b-cdn.net/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://mdbcdn.b-cdn.net/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://mdbcdn.b-cdn.net/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://mdbcdn.b-cdn.net/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://mdbcdn.b-cdn.net/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://mdbcdn.b-cdn.net/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://mdbcdn.b-cdn.net/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://mdbcdn.b-cdn.net/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="https://mdbcdn.b-cdn.net/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">&times;</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>

Jakub Strebeyko staff answered 6 years ago

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 6 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.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: 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
Tags
material-select jquery-3
Related topics
0
material-select-view.js error
7
Keyboard tab navigation to search field of material select is not working. Upon receiving the focus to search textbox, dropdown disappears and leaving inaccessible for a keyboard user
4
Double material select element (second one fetching content from DB) freezes website and browser tab
2
Material Select - Search is not working correctly
2
MaterialSelect performance issue
About author
TheDutchBoy
Pro User
10Support score
2Questions 0Answers
0Snippets likes 1Snippets