ajax request not working in django?

Question

Here is my js that uses Jquery blockUI plug-in:

$(document).ajaxStop($.unblockUI);

 $('#submit-id-submit').click(function() {
  $.blockUI({message:'<h1><img src="{% static 'css/spinner.gif' %}" /> Just a moment ...</h1>'});
  $.ajax({
    url: "/search/test/",
    cache:'false',
    dataType: 'text',
    type:"GET",
    success: function(data){
      alert(data);
    },
    error: function(data){
      alert('error; '+ eval(error));
    }
  });
});

my view:

def test_ajax(request):
    time.sleep(20)
    print "in test_ajax"
    return HttpResponse("hell world")

url(r"search/test/$", test_ajax,name="dummy"),

First, I see the ajax call is returning error (because I get alert from error. but it does not show the error message)

Secondly, my view test_ajax is not called, because I would expect the print statement there to be executed, but it does not execute.

I cannot figure out what is going wrong here.

Answer 1

I have had similar issues in the past. The reason is you are allowing the default form submission. Try this and see what you get;

$('#submit-id-submit').click(function(e) {
   e.preventDefault();
  $.blockUI({message:'<h1><img src="{% static 'css/spinner.gif' %}" /> Just a moment ...</h1>'});
  $.ajax({
    url: "/search/test/",
    cache:'false',
    dataType: 'text',
    type:"GET",
    success: function(data){
      alert(data);
    },
    error: function(data){
      alert('error; '+ eval(error));
    }
  });
});

or simply return false

$('#submit-id-submit').click(function() {

  $.blockUI({message:'<h1><img src="{% static 'css/spinner.gif' %}" /> Just a moment ...</h1>'});
  $.ajax({
    url: "/search/test/",
    cache:'false',
    dataType: 'text',
    type:"GET",
    success: function(data){
      alert(data);
    },
    error: function(data){
      alert('error; '+ eval(error));
    }
  });
   return false;
});

By doing either of this, you prevent default action (in your case form submission I guess) you can read more about this here;