user3367639 user3367639 - 3 months ago 68
CSS Question

Multiple Summer note divs on one page

I am trying to get the code of a specific summer note div with multiple ones on a single page.

My summer notes are created from a database with php as follows:

<div class="tab-content">
<?php $i=-1; foreach($contents as $content): ?>
<?php $i++; ?>
<div class="tab-pane" id="<?php echo $content->contentName; ?>">
<div class="summernote" data-id="<?php echo $i; ?>">
<?php echo $content->content; ?>
</div>
</div>
<?php endforeach; ?>
</div>


And then my javascript is:

<script>
$('.summernote').summernote({
onblur: function(e) {
var id = $('.summernote').data('id');
var sHTML = $('.summernote').eq(id).code();
alert(sHTML);
}
});
</script>


It always gets the first
$('.summernote').eq(0).code();
summernote code never the second or third one.

What I'm trying to do is when each summernote gets a blur, have that code update in a hidden textarea to submit back to the database.

(btw) I am initilizing the summer notes like this:

<script>
$(document).ready(function() {
$('.summernote').summernote({
height: 300,
});
});
</script>

Answer

After selecting all summernote's you need to access their attributes by specifying one element like:

<script>
  $('.summernote').each(function(i, obj) { $(obj).summernote({
    onblur: function(e) {
      var id = $(obj).data('id');
      var sHTML = $(obj).code();
      alert(sHTML);
    }
  });
});
</script>