Topic: duplicating materialSelect dynamically in the code.
I have a need to duplicate a field which has materialSelect applied to it.
I am doing it as follows, but i seem to lose functionality of either the first or second (duplicated)
How can i get this to work? So that both (original and new) fields can work and have values selected separately?
Pls refer to:
https://mdbootstrap.com/snippets/jquery/moshe/3276122#js-tab-view
$(".triggerAddRow").click(function(){
var copycontent = $(".itemrow:first").html();
$("#rowarea").append('<div class="row itemrow">' + copycontent+ '</div>');
$('.itemrow:last select[name=drop]').materialSelect({destroy: true});
$('.itemrow:last select[name=drop]').materialSelect();
$('.itemrow:last select[name=drop]').val('');
});
});
Hi,
Rendered HTML structure for the Material Select component is different than the original HTML structure you use for creating the component. This is why getting code from the rendered HTML won't work. To make it possible you can select the original select element inside the rendered structure as seen in my snippet example or you can create a template string with the select structure that you will append to the document every time someone calls your 'add row' function. Also please note I've deleted the id from your select as duplicating ids on the page may cause problems.
Keep coding, Marcin
Kneidels pro commented 3 years ago
Thanks @Marcin Luczak
I think its important to have a way to destroy and recreate the material select - there are many cases where this would be relevant.
But your template idea is a fair workaround -not really a solution ;-)
and i will try it.
The snippet you linked to seems private, as i cannot open it.
Thanks again!
There is some issue with saving my snippet so I'll paste code here so you can check what I've meant: HTML:
<div id="rowarea" style="padding: 20px;">
<div class="row itemrow"><div class="col-xs-12">
<select name="drop" class="mdb-select md-form">
<option value="">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
<input type="button" value="add row" name="adder" id="adder" class="btn triggerAddRow btn-orange">
Script:
$(document).ready(function() {
$('select[name=drop]').materialSelect();
$(".triggerAddRow").click(function(){
var copycontent = $(".itemrow:first select")[0].outerHTML;
$("#rowarea").append('<div class="row itemrow">' + copycontent+ '</div>');
$('.itemrow:last select[name=drop]').materialSelect();
$('.itemrow:last select[name=drop]').val('');
});
});
Hi, I am trying to solve the same issue (in a rather more complex scenario where I have three select element on the same row) as posted in the initial question, and I am stuck at the last step of your snippet.
It is not very clear what materialSelect() function does. It is not a jquery function and not a native Javascript function, so it must be a MDB package function. It seems to me that its purpose is to initialize the select element but when I am using it I have an error in the console saying that is not function. I am importing first jquery, than mdb.min.js file and them my custom js file.
I am using MDB5 Version Pro 3.8.1.Can you detail a little bit more the use of materialSelect() or this function is only available in MDB4?
Marcin Luczak staff commented 3 years ago
Hi,
You are right, this function only works for the MDB4 package and should not be used inside MDB5. For your package please use the syntax provided in the MDB5 Standard documentation: https://mdbootstrap.com/docs/standard/forms/select/#section-basic-example.
For dynamic initialization you can use function from the api section of the documentation: https://mdbootstrap.com/docs/standard/forms/select/#api-section-usage
Keep coding, Marcin
ltanase pro commented 3 years ago
Hi, I have solved it using the syntax mentioned by you.
Thanks,
Marcin Luczak staff commented 3 years ago
I am glad you solved it :)
Keep coding, Marcin
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: MDB4 4.19.1
- Device: PC
- Browser: Firefox
- OS: Win10
- Provided sample code: No
- Provided link: Yes