Inserting text to summernote from javascript function

Question

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>

can you show your html too?

Andrew L
– Andrew L

2017-11-15 21:48:05 +00:00
Commented Nov 15, 2017 at 21:48 — Andrew L
– Andrew L, Commented Nov 15, 2017 at 21:48
@AndrewLohr Just did

Karsten Andersen
– Karsten Andersen

2017-11-15 22:13:54 +00:00
Commented Nov 15, 2017 at 22:13 — Karsten Andersen
– Karsten Andersen, Commented Nov 15, 2017 at 22:13

Andrew L · Accepted Answer · 2017-11-16 14:18:06Z

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>

Collectives™ on Stack Overflow

Inserting text to summernote from javascript function

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related