stay on page after submission of ajax form

Question

I have a small popbox window which users are supposed to use to send a message to another user. After clicking the send button I send the data to views.py in my flask application. At that point I would like the popbox to close and nothing else. Instead what happens is that I get a print out on my site with

{ "data": null }

my ajax command is

<script type='text/javascript'>
  $(".send_recommend").click(function() {
      var data = $("form").serialize(); 
      $.ajax({
          url: "/send_recommend",
          type: "GET",
          async: true,
          cache: false,
          contentType: "application/json; charset=utf-8",
          data: { send_dummy_id: document.getElementById("send_dummy_id").value, data: data }, 
      });
  });
</script>

and the flask part of this looks like

@app.route('/send_recommend', methods=['GET', 'POST'])
def send_recommend():

    if request.method == 'GET':
        ret_data = {"data": request.args.get('data')}
        #do something here
        return jsonify(ret_data)

The html looks like

          <div class='popbox' style="display: inline">

              <button class="btn btn-primary open" href="#" data-id="{{ data['arxiv_id'] }}" role="button"><span class="glyphicon glyphicon-share"></span>Recommend this paper</button>

              <div class='collapse_popbox'>
                  <div class='box'>
                      <div class='arrow'></div>
                      <div class='arrow-border'></div>

                      <form action="/send_recommend" method="GET" style="padding:10px;" align="right">

                          <p>
                              {{ form.From(size=30, readonly=true) }}
                          </p>

                          <p>
                              {{ form.To(size=30, placeholder='To') }}
                          </p>
                          <p>
                              {{ form.message(rows=3, cols=29, placeholder='Message') }}
                          </p>

                          <button class="btn btn-primary send_recommend">Send</button>
                          <button class="btn btn-default close1">Dismiss</button>
                          <input id="send_dummy_id" name="send_dummy_id" value="" type=hidden>

                      </form>
                  </div>
              </div>
          </div>

Basically my question is how can I prevent ajax from any feedback on the website? I used ajax because I do not want to reload the website after the form is submitted. Maybe ajax is the wrong tool? thanks fl

Answer 1

Prevent the default behavior on the item clicked like so:

<script type='text/javascript'>
  $(".send_recommend").click(function(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      var data = $("form").serialize(); 
      $.ajax({
          url: "/send_recommend",
          type: "GET",
          async: true,
          cache: false,
          contentType: "application/json; charset=utf-8",
          data: { send_dummy_id: document.getElementById("send_dummy_id").value, data: data }, 
      });
  });
</script>

Answer 2

$(".send_recommend").click(function(е) {

e.preventDefault(); 

...

});

or just end the function with return false;

Answer 3

Just remove the return jsonify(ret_data) line form your send_recommend() route.

@app.route('/send_recommend', methods=['GET', 'POST'])
def send_recommend():

    if request.method == 'GET':
        ret_data = {"data": request.args.get('data')}
        #do something here

Because you are returning the JSON data back to your template.