Question

I have very simple script for submitting the form.
This is html template:

 <table>
    <form action='.' method = 'post' id='form'>{% csrf_token %}
      {{ formset }}
      <tr><td><button type='button' id='button' value='view'>shsfj</button></td></tr>               
    </form>
 </table>
 <div id='right-here'></div>

And this is js:

<script type='text/javascript' language='JavaScript'>
    
  $('#button').click(function(){
      $.get('/json', function(data){
      $('#right-here').replaceWith(
          "<div id='right-here'>"+data+"</div>"
      );                                
      });
      $("#form").ajaxForm(function(){
          alert("It's ok");
          });
  });
</script>

So I have no alert. This means the form is not passed to the server? What is wrong?
The get() function takes data from another view, this is different story.

Answer 1

The “.ajaxForm()” method simply initializes the form. The form has to be submitted in order for anything to really happen.

You should put the call to “.ajaxForm()” in a “ready” handler, and then have the “click” handler simply call “submit()”:

$(function() {
  $('#form').ajaxForm(function() { alert("Ok"); });
});

$('#button').click(function(){
  $.get('/json', function(data){
  $('#right-here').replaceWith(
      "<div id='right-here'>"+data+"</div>"
  );                                
  });
  $("#form").submit();
});

Alternatively, you can do the initialization and the submitting in one step by using “.ajaxSubmit()”.