I’m working on a web application where users can maintain multiple journal entries on a single page. Each entry allows users to add notes through a Markdown editor. The problem is
const notesContent = notesDisplay.find('.markItUp').val();
is returning null when it should be getting the content inside the textarea when clicking save
full code:
@foreach($notes as $note)
<div class="notes-display">
<div class="notes-text">{!! $note->Daily_Notes_HTML !!}</div>
<button class="add-notes-button" onclick="showEditor(this)">Add Notes</button>
<div class="editor-container" style="display: none;">
Notes:
<textarea class="markItUp" style="padding: 5px; width: 100%; height: 225px; box-sizing: border-box;"></textarea>
<button class="save-notes-button">Save</button>
<button onclick="cancelEditor(this)">Cancel</button>
</div>
<input type="hidden" class="notes-markdown" value="{{ $note->Daily_Notes }}">
<input type="hidden" class="journal-date" value="{{ $note->Date_of_Day }}">
</div>
@endforeach
<script type="text/javascript">
function showEditor(button) {
const notesDisplay = $(button).closest('.notes-display');
notesDisplay.find('.add-notes-button').hide();
notesDisplay.find('.notes-text').hide();
notesDisplay.find('.editor-container').show();
notesDisplay.find('.markItUp').val(notesDisplay.find('.notes-markdown').val());
// Initialize editor...
notesDisplay.find('.save-notes-button').off('click').on('click', function() {
const notesContent = notesDisplay.find('.markItUp').val(); // Current notes content
const journalDate = notesDisplay.find('.journal-date').val(); // Journal date
$.ajax({
url: "{{ route('journal.saveNotes', ':date') }}".replace(':date', journalDate),
type: 'POST',
data: {
notes: notesContent,
_token: '{{ csrf_token() }}'
},
success: function(response) {
if (response.html) {
notesDisplay.find('.notes-text').html(response.html);
}
alert(response.message);
cancelEditor(button);
},
error: function(xhr) {
console.log(xhr.responseText);
alert('An error occurred while saving the notes. Please try again.');
}
});
});
}
</script>
You need to sign in to view this answers