I am developing a notepad app at Monaca.
I made it based on the Notepad app template, but the template did not have the ability to edit notes.
Therefore, I tried to add the editing function as below, but when I went to the editing screen, the original memo content was not displayed.
In detail, when you first press the Edit button after registering a memo, the original memo is not displayed, but when you re-enter it and press Save Overwrite, the next time you edit it, the re-enter it will appear properly.
Perhaps the description around onShowLink is insufficient, but I would appreciate it if you could tell me how to improve it.
Thank you for your cooperation.
~~index.html~~
<!DOCTYPE HTML>
<html>
<head>
<metacharset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scale=no">
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--TOP Page-->
<div data-role="page"id="TopPage">
<header data-role="header" data-position="fixed" data-theme="c">
<h1>Notepad</h1>
<a href="#AddPage" data-icon="plus" class="ui-btn-right">Add Notes</a>
</header>
<section data-role="content">
<ulid="TopListView" data-role="listview" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-split-icon="delete">
</ul>
</section>
</div>
<!--Add Memo Page-->
<div data-role="page"id="AddPage">
<header data-role="header" data-position="fixed" data-theme="c">
<a data-role="button" data-rel="back" data-icon="back">Back</a>
<h1>New Notes</h1>
</header>
<section data-role="content">
<label for="Memo"></label>
<textarea id="Memo"></textarea>
<a data-role="button" data-icon="check" id="SaveBtn">Save</a>
</section>
</div>
<!--Detail Page-->
<div data-role="page"id="ShowPage">
<header data-role="header" data-position="fixed" data-theme="c">
<a data-role="button" data-rel="back" data-icon="back">Back</a>
<a href="#EditPage" data-theme="b" class="ui-btn-right" id="EditBtn">Edit</a>
<h1>/h1>
</header>
<section data-role="content">
<p>/p>
</section>
</div>
<!--Edit Memo Page-->
<div data-role="page"id="EditPage">
<header data-role="header" data-position="fixed">
<a data-role="button" data-rel="back" data-icon="back">Back</a>
<h1>Edit Notes</h1>
</header>
<section data-role="context">
<input id="edit" type="text">
<button onclick="saveEditedMemo()">Save Overwrite</button>
</section>
</div>
<script src="components/loader.js"></script>
<script src="js/memo.js"></script>
<script src="js/app.js"></script>
<script src="js/cssua.min.js"></script>
</body>
</html>
~~app.js~~
/// Save memo and return to top page
function onSaveBtn(){
vartext=$("#Memo").val();
if(text!='){
// Save to local storage
addMemo(text);
// Clear form
$("#Memo").val("";
// Initialize top page
initTopPage();
}
$.mobile.changePage("#TopPage", {reverse:true});
}
///// Initialize top page
function initTopPage(){
$("#TopListView").empty();
var list = getMemoList();
for (vari in list) {
varmemo=list[i];
vard = new Date(memo.time);
vardate=d.getFullYear()+"/"+(d.getMonth()+1)+"/"+d.getDate();
$li=$("<li><a href='#'class='show'><h3></h3><p>/a>a href='#'class='delete'>>><Delete;>>>")
$li.data("id", memo.id);
$li.find("h3").text(date);
$li.find("p").text(memo.text);
$("#TopListView").prepend($li);
}
if(list.length==0){
$li = $("<li> No Notes </li>");
$("#TopListView").prepend($li);
}
$("#TopListView").listview("refresh");// Call refresh after manipulating list
}
///// Move to detail page
function onShowLink() {
var$li=$(this).parent();
selectedMemoId=$(this).parents('li').data("id");
varmemoTitle=$li.find("h3").text();
varmemoHtml=$li.find("p").html().replace(/\n/g, "<br>");
$("#ShowPageh1").text(memoTitle);
$("#ShowPagep").html(memoHtml);
$.mobile.changePage("#ShowPage");
}
///// Delete memo
function onDeleteLink(){
if(!confirm("Do you want to delete this note?")) {
return;
}
var$li=$(this).parent();
variable = $li.data("id");
deleteMemo(id);
initTopPage();
// Return to top
$.mobile.changePage("#TopPage", {reverse:true});
}
///// Called when app launch
function onReady() {
initTopPage();
$("#SaveBtn").click(onSaveBtn);
$("#TopListView").on("click", "a.show", onShowLink);
$("#TopListView").on("click", "a.delete", onDeleteLink);
}
///// Edit memo
function saveEditedMemo(){
variableText=$("#EditPage input#edit") .val();
if(editedText!='){
deleteMemo(selectedMemoId);
addMemo(editedText);
// Clear form
$("#Memo").val("";
// Initialize top page
initTopPage();
}
$.mobile.changePage("#TopPage", {reverse:true});
}
$(onReady); // on DOMContentLoaded
I changed onShowLink() to the following and it appeared.
However, it is uncomfortable to set the value of EditPage when displaying ShowPage, so I thought it would be better to prepare another function.
// Move to detail page
function onShowLink() {
var$li=$(this).parent();
selectedMemoId=$(this).parents('li').data("id");
varmemoTitle=$li.find("h3").text();
// Before the change
// varmemoHtml=$li.find("p").html().replace(/\n/g, "<br>");
// after modification
varmemoContent=$li.find("p").html();
varmemoHtml=memoContent.replace(/\n/g, "<br>");
$("#ShowPageh1").text(memoTitle);
$("#ShowPagep").html(memoHtml);
// Add 1 sentence below
$("#EditPage input#edit").val(memoContent);
$.mobile.changePage("#ShowPage");
}
The next time you edit it, you'll see what you've re-entered
As for this, I think there is probably a cache left when editing.
© 2024 OneMinuteCode. All rights reserved.