Materialize duplicated items on javascript initialization

Question

I have being playing around with materializecss on my joomla website. I have a T3 framework template ( I am pretty new to web development). The problem I have is that whenever I use an item that requires js initialization it gets duplicated, one with the javascript style and one with the css one. For example this happens when using a select item or datepicker. I use the example code given here: http://materializecss.com/forms.html

Another strange thing is that the styles are not fully applied, for example the input field its never applied.

thank you

EDITED:

javascript code:

  $(document).ready(function() {
    $('select').material_select();
  });

css:

  <label>Materialize Disabled</label>
  <select disabled>
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>

image: http://i.stack.imgur.com/AV927.png

When I say that the style is partially applied I meant that it doesn't look as shown in the materializecss webpage, it looks like if it was disabled.

Answer 1

I had the same problem and this is how I was able to fix it, hope it works for you.

a) Put all the initialization for materialize elements in a function

function initializeMaterialize() {
  // initialize materialize slider
  $('.slider').slider();

  // initialize materialize select
  $('select').material_select();

  // initialize materialize datepicker
  $('.datepicker').pickadate({
    selectMonths: true,
    selectYears: 20,
    onSet: function(ele) { if(ele.select) { this.close(); } },
    format: 'mm/dd/yyyy',
    formatSubmit: 'yyyy-mm-dd'
  });
}

b) Then call the function on `$(window).load(function(){});

$(window).load(function() {
  initializeMaterialize();
});

This will make the call only once so you will get only one copy of each of the elements.

Answer 2

You'll get this duplicate on first DOM load or after?

Because i think you initialize same function .material_select() 2 or more times...