python - Flask and JavaScript Confirm Before Deleting - Stack Overflow

admin管理员组

文章数量:1290186

I have a problem with flask app published pythonanywhere. This is a dashboard and if I click the title of the posting, it is supposed to show details of the posting. I want to add confirm message before delete. How can I make it? Now I try to use javascript, but it doesn't work. Below are my codes.

app.py

import MySQLdb as mysql
con = mysql.connect("host", "username", "password", "database")
con.ping(True)

@app.route('/deleteschool/<int:School_Id>')
def deleteschool(School_Id):
try:
    if session.get('user'):
        #con = mysql.connect()
        cursor = con.cursor()
        query_string = "DELETE FROM school WHERE School_Id = '{School_Id}'".format(School_Id=School_Id)
        cursor.execute(query_string)
        #cursor.execute("DELETE from school where School_Id=%s", (School_Id))
        delete=cursor.fetchall()
        if len(delete) is 0:

            conmit()
            return redirect('/getSchoolList')
        else:
            return redirect('/error')


    else:
        return redirect('/error')
except Exception as e:

    return redirect('/error')

school_page_showpost.html

<script src="/static/js/confirm.js"></script>
{% for row in schoolpost %}
                <div id="titleOutput" class="two fields">
                    <div class="field">
                    <label>TITLE</label>
                    <textarea id="ckeditor1" class="cleditor" disabled="yes" readonly="yes" rows="1">{{row[1]}}</textarea></div></div>

                    <div id="contentsOutput" class="field">
                        <h6></h6>
                        <label>CONTENTS</label>

                    <textarea id="ckeditor2" class="cleditor" disabled="yes" readonly="yes" rows="10" cols="80">{{row[2]}}

                        </textarea>
                        <script>
    var editor2=CKEDITOR.replace( 'ckeditor2' );
</script>
                </div>

            </div>
                <div class="extra content">
                    <div class="right floated author">
                        <span class="right floated time">{{row[4]}}&nbsp;</span>
                            <span class="category">School board&nbsp;</span>
                        <span class="writer">
                    {{row[3]}}</span>
                    </div>
                </div>

            </div>

            <br><br>
                          <ul class="actions pagination">
                <li><a onclick="javascript : window.location = '/editschool/{{row[0]}}' " class="ui button">EDIT</a></li>
                <li><button id="confirmDeleteSchool" type="submit" name="confirmDeleteSchool" class="ui button">DELETE</button></li>
                <li><a href="/school" class="ui button" >LIST</a></li>
            </ul>

{% endfor %}

confirm.js

$(function(){
    $('#confirmDeleteSchool').click(function(){
        var confirm = confirm("Are you sure?");
    if (confirm == true) {
    $.ajax({
        url: '/delteschool/{{row[0]}}',

        success: function(response){
            console.log(response);
        },
        error: function(error){
            console.log(error);
        }
    });

} else {

}
    });

});

If I click delete button, it is supposed to load confirm.js file and execute. But it does nothing. Please help.

I have a problem with flask app published pythonanywhere. This is a dashboard and if I click the title of the posting, it is supposed to show details of the posting. I want to add confirm message before delete. How can I make it? Now I try to use javascript, but it doesn't work. Below are my codes.

app.py

import MySQLdb as mysql
con = mysql.connect("host", "username", "password", "database")
con.ping(True)

@app.route('/deleteschool/<int:School_Id>')
def deleteschool(School_Id):
try:
    if session.get('user'):
        #con = mysql.connect()
        cursor = con.cursor()
        query_string = "DELETE FROM school WHERE School_Id = '{School_Id}'".format(School_Id=School_Id)
        cursor.execute(query_string)
        #cursor.execute("DELETE from school where School_Id=%s", (School_Id))
        delete=cursor.fetchall()
        if len(delete) is 0:

            con.mit()
            return redirect('/getSchoolList')
        else:
            return redirect('/error')


    else:
        return redirect('/error')
except Exception as e:

    return redirect('/error')

school_page_showpost.html

