duplicating materialSelect dynamically in the code.

Topic: duplicating materialSelect dynamically in the code.

Kneidels pro asked 3 years ago

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('');

    });

});

Add comment

Marcin Luczak staff answered 3 years ago

0 0 Best answer

Please insert min. 20 characters.

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!

Add comment

ltanase pro answered 3 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Please insert min. 15 characters.

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

Add comment

Marcin Luczak staff answered 3 years ago

1 0 Best answer

<p>There is some issue with saving my snippet so I'll paste code here so you can check what I've meant: 
HTML:</p>

<pre class="prettyprint"><code> <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">
</code></pre>

<p>Script:</p>

<pre class="prettyprint"><code>$(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('');
    });
});
</code></pre>

Please insert min. 20 characters.

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('');
    });
});

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

Kneidels

Pro User 257Support score
39Questions 11Answers 20Snippets