CODEWITHSUNDEEP
javascriptjquerysummernote
Karsten Andersen
Karsten Andersen

Reputation: 125

Inserting text to summernote from javascript function

So I've been trying to insert text into the summernote within a normal javascript function. I have a list of values that when clicked should append themselves into the actual text area. The functions are firing because I have messages being logged to the console when I click but for some reason nothing is still appending. Here is the function:

function appendListItem(ele){
    console.log("Clicked!");
    var id = $(ele).attr("id");
    console.log(typeof(id));
    console.log("ID:" + id);
    //var htmlStr = "<p>#"+id+"</p>";
    $(".summernote").summernote('code', id);
    console.log($("#summernote").summernote('code'));
}

Everything is working except for the 7th line, $(".summernote").summernote('code', id);. I've tried using 'insertText' as well in the summernote function. The id is a string. And I've tried passing in an html string as evidenced by the commented out line (Line 6). Any help you can give me would be greatly appreciated!

EDIT 1:

Here is my html as requested:

<body>
    <div><img src="./images/Logo.png" alt="Logo"  class="logo-center"></div>
    <div id="summernote"></div>
    <div class="checkList">
        <p id="checkTitle">CHECKLIST (<span id="fraction">0/5</span>)</p>
        <ul class="list-group" id="trigList">
            <li class='list-group-item'><a id='mood' onclick='appendListItem(this)'>Mood</a></li>
            <li class='list-group-item'><a id='phone' onclick='appendListItem(this)'>Phone</a></li>
            <li class='list-group-item'><a id='email' onclick='appendListItem(this)'>Email</a></li>
            <li class='list-group-item'><a id='lead' onclick='appendListItem(this)'>Lead</a></li>
        </ul>
    </div>
    <div><button type="button" class="btn btn-primary" onclick="logNote();">Log Note</button></div>
</body>

Upvotes: 1

Views: 5187

Answers (1)

Andrew L
Andrew L

Reputation: 5486

It looks like you have jQuery selectors mixed up. You have 1 Summernote so you can access it by using its ID id="summernote"

what you are currently doing, using this line $(".summernote").summernote('code', id);- is telling jQuery to get all elements that have a class of summernote due to the . selector in the beginning.

No elements in your html have a class of summernote so that is why its not working.

Change $(".summernote").summernote('code', id); to $("#summernote").summernote('code', id); and it should work. the # will get the element with id="summernote" which is your actual Summernote element.

Here is a full working example

<body>
    <div><img src="./images/Logo.png" alt="Logo"  class="logo-center"></div>
    <div id="summernote"></div>
    <div class="checkList">
        <p id="checkTitle">CHECKLIST (<span id="fraction">0/5</span>)</p>
        <ul class="list-group" id="trigList">
            <li class='list-group-item'><a id='mood' onclick='appendListItem(this)'>Mood</a></li>
            <li class='list-group-item'><a id='phone' onclick='appendListItem(this)'>Phone</a></li>
            <li class='list-group-item'><a id='email' onclick='appendListItem(this)'>Email</a></li>
            <li class='list-group-item'><a id='lead' onclick='appendListItem(this)'>Lead</a></li>
        </ul>
    </div>
    <div><button type="button" class="btn btn-primary" onclick="logNote();">Log Note</button></div>
  <script>
    $(document).ready(function() {
      $('#summernote').summernote();
    });
    function appendListItem(elem) {
      //var htmlStr = "<p>#"+id+"</p>";
      var id = $(elem).attr("id");
      console.log(id);
      $("#summernote").summernote('code', id);
      // use 'insertText' instead of 'code' to append the id instead
    }
  </script>
</body>

Upvotes: 2

Related Questions