CODEWITHSUNDEEP
javascripthtmljquery
md server
md server

Reputation: 458

dynamically adding summernote editor not working

I'm trying to adding summernote editor dynamically whenever clicking on add button. It doesn't working while adding through of dynamically. Here is my code.

$(document).ready(function() {
      var maxField = 20; //Input fields increment limitation
      var addButton = $('.add_button'); //Add button selector
      var wrapper = $('.field_wrapper'); //Input field wrapper
      var fieldHTML = '<div class="row"><div class="col-md-6"><div class="form-group"><label for="profile_img_dynamic">Heading Image</label><div class="custom-file"><input type="file" class="custom-file-input" id="profile_img_dynamic" name="profile_img_dynamic[]" required><label class="custom-file-label" for="customFile">Choose file</label></div></div></div><div class="col-md-6"><div class="form-group"><label for="title_name_dynamic">Heading Title</label><input type="text" name="title_name_dynamic[]" class="form-control" id="title_name_dynamic" placeholder="Enter name"></div></div><div class="col-md-10"><!-- /.card-header --><div class="card-body pad"><div class="mb-3"><label for="description">Descriptions</label><textarea class="textarea" name="info_name_dynamic[]" id="info_name_dynamic" rows="3" placeholder="Place some text here"style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea></div></div></div><a href="javascript:void(0);" class="remove_button" title="Remove Field">Remove Me</i></a></div>'; //New input field html 
      var x = 1; //Initial field counter is 1
      
      //Once add button is clicked
      $(addButton).click(function() {
        //Check maximum number of input fields
        if (x < maxField) {
          x++; //Increment field counter
          $(wrapper).append(fieldHTML); //Add field html
        }
      });
      
      //Once remove button is clicked
      $(wrapper).on('click', '.remove_button', function(e) {
        e.preventDefault();
        $(this).parent('div').empty(); //Remove field html
        x--; //Decrement field counter
      });
      });
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

  <!-- include summernote css/js-->
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.0/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.0/summernote.js"></script>
<div class="field_wrapper">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="profile_img_dynamic">Heading Image</label>
                        <div class="custom-file">
                          <input type="file" class="custom-file-input" id="profile_img_dynamic" name="profile_img_dynamic[]" required>
                          <label class="custom-file-label" for="customFile">Choose file</label>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="title_name_dynamic">Heading Title</label>
                        <input type="text" name="title_name_dynamic[]" class="form-control" id="title_name_dynamic" placeholder="Enter name">
                      </div>
                    </div>
                    <div class="col-md-10">
                      <!-- /.card-header -->
                        <div class="card-body pad">
                          <div class="mb-3">
                            <label for="description">Descriptions</label>
                            <textarea class="textarea" name="info_name_dynamic[]" id="info_name_dynamic" rows="3" placeholder="Place some text here"
                              style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
                          </div>
                        </div>
                    </div>
                    <div class=""></div>
                    <div class="col-md-2">
                      <div class="form-group">
                        <label for="add">Add More</label><br>
                        <a href="javascript:void(0);" class="add_button" title="Add field">ADD</i></a>
                      </div>
                    </div>
                  </div>
                </div>

As you can see, summer editor not does not displaying there is only simple textarea are displaying instead of editor.

Upvotes: 2

Views: 2003

Answers (1)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

You can add $(wrapper).find('.textarea').summernote() after $(wrapper).append(fieldHTML);

$(wrapper).append(fieldHTML); //Add field html
$(wrapper).find('.textarea').summernote()

Demo

$(document).ready(function() {
  var maxField = 20; //Input fields increment limitation
  var addButton = $('.add_button'); //Add button selector
  var wrapper = $('.field_wrapper'); //Input field wrapper
  var fieldHTML = '<div class="row"><div class="col-md-6"><div class="form-group"><label for="profile_img_dynamic">Heading Image</label><div class="custom-file"><input type="file" class="custom-file-input" id="profile_img_dynamic" name="profile_img_dynamic[]" required><label class="custom-file-label" for="customFile">Choose file</label></div></div></div><div class="col-md-6"><div class="form-group"><label for="title_name_dynamic">Heading Title</label><input type="text" name="title_name_dynamic[]" class="form-control" id="title_name_dynamic" placeholder="Enter name"></div></div><div class="col-md-10"><!-- /.card-header --><div class="card-body pad"><div class="mb-3"><label for="description">Descriptions</label><textarea class="textarea" name="info_name_dynamic[]" id="info_name_dynamic" rows="3" placeholder="Place some text here"style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea></div></div></div><a href="javascript:void(0);" class="remove_button" title="Remove Field">Remove Me</i></a></div>'; //New input field html 
  var x = 1; //Initial field counter is 1

  $(document).ready(function() {
    $('.textarea').summernote();
  });

  //Once add button is clicked
  $(addButton).click(function() {
    //Check maximum number of input fields
    if (x < maxField) {
      x++; //Increment field counter
      $(wrapper).append(fieldHTML); //Add field html
      $(wrapper).find('.textarea').summernote()
    }
  });

  //Once remove button is clicked
  $(wrapper).on('click', '.remove_button', function(e) {
    e.preventDefault();
    $(this).parent('div').empty(); //Remove field html
    x--; //Decrement field counter
  });
});

<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.js"></script>
<div class="field_wrapper">
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label for="profile_img_dynamic">Heading Image</label>
        <div class="custom-file">
          <input type="file" class="custom-file-input" id="profile_img_dynamic" name="profile_img_dynamic[]" required>
          <label class="custom-file-label" for="customFile">Choose file</label>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label for="title_name_dynamic">Heading Title</label>
        <input type="text" name="title_name_dynamic[]" class="form-control" id="title_name_dynamic" placeholder="Enter name">
      </div>
    </div>
    <div class="col-md-10">
      <!-- /.card-header -->
      <div class="card-body pad">
        <div class="mb-3">
          <label for="description">Descriptions</label>
          <textarea class="textarea" name="info_name_dynamic[]" id="info_name_dynamic" rows="3" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
        </div>
      </div>
    </div>
    <div class=""></div>
    <div class="col-md-2">
      <div class="form-group">
        <label for="add">Add More</label><br>
        <a href="javascript:void(0);" class="add_button" title="Add field">ADD</i></a>
      </div>
    </div>
  </div>
</div>

Upvotes: 6

Related Questions