Dynamically created summernote textarea - how to trigger function on change

Question

I am dynamically creating a summernote text area and populating it with the initial data. When this data is changed I want to call a funtion to update the database. For an 'input' field 'onchange' works (is triggered when you make a change and then leave the field) so I tried it here as per below. This did not work (was not triggered on leaving the field) and there is no console log message.

var json = json + "<textarea class='summernote col-lg-12 col-md-12 col-sm-12 col-xs-12' id='ymSpecificLine' name='ymSpecificLine' rows='1'"	+ "' onchange='taskDetailUpdateFunction(\"" + awardDetail.getAdDescription().replace("\"", "&quot;") + "\", \"" + encoded_task_detail_ID.replace("\"", "&quot;") + "\")'>"; json = json + awardDetail.getAdDescription(); json = json + "</textarea>";

Nawed Khan · Accepted Answer · 2018-10-24 02:58:34Z

3

Summernote have methods that can be called for this: https://summernote.org/deep-dive/#callbacks

You'd call the onChange method as defined here: https://summernote.org/deep-dive/#onchange

answered Oct 24, 2018 at 2:58

Nawed Khan

4,3911 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Glyn Over a year ago

I have been working away at this with the wysiwyg sometimes showing and then not showing (just a text box) when I leave the page and then re-display it. Finally, through trial and error, I found that the "" $('.summernote').summernote({});" and "$('.summernote').on('summernote.blur', function() { alert('Editable area loses focus'); });" must go after the "$(responseJson1a).appendTo($("#button-container"));". So there is one tip for anyone who comes after me.

Glyn Over a year ago

The next issue is that the blur function is triggered whether or not a change is made. Is there a way to only notify when leaving the editor when a change is made? This would need to capture if someone made a change and then deleted the change before leaving, the net effect is no change.

Glyn Over a year ago

Two more issues: The blur is triggered when the toolbar is used. The blur goes into an endless loop if you click from one editor into another. I am dynamically creating a number of editors in this piece of work.

Glyn Over a year ago

OK, don't use "alert" to resolve the loop. However, still the problem that using the toolbar triggers the blur.

Mantra · Accepted Answer · 2021-09-14 12:12:57Z

2

a simple one liner might help.

$('.summernote').trigger('summernote.change');

edited Sep 14, 2021 at 12:12

answered Aug 18, 2021 at 17:43

Mantra

3563 silver badges17 bronze badges

Comments

Maarti · Accepted Answer · 2018-10-24 02:57:08Z

You have to inject it in your DOM with innerHTML:

var json = "<textarea class='summernote col-lg-12 col-md-12 col-sm-12 col-xs-12' id='ymSpecificLine' name='ymSpecificLine' rows='1' onchange='onChange()'></textarea>"; document.getElementById("demo").innerHTML = json; function onChange(){ console.log("Value changed to: "+document.getElementById("ymSpecificLine").value); }

<p>Change my value then press TAB:</p> <div id="demo"></div>

Collectives™ on Stack Overflow

Dynamically created summernote textarea - how to trigger function on change

3 Answers 3

4 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Related