jeudi 31 décembre 2020

Is my AJAX Call function correct for Removal of Table Row?

I'm having trouble figuring out why my "Remove" button is not working as intended. I'm working on a webpage. Long story short, the main page contains a table whose rows are added via user input, some SQL database queries, and Flask. I want to be able to remove rows w/o refreshing the page, so I got some help constructing an AJAX call to do just that. This is the portion meant to handle that action:

$("#button").clicked(function() {
var rowsToRemove = [];
$(".checkitem:checked").each(function() {
  var rowIndex = $(this).parent("tr").index(this);
  rowsToRemove.push(rowIndex+1);
});

delete_ajax = $.ajax({
        type : 'POST',
        method: 'POST',
        url : "/home",
        data : JSON.stringify({rowsToRemove:rowsToRemove, typeofpost: 'delete'}),
        dataType: "json",
        contentType: "application/json"
});

delete_ajax.done(function(responseObject, textStatus, jqXHR) {
    if(responseObject.status == 200) {
      reloadTable();
    }
});

delete_ajax.error(function() {
  alert("Unable to delete row(s). Please try again.");
});

});

And here is the portion that I was assisted with from the Flask side that would distinguish between delete calls and posted data:

if request.json.get('type') == 'add':
        if not request.form.get("password"):
            return apology("'Password' field required. Please enter a symbol.", 403)
        if not request.form.get("website"):
            return apology("'Website' field required. Please enter a share.", 403)

        password=request.form.get("password")

        db.execute("INSERT INTO passwords (user_id, password, cipher, website) VALUES (:userID, :password, :cipher, :website)",
                    userID=session["user_id"],
                    password=password,
                    cipher=encrypt(password),
                    website=request.form.get("website"))

        length = db.execute("SELECT COUNT(password) FROM passwords WHERE user_id = :userID", userID=session["user_id"])#.fetchone()[0]

        db.execute("UPDATE passwords SET row_id = :rowID WHERE user_id = :userID AND password = :pw",
                    rowID=length[0]["COUNT(password)"],
                    userID=session["user_id"],
                    pw=password)

        #return redirect("/home")
        return {"status":200}

    # from delete
    if request.json.get('type') == 'delete':
        length = db.execute("SELECT COUNT(password) FROM passwords WHERE user_id=:userID", userID=session["user_id"]).fetchone()[0]

        index = list(range(1, length+1))

        data_to_delete = request.json.get("data")

        rowsToRemove = db.execute("DELETE FROM passwords WHERE row_id IN :data AND user_id:=userID", data=data_to_delete, userID=session["user_id"])

        db.execute("UPDATE passwords SET row_id=:rowID WHERE user_id=:userID", rowID=index, userID=session["user_id"])

        return {"status":200}

Just in case I need to fix something I overlooked on the HTML side, I'll that as well:

<div class="form-group container">
    <table class="table table-hover thead-dark">
        <thead>
            <th><div class="checkbox">
                    <label><input type="checkbox" class="checkbox" id="checkall" name="checkall"> Select/Deselect All</label>
                </div></th>
            <th>Row</th>
            <th>Password</th>
            <th>Cipher</th>
            <th>Website</th>
        </thead>
        <tbody>
            
        </tbody>
    </table>
    <div class="form-group form-inline container center row">
        <form  action="/home" method="/post">
            <input class="form-control" autocomplete="off" name="password" placeholder="Password" type="text" required>
            <input autocomplete="off" class="form-control" name="website" placeholder="Website" type="text" required>
            <input class="btn btn-primary" type="submit" id="encrypt" value="Encrypt">
        </form>
        <button type="button" class="btn btn-outline-danger" style="margin: auto" id="button">Remove</button>
    </div>

I have a habit of overlooking things, so if there's something I'm missing, please let me know a.s.a.p.




Aucun commentaire:

Enregistrer un commentaire