CODEWITHSUNDEEP
javascriptjqueryajaxdjango
aze
aze

Reputation: 850

Django : Ajax form still reloads the whole page

I am using a django form with ajax using this code:

 <form id="form-id">
     <p> Search : <input name="{{ form.query.html_name }}" value="{{ form.query.value }}" type="search" id="form-input-id" autofocus onfocus="var temp_value=this.value; this.value=''; this.value=temp_value">
     </p>
 </form>

and the Javascript code:

   $( document ).ready(function() {
       $('#form-id').on('change', function() {
           this.submit();
       })

      $('#form-id').on('submit', function(evt) {
          evt.preventDefault();

          var form = evt.target;

          $.ajax({
              url: form.action,
              data: $(form).serialize(),
              success: function(data) {
                  $('.results').html(data);
              }
          });
      });
  });

But here is the thing, everytime the submit event is triggered, I feel like the whole page is reloaded (it blinks). What could I do to prevent this from happening?

Upvotes: 0

Views: 729

Answers (2)

Borut
Borut

Reputation: 3364

Your change event is submitting your form and page refreshes. Delete it and add change event to second function, where you're currently waiting for submit event.

$('#form-id').on('change', function(evt) {
      var form = evt.target;
      $.ajax({
          url: form.action,
          data: $(form).serialize(),
          success: function(data) {
              $('.results').html(data);
          }
    });
});

To prevent submit on enter, add keypress event to function and detect when enter is pressed. Like this:

$('#form-id').on('change keypress', function(evt) {
    var key = evt.which;
    if (key == 13) {
        return false;
    } else {
        var form = evt.target;
        $.ajax({
            url: form.action,
            data: $(form).serialize(),
            success: function(data) {
                $('.results').html(data);
            }
        });
    }
});

Key number 13 is enter. When it's pressed, nothing is returned. You could have also replaced return false with evt.preventDefault(). And for other keys, Ajax will be triggered.

Upvotes: 1

Rik Schoonbeek
Rik Schoonbeek

Reputation: 4510

What if you add:

return false;

To your code, like so:

$( document ).ready(function() {
       $('#form-id').on('change', function() {
           this.submit();
       })

      $('#form-id').on('submit', function(evt) {
          evt.preventDefault();

          var form = evt.target;

          $.ajax({
              url: form.action,
              data: $(form).serialize(),
              success: function(data) {
                  $('.results').html(data);
              }
          });
          return false;
      });
  });

Got this from:

https://simpleisbetterthancomplex.com/tutorial/2016/11/15/how-to-implement-a-crud-using-ajax-and-json.html

A very important detail here: in the end of the function we are returning false. That’s because we are capturing the form submission event. So to avoid the browser to perform a full HTTP POST to the server, we cancel the default behavior returning false in the function.

How I specify my form in html / django template:

<form id="form-id" action="required-url-goes-here" method="post">
     <p> Search : <input name="{{ form.query.html_name }}" value="{{ form.query.value }}" type="search" id="form-input-id" autofocus onfocus="var temp_value=this.value; this.value=''; this.value=temp_value">
     </p>
 </form>

The tutorial I pointed to above works in a different way then you do. It specifies, inside the ajax request: - url - type - data - dataType

It also uses a different way to reference the form, and it is the only way I know, so I can't judge if there is an error in the rest of your code.

Upvotes: 0

Related Questions