htmlmongodbflaskweb-development-serverhttpbackend

how to detect which update button was clicked with Flask python(mongoDB)


I need to develop back-end system and using(first time) Flask and mongodb for database. Basically, i need a dynamic table in a webpage with "add" button to add data to the table and "update" button for each row of data. So far, i have managed to load data(for table) from database once page is accessed and add new data to the table and database. But I can not implement "update" button in each row, because I do not know how to detect which button was clicked in the table. I tried to get it through button value which was assigned to the ID of qualification(any row in table). Below is the table and i used bootstrap modal(which has the "html form" inside) for adding and updating

<table class="table table-condensed">
    <thead>
    <tr>
        <th>Qualification</th>
        <th>Calculation of overall result</th>
        <th>Minimum Score</th>
        <th>Maximum Score</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    {% for qual in qualifications %}
    <tr>
        <td>{{ qual.qualificationName }}</td>
        <td>{{ qual.calculation }}</td>
        <td>{{ qual.minimumScore }}</td>
        <td>{{ qual.maximumScore }}</td>
        <td>
            <!-- Button trigger modal -->
            <form method="post" action="">
                <<button type="submit" class="btn btn-danger" data-toggle="modal" data-target="#updateModalCenter"
                        name="updateBtn" value="{{ qual._id }}">Update
                </button>
            </form>
            <!-- Modal -->
            <div class="modal fade" id="updateModalCenter" tabindex="-1" role="dialog" aria-labelledby="updateModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="updateModalLongTitle">Update Qualification</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form method="post" action="{{setupQual/qual._id}}">
                                <div class="form-group">
                                    <label>Qualification Name</label>
                                    <input type="text" class="form-control" name="qualNameUpdate">
                                </div>
                                <div class="form-group">
                                    <label>Calculation of result by average of how many subjects: </label>
                                    <select multiple class="form-control" name="calculationUpdate">
                                        <option>1 subject</option>
                                        <option>2 subjects</option>
                                        <option>3 subjects</option>
                                        <option>4 subjects</option>
                                        <option>5 subjects</option>
                                        <option>6 subjects</option>
                                        <option>7 subjects</option>
                                        <option>8 subjects</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Minimum Score</label>
                                    <input type="number" class="form-control" name="minScoreUpdate" placeholder="Enter number(s) only">
                                </div>
                                <div class="form-group">
                                    <label>Maximum Score</label>
                                    <input type="number" class="form-control" name="maxScoreUpdate" placeholder="Enter number(s) only">
                                </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <input type="submit" class="btn btn-primary" value="Save">
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    {% endfor %}
    </tbody>
</table>

the backend code for adding

@app.route("/setupQual/add", methods = ['POST'])   #addding to db from modal
def addQualification():

qualName = request.form['qualName']
calc = request.form['calculation']
minScore = request.form['minScore']
maxScore = request.form['maxScore']

addToDB = {
        "qualificationName": qualName,
        "calculation": calc,
        "minimumScore": minScore,
        "maximumScore": maxScore
    }
db.qualifications.insert_one(addToDB)
return redirect(url_for('setupQual'))

I tried many ways unsuccessfully and my last code for updating is this:

@app.route("/setupQual/<string: _id>" , methods = ['GET', 'POST']) #loading 
from db for modal updating
def loadQualToUpdate():
updateBtnId = request.form['updateBtn']
qualUpdate = "myUni"#delete later, only for testing
updateQualifications = db.qualifications.findOne({
    "_id": updateBtnId
})
qualName = request.form['qualNameUpdate']
calc = request.form['calculationUpdate']
minScore = request.form['minScoreUpdate']
maxScore = request.form['maxScoreUpdate']

updateDB = {
    "$set": {
        "qualificationName": qualName,
        "calculation": calc,
        "minimumScore": minScore,
        "maximumScore": maxScore
    }
}
db.qualifications.updateOne(updateQualifications, updateDB)
return redirect(url_for('setupQual'))

Obviously, page should not reload when "update" button is clicked. So, any suggestions to catch the "right" update button in the table using Flask python.


Solution

  • I did it by assigning ID value to hidden input

    <input type="hidden" name="id" value="{{ qual._id }}" />
    

    And requested from flask and found data by id and updated on mongodb