I have code to create simple Web Sticky Note with feature:
- Add note
- edit note
- delete note
(Edit, have properly used the .on() method by using the ancestor but still not working) Here's the Code (it's not eye catching, just simple notes):
$(document).ready(function () {
$(".form-horizontal").on("click", "#popup-btn", function () {
$(".form").show();
});
$(".form-horizontal").on("click", ".close-note", function () {
$(this).parent().parent().hide();
});
$(".form-horizontal").on("click", ".add-note", function (e) {
e.preventDefault();
var title = $("#note-title").val();
var texts = $("#note-content").val();
var $input = $('<div class="notes"> <p class="close">x</p> <h2>' + title + '</h2> <p>' + texts + '</p> <button class="to-edit">Edit Note</button> </div>');
$input.appendTo($(".note-group"));
$(".form").hide();
});
$(".form-horizontal").on("click", ".close", function (e) {
e.preventDefault();
$(this).parent('div').remove();
});
$(".form-horizontal").on("click", ".to-edit", function () {
var curTitle = $(this).parent().find(".note-title").text();
var curText = $(this).parent().find(".note-text").text();
$("#edit-note-title").val(curTitle);
$("#edit-note-content").val(curText);
$(".edit-form").show();
$(this).parent().remove();
});
$(".form-horizontal").on("click", '.edit-note', function (e) {
e.preventDefault();
var title = $("#edit-note-title").val();
var texts = $("#edit-note-content").val();
var $input = $('<div class="notes"> <p class="close">x</p> <h2>' + title + '</h2> <p>' + texts + '</p> <button class="to-edit">Edit Note</button> </div>');
$input.appendTo($(".note-group"));
$(".edit-form").hide();
})
});.close {
cursor: pointer;
}
.btn {
margin-top: 35px;
margin-left: 35px;
}
.form,
.edit-form {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.form-content,
.edit-form-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 18%;
}
.add-notes,
.to-edit {
background-color: #51a755;
border: 1px solid rgb(41, 32, 32);
color: #fff;
width: 100px;
height: 50px;
}
.notes {
display: inline-block;
border: 1px solid rgb(202, 197, 197);
margin-left: 35px;
margin-top: 35px;
padding: 25px;
width: 15%;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="form-horizontal">
<!-- Modal Button -->
<button class="btn btn-primary" id="popup-btn">Add Notes</button>
<!-- Form to Create Notes -->
<div class="form">
<div class="form-content">
<h2>Add Notes</h2>
<label for="note-title">Note Title:</label>
<input type="text" id="note-title" name="note-title"><br>
<label for="note-content">Notes</label><br>
<textarea name="`enter code here`note-content" id="note-content" cols="30" rows="10"></textarea>`enter code here`
<button class="btn btn-primary add-note">Add Notes</button>
<button class="btn btn-danger close-note">Close</button>
</div>
</div>
<!-- Edit Note -->
<div class="edit-form">
<div class="edit-form-content">
<h2>Edit Notes</h2>
<label for="edit-note-title">Note Title:</label>
<input type="text" id="edit-note-title" name="edit-note-title"><br>
<label for="edit-note-content">Notes</label><br>
<textarea name="edit-note-content" id="edit-note-content" cols="30" rows="10"></textarea>
<button class="btn btn-primary edit-note">Edit Notes</button>
<button class="btn btn-danger close-note">Close</button>
</div>
</div>
<!-- Note -->
<main class="note-group">
<div class="notes">
<span class="close">x</span>
<h2 class="note-title">List Belanja</h2>
<p class="note-text">Wortel, royco, indomie, siomay, nugget, ikan, telur, beras</p>
<button class="to-edit">Edit Note</button>
</div>
<div class="notes">
<span class="close">x</span>
<h2 class="note-title">UH Minggu Depan</h2>
<p class="note-text">Tekweb || 13:30 - 16:00 || HTML - jQuery</p>
<button class="to-edit">Edit Note</button>
</div>
<div class="notes">
<span class="close">x</span>
<h2 class="note-title">Must buy Games</h2>
<p class="note-text">New World (Steam) dan Guild Wars 2 (Anet)</p>
<button class="to-edit">Edit Note</button>
</div>
</main>
</div>if I precoded the code, the modal popup will read the current title and text. But if the notes are from the add note function, the modal popup wont read it at all. So I'm curios, where did I go wrong. Would appreciate if you can find me the problem. THX!