Flask-Web-App-Tutorial icon indicating copy to clipboard operation
Flask-Web-App-Tutorial copied to clipboard

Items do not get deleted, the page only refreshes.

Open Gabrango opened this issue 3 years ago • 10 comments

When I press "x" the page gets refreshed but theitems don't get deleted. You can see my views.py here

from flask import Blueprint, render_template, request, flash, jsonify
from flask_login import login_required, current_user
from .models import Note
from . import db
import json

views = Blueprint('views', __name__)


@views.route('/', methods=['GET', 'POST'])
@login_required
def home():
    if request.method == 'POST':
        note = request.form.get('note')

        if len(note) < 1:
            flash('Note is too short!', category='error')
        else:
            new_note = Note(data=note, user_id=current_user.id)
            db.session.add(new_note)
            db.session.commit()
            flash('Note added!', category='success')

    return render_template("home.html", user=current_user)


@views.route('/delete-note', methods=['POST'])
def delete_note():
    note = json.loads(request.data)
    noteId = note['noteId']
    note = Note.query.get(noteId)
    if note:
        if note.user_id == current_user.id:
            db.session.delete(note)
            db.session.commit()

    return jsonify({})

You can see my index.js here:

function deleteNote(noteId) {
  fetch("/delete-note", {
    method: "POST",
    body: JSON.stringify({ noteId: noteId }),
  }).then((_res) => {
    window.location.href = "/";
  });
}

And finally, the button for deleting:

    {{ note.data }}
    <button type="button" class="close" onClick="deleteNote({{ note.id }})">
      <span aria-hidden="true">&times;</span>
    </button>

Tell me if you see any problems, please

Gabrango avatar Dec 04 '22 18:12 Gabrango

Hello everybody I have the same problem the web is working except the delete notes button when clicked it does not delete the note can anyone help please

Luluam avatar Dec 04 '22 23:12 Luluam

I get a key error when I try to delete the note. I've just watched the tutorial again to gain a better understanding of the code and added notes to the code. Here is the error that I get.

  File "/home/nadeem/VSCode_projects/Flask_Web_App/website/views.py", line 35, in delete_note
    noteId = note['noteId']
KeyError: 'noteId'

nadeembu avatar Dec 06 '22 13:12 nadeembu

Send the entire views.py so that the entire code is visible.

However, here is my delete note if you want to copy paste it:

@views.route('/delete-note', methods=['POST'])
def delete_note():
    note = json.loads(request.data)
    noteId = note['noteId']
    note = Note.query.get(noteId)
    if note:
        if note.user_id == current_user.id:
            db.session.delete(note)
            db.session.commit()

    return jsonify({})

Gabrango avatar Dec 06 '22 20:12 Gabrango

Mine is the same except I've added lots of notes on what it's doing.

@views.route('/delete-note', methods=['POST'])
def delete_note():
    # Look for noteId that was passed to the function
    # from the deleteNote function in index.js
    # json.loads(request.data) - creates a Python dictionary object.
    note = json.loads(request.data)
    # Access the field noteID
    noteId = note['noteId']
    # Find the note from it's note ID
    note = Note.query.get(noteId)
    if note:
        if note.user_id == current_user.id:
            db.session.delete(note)
            db.session.commit()

    return jsonify({})

nadeembu avatar Dec 09 '22 02:12 nadeembu

Hi guys, I found the error on my code, was a spelling mistake in the javascript link at the bottom of my base.html I wrote: type="tex/javascript", instead to write: "type=text/javascript" was like that:

fix to:

Luluam avatar Dec 11 '22 18:12 Luluam

Thanks a lot, I copied and pasted the js of the base.html of the tutorial and it worked, even though mine is exactly the same (i checked several times because it is very weird)

Gabrango avatar Dec 11 '22 19:12 Gabrango

Hi all, My notes do not delete either, and when I click the X button there is no response at all from the web server or browser - nothing happens not even a refresh. Any help is appreciated, and my views.py and index.js code is copied below. Thanks!

views.py

from flask import Blueprint, render_template, request, flash, jsonify from flask_login import login_required, current_user from .models import Note from . import db import json

views = Blueprint('views', name)

@views.route('/', methods=['GET', 'POST']) @login_required def home(): if request.method == 'POST': note = request.form.get('note')

    if len(note) < 1:
        flash('Note must be at least one character.', category='error')
    else:
        new_note = Note(data=note, user_id=current_user.id)
        db.session.add(new_note)
        db.session.commit()
return render_template("home.html", user=current_user)

@views.route('/delete-note', methods=['POST']) def delete_note(): note = json.loads(request.data) noteId = note['noteId'] note = Note.query.get(noteId) if note: if note.user_id == current_user.id: db.session.delete(note) db.session.commit()

return jsonify({})

index.js

function deleteNote(noteId) { fetch("/delete-note", { method: "POST", body: JSON.stringify({ noteId: noteId }), }).then((_res) => { window.location.href = "/"; });

moleary98 avatar Dec 26 '22 17:12 moleary98

Yo, to fix it I just copied and pasted every json part in the code replacing the one I had done (even when there was no actual difference)

Gabrango avatar Dec 26 '22 20:12 Gabrango

Yo, to fix it I just copied and pasted every json part in the code replacing the one I had done (even when there was no actual difference)

Thank you, I didn't mess with the json but I copied all his code in index.js and it worked...again it was the exact same as mine so not sure what the issue was.

moleary98 avatar Dec 27 '22 03:12 moleary98

I had the same issue. The website is working; everything is fine except when I tried to delete a note, it added the last one once again, and the 'note added' message flashed. I found the fix relatively quickly. My problem was that I followed the YouTube tutorial, and there I had the base code only referenced to the JavaScript code. Luckily, I found that in the GitHub repo, the JavaScript code is also inside the base.html file

Roland87 avatar Nov 24 '23 05:11 Roland87