CODEWITHSUNDEEP
jqueryhtmlsummernote
Glyn
Glyn

Reputation: 2005

Dynamically created summernote textarea - how to trigger function on change

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>";

Upvotes: 0

Views: 4040

Answers (3)

Mantra
Mantra

Reputation: 346

a simple one liner might help.

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

Upvotes: 1

Nawed Khan
Nawed Khan

Reputation: 4391

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

Upvotes: 3

Maarti
Maarti

Reputation: 3719

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>

Upvotes: 0

Related Questions