From 454d2986c3c575825da5bfb0b05ad000c1f6f5dd Mon Sep 17 00:00:00 2001 From: Bishal Karki Date: Thu, 11 Jul 2019 19:32:32 +0545 Subject: [PATCH] CRUD operations success --- js/update-note.js | 100 ++++++++++++++++++++++++++++++++++++++++------ php/create.php | 2 +- php/read.php | 2 +- php/update.php | 69 ++++++++++++++++++++++++++++++++ 4 files changed, 159 insertions(+), 14 deletions(-) diff --git a/js/update-note.js b/js/update-note.js index ec1e91a..f9f8abb 100644 --- a/js/update-note.js +++ b/js/update-note.js @@ -2,6 +2,7 @@ function update_box() { const update_box = `
+
@@ -41,18 +42,18 @@ function update_box() { $("#update_content").focus(); // color pickers at footer - $("#update_note .dot").each(function(index) { + $("#update_note .dot").each(function (index) { $(this).css("background-color", $(this).attr("value")); - $(this).click(function() { + $(this).click(function () { $(this).addClass("selected_dot") - .siblings().removeClass("selected_dot"); - - $("#update_note_box").css("background-color",$(this).attr("value")); + .siblings().removeClass("selected_dot"); + + $("#update_note_box").css("background-color", $(this).attr("value")); }) - - if(index === 0) { + + if (index === 0) { $(this).addClass("selected_dot"); } }); @@ -66,8 +67,8 @@ function update_box() { }); // move focus to note content on enter key press - $("#update_title").keydown(function(e){ - if(e.keyCode == 13) { + $("#update_title").keydown(function (e) { + if (e.keyCode == 13) { e.preventDefault(); $("#update_content").focus(); } @@ -76,10 +77,85 @@ function update_box() { update_box(); // show update box modal on click of note -$("#existing_notes").on('click','.note_title, .note_content', function() { - $("#update_modal").modal("show"); +$("#existing_notes").on('click', '.note_title, .note_content', function () { + + $modal = $("#update_modal"); + $modal.modal("show"); // select the note $note = $(this).parent(); - + $id = $note.attr("id"); + $title = $note.children(".note_title").text(); + $content = $note.children(".note_content").text(); + $color = $note.attr("data-color"); + + // fill value to update modal + $("#update_title").text($title); + $("#update_content").text($content); + $("#update_note input[name='id']").val($id); + + // change color accordingly + $modal.find(".dot").each(function () { + if ($(this).attr("value") == $color) { + $(this).addClass("selected_dot") + .siblings().removeClass("selected_dot"); + + $("#update_note_box").css("background-color", $(this).attr("value")); + } + }); + + // update on save button click + $modal.on('submit', "#update_note", function (event) { + event.preventDefault(); + + // bind form contents to hidden elements + + // $("input[name='id']", this).val($id); + $("input[name='title']", this).val($("#update_title").html()); + $("input[name='content']", this).val($("#update_content").html()); + $("input[name='color']", this).val($(".selected_dot", this).attr("value")); + $("input[name='pinned']", this).val("false"); + + // select form + $form = $("#update_note"); + + // cache inputs + $inputs = $form.find("input"); + + // serialize the data + var serializedData = $form.serialize(); + + // console.log(serializedData); + + // disable form elements for the duration of ajax request + // disabled elements do not be serialized so serialize first and disable + $inputs.prop("disabled", true); + + // fire Ajax request to php/update.php + var request = $.ajax({ + url: "php/update.php", + type: "POST", + data: serializedData + }); + + // callback handler on success + request.done(function (response, textStatus, jqXHR) { + response = JSON.parse(response); + $modal.modal("hide"); + + // update note on DOM + $note.children(".note_title").html(response['title']); + $note.children(".note_content").html(response['content']); + $note.attr("data-color",response['color']); + $note.attr("data-lastModified",response['last_modified']); + $note.attr("style","background-color:"+response['color']); + $note.hide().prependTo("#existing_notes").fadeIn(1000); + }); + + request.always(function() { + $inputs.prop("disabled",false); + }); + }); + + }); \ No newline at end of file diff --git a/php/create.php b/php/create.php index 4a6f133..8a1e8d4 100644 --- a/php/create.php +++ b/php/create.php @@ -57,7 +57,7 @@ $result = $result -> fetch_assoc(); echo '
+ data-lastModified="'.$result['last_modified'].'" data-pinned="'.$result['pinned'].'" data-color="'.$result['color'].'">
'.$result['title'].'
'.$result['content'].'
diff --git a/php/read.php b/php/read.php index 27c1831..3fc5cee 100644 --- a/php/read.php +++ b/php/read.php @@ -24,7 +24,7 @@ $pinned = $row['pinned']; echo '
+ data-lastModified="'.$lastModified.'" data-pinned="'.$pinned.'" data-color="'.$color.'">
'.$title.'
'.$content.'
diff --git a/php/update.php b/php/update.php index dc10d56..695b9f9 100644 --- a/php/update.php +++ b/php/update.php @@ -1,4 +1,73 @@ prepare($sql)) { + $stmt -> bind_param("sssi",$param_title, $param_content, $param_color,$param_id); + + // set parameters + $param_id = $id; + $param_title = $title; + $param_content = $content; + $param_color = $color; + + // attempt to execute prepared statement + if($stmt -> execute()) { + // return newly created object + $sql = "SELECT * FROM notes WHERE id=".$id; + $result = $conn -> query($sql); + $result = $result -> fetch_assoc(); + + echo json_encode($result,JSON_NUMERIC_CHECK); + } + + // close statement + $stmt -> close(); + } + + // close connection + $conn -> close(); + } +} +exit(); ?> \ No newline at end of file