Chained method calls doesn't work on original nor cloned element, why?

I have the following HTML:

<input type="text" id="condition_value_1" style="display: none" />    
<button id="showme">Make Select2</button>
<button id="clickme">Make Input</button>

Then take a look to the following jQuery:

$(function() {
  var cond1 = $('#condition_value_1');
  var cloned_cond1 = cond1.clone();
  var cond1_select = '<select name="condition_value_1" id="condition_value_1" multiple="multiple"><option></option><option value="1">Opt1</option><option value="2">Opt2</option></select>';

  $('#showme').click(function() {
    cond1.removeAttr('style').replaceWith(cond1_select).select2({
      placeholder: 'Select choice'
    });

  });

  $('#clickme').click(function() {
    if ($('#condition_value_1').hasClass('select2-hidden-accessible')) {
      $("#condition_value_1").select2('destroy');
    }

    $('#condition_value_1').replaceWith(cloned_cond1).removeAttr('style');
  });
});

You can try the code above HERE.

Now as soon as you click on #showme you should remove the attr style, replace the original element with the given one and turn it into a Select2, the last part isn't working.

In the other side if you click on #clickme you should destroy the previous Select2 replace the #condition_value_1 with the cloned element and remove the attr style because the cloned has that attribute but this is not working either.

The idea is to switch between elements and turn on/off properties on demand.

Maybe I am missing something here but I am not sure what. Could any help me here?

Answers:

Answer

The problem is that replaceWith returns the removed element, not the new element. I suggest a different path:

$(function() {
  var cond1 = $('#condition_value_1');
  var cloned_cond1 = cond1.clone().removeAttr('style');
  var cond1_select = '<select name="condition_value_1" id="condition_value_1" multiple="multiple"><option></option><option value="1">Opt1</option><option value="2">Opt2</option></select>';

  $('#showme').click(function() {
    cond1.replaceWith(cond1_select);
    $("#condition_value_1").select2({
      placeholder: 'Select choice'
    });
    cond1 = $("#condition_value_1");
  });

  $('#clickme').click(function() {
    if ($('#condition_value_1').hasClass('select2-hidden-accessible')) {
      $("#condition_value_1").select2('destroy');
    }

    $('#condition_value_1').replaceWith(cloned_cond1);
    cond1 = $('#condition_value_1');
  });
});

Note that I've removed the attribute from the clone before ever replacing anything; that way, you don't have to worry about it.

Note also in the showme click handler, we replace the HTML, then get a new hook to $("#condition_value_1"). That's because cond1 is no longer in the DOM, since you've replaced it with the HTML in the first line.

Likewise, in the clickme click handler, you need to reset the value of cond1 to match your new HTML.

Answer

Updated fiddle.

I suggest to use a container then append the element you want to it, check the example below.

Hope this helps.

$(function() {
  var cond1 = $('#condition_value_1');
  var cloned_cond1 = cond1.clone();
  var cond1_select = '<select name="condition_value_1" id="condition_value_1" multiple="multiple"><option></option><option value="1">Opt1</option><option value="2">Opt2</option></select>';

  $('#showme').click(function() {
    $("#my-container").html(cond1_select);
    $("#condition_value_1").select2({placeholder: 'Select choice',width:'100%'});
  });

  $('#clickme').click(function() {
    if ($('#condition_value_1').hasClass('select2-hidden-accessible')) {
      $("#condition_value_1").select2('destroy');
    }
    $("#my-container").html(cloned_cond1);
    $("#condition_value_1").show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>

<div id="my-container">
  <input type="text" id="condition_value_1" name="condition_1" style="display: none" />
</div>

<button id="showme">Make Select2</button>
<button id="clickme">Make Input</button>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.