<script src="/static/js/confirm.js"></script>
{% for row in schoolpost %}
                <div id="titleOutput" class="two fields">
                    <div class="field">
                    <label>TITLE</label>
                    <textarea id="ckeditor1" class="cleditor" disabled="yes" readonly="yes" rows="1">{{row[1]}}</textarea></div></div>

                    <div id="contentsOutput" class="field">
                        <h6></h6>
                        <label>CONTENTS</label>

                    <textarea id="ckeditor2" class="cleditor" disabled="yes" readonly="yes" rows="10" cols="80">{{row[2]}}

                        </textarea>
                        <script>
    var editor2=CKEDITOR.replace( 'ckeditor2' );
</script>
                </div>

            </div>
                <div class="extra content">
                    <div class="right floated author">
                        <span class="right floated time">{{row[4]}}&nbsp;</span>
                            <span class="category">School board&nbsp;</span>
                        <span class="writer">
                    {{row[3]}}</span>
                    </div>
                </div>

            </div>

            <br><br>
                          <ul class="actions pagination">
                <li><a onclick="javascript : window.location = '/editschool/{{row[0]}}' " class="ui button">EDIT</a></li>
                <li><button id="confirmDeleteSchool" type="submit" name="confirmDeleteSchool" class="ui button">DELETE</button></li>
                <li><a href="/school" class="ui button" >LIST</a></li>
            </ul>

{% endfor %}

confirm.js

$(function(){
    $('#confirmDeleteSchool').click(function(){
        var confirm = confirm("Are you sure?");
    if (confirm == true) {
    $.ajax({
        url: '/delteschool/{{row[0]}}',

        success: function(response){
            console.log(response);
        },
        error: function(error){
            console.log(error);
        }
    });

} else {

}
    });

});

If I click delete button, it is supposed to load confirm.js file and execute. But it does nothing. Please help.

• javascript
• python
• html
• flask
• pythonanywhere

Share Improve this question Follow edited Aug 25, 2017 at 13:29 Jonathan Delconte 13011 silver badge1313 bronze badges asked Aug 25, 2017 at 5:24 merongiiimerongiii 5111 silver badge44 bronze badges 3

• Is the confirm.js file definitely being loaded? Check out the developer tools in your browser to see if you're getting a 404 error when trying to load it. You might also see other helpful error messages if you keep the developer tools pane open when you click the delete button. – Giles Thomas Commented Aug 25, 2017 at 13:32
• I can't see any error messages. It just doesn't work. It doesn't load confirm.js file. When I tried to type javascript code in html head, it said typeerror cannot read $. – merongiii Commented Aug 25, 2017 at 13:37
• Are you including jQuery somewhere in your code? $ is a jQuery function. – Giles Thomas Commented Aug 26, 2017 at 14:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

An alternative approach for a similar task:

I implemented a confirmation step before deleting post through modal by using only HTML and jinja.

{% block body %}
  <h1>Dashboard <small> Wele {{session.username}} </small></h1>
  <a class="btn btn-success" href="/add_article">Add Article</a>
  <hr>
  <table class="table table-striped">
    <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Author</th>
      <th>Date</th>
      <th></th>
      <th></th>
    </tr>
    {% for article in articles %}
      <tr>
        <td>{{article.id}}</td>
        <td>{{article.title}}</td>
        <td>{{article.author}}</td>
        <td>{{article.create_date}}</td>
        <td> <a href="edit_article/{{article.id}}" class="btn btn-default pull-right"> Edit </a></td>
        <td>

          <!-- Button trigger modal -->
          <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModalCenter{{article.id}}">
            Delete
          </button>
          <!-- Modal -->
          <div class="modal fade" id="exampleModalCenter{{article.id}}">
            <div class="modal-dialog modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLongTitle{{article.id}}">Deleting Post Permanently</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <h3>{{article.title}}??</h3>
                  <p>Are you sure?</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>

                  <form action="{{url_for('delete_article', id=article.id)}}" method="post">
                    <input type="submit" value="Delete" class="btn btn-danger">
                  </form>
                </div>
              </div>
            </div>
          </div>


        </td>
      </tr>
    {% endfor %}
  </table>
{% endblock %}

Including a js file in Flask works differently:

`<script type="text/javascript" src="{{ url_for('static', filename='js/confirm.js') }}"></script>`

With this you should be able to load the JS

本文标签： pythonFlask and JavaScript Confirm Before DeletingStack Overflow