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

What kind of HTML widget is pointed by selector `.send_recommend` ? Is it a submit button? — MaxZoom, Jul 17 '15 at 21:59

score 0 · Answer 1 · answered Jul 17 '15 at 22:04

0

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>

answered Jul 17 '15 at 22:04

HashPsi

1,391
2
12
22

Hi HashPsi... your solution does indeed prevent the output on the website, but it also prevents the sending of the data? Now nothing reaches the def send_recommend(): function? – carl Jul 17 '15 at 23:00
Stopping the event should not prevent the rest of the code in the handler to execute. Use the JavaScript debugger in the chrome developer tools to step through the click handler. – HashPsi Jul 17 '15 at 23:11
Before the event was stopped in your original code, pressing the button was posting the form to the action ('/send_recommend'). The ajax call did not complete. Now that the event is stopped, the form is no longer being posted and the $.ajax calls executes. You can trace what is happening then by using a debugger, and sending messages to the console on the client and to a log file on the server. – HashPsi Jul 18 '15 at 01:17

score 0 · Answer 2 · answered Jul 17 '15 at 22:05

0

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

e.preventDefault(); 

...

});

or just end the function with return false;

answered Jul 17 '15 at 22:05

Reflective

3,854
1
13
25

Hi Reflective... your solution does indeed prevent the output on the website, but it also prevents the sending of the data? Now nothing reaches the def send_recommend(): function? – carl Jul 17 '15 at 22:53
`e.preventDefault()` prevents other handler which otherwise will be executed after the click ... this will not prevent executing the code inside your click hadler (ajax call too). The `...` means your code there. check you console may some error occur, which will stop the execution of the whole block. – Reflective Jul 17 '15 at 23:04
what do you mean with end the function with return false? You mean in the flask part? That results in an error ('bool' object is not callable)... or where do I have to put the return false? – carl Jul 17 '15 at 23:54
read that: http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false – Reflective Jul 17 '15 at 23:59

score 0 · Answer 3 · answered Jul 19 '15 at 14:41

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.

stay on page after submission of ajax form

3 Answers3