Agfdhyk

I want to update my database (add opinion) and automatically show them on my site without refreshing. I use flask, bootstrap and I want to write script to send data in AJAX.

So, it's my site when I have details about book(detail_book.html):

{% extends "bootstrap/base.html" %}

{% block content %}

*Here I have jinja2 to display content sent by render_template, not necessery to add here*

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">

Add opinion

</button>



<!-- MODAL FORM-->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="exampleModalLabel">Your opinion about {{ book.title }}</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>

          <div class="form-group">

            <label for="message-text" class="col-form-label">Message:</label>

            <textarea class="form-control" id="message-text"></textarea>

          </div>

        </form>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary" href="#" data-role="add">Send opinion</button>

      </div>

    </div>

  </div>

</div>

<!-- END MODAL FORM -->

{% endblock %}

So after clicking on button the modal window is displayed. After filling the message and clicking another button, I want to send id of book, author id and opinion to database. My tables in database look like:

class User(UserMixin, db.Model):

    id = db.Column(db.Integer, primary_key=True)

    username = db.Column(db.String(40), index=True, unique=True)

    email = db.Column(db.String(120), index=True, unique=True)

    password_hash = db.Column(db.String(128))

    posts = db.relationship('Opinion', backref='author', lazy='dynamic')



class Opinion(db.Model):

    id = db.Column(db.Integer, primary_key=True)

    body = db.Column(db.String(140))

    timestamp = db.Column(db.DateTime, index=True, default=datetime.utcnow)

    user_id = db.Column(db.Integer, db.ForeignKey('user.id'))

    book_id = db.Column(db.Integer, db.ForeignKey('book.id'))



class Book(db.Model):

    id = db.Column(db.Integer, primary_key=True)

    title = db.Column(db.String(255), index=True)

    description = db.Column(db.String(255))

    author = db.Column(db.String(255))

    pages = db.Column(db.Integer)

    opinions = db.relationship('Opinion', lazy='dynamic')

And in my *routes.py I have method:

@app.route('/detail_book/<title>')

def detail_book(title):

    book = Book.query.filter_by(title=title).first_or_404()

    result = db.session.query(Book.id, Opinion.body).filter(Opinion.book_id==book.id).filter(and_(Book.title == title)).all()

    return render_template('detail_book.html', book=book, result=result)

So to sum up, I want to get data from my modal, send it to 1 table in database(Opinion) and display this opinion in my endpoint.
I have never worked with AJAX, I tried diffrent scripts from web, but in the end I gave up. Can someone help me solve this problem?