CODEWITHSUNDEEP
javascriptjqueryajaxdjango
user2540074
user2540074

Reputation: 41

jquery ajax call not executing alert inside function call

I have no idea why this does not work:

$.get("/some/url/", function(event) {
    alert('hey');
});

I can see the response get executed in the console in Firefox when I click the button, and I can see it succeeded (200 OK). I can also see the response from the web server is correct... so why doesn't the alert inside the function call work? The alert works outside the function call.

Here is the whole block for context:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/static/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#some_id").click(function(event) {
            $.get("/some/url/", function(data) {
               alert('hey');
            });
        });
    });
</script>

I am using Django if that makes a difference.

EDIT: I have since changed my view from an HTTPResponse to JSONResponse and now the ajax call doesn't fail and I can throw the alert. Thanks to everyone who suggested a type issue, still not sure why HTTPResponse would deliver the object but the ajax call would consider that a "failure". Special thanks to Miguel Lattuada and JRodDynamite for helping me get on the right track.

EDIT2: For those curious, my view (Django) was returning this:

return HttpResponse(response, content_type='application/json')

and I changed it to this:

return  JsonResponse(response, safe=False)

That seemed to make ajax happy for some reason and cause the success function call to succeed.

Upvotes: 0

Views: 921

Answers (3)

mplungjan
mplungjan

Reputation: 178375

My guess is you submit your page.

Try this

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  $("#some_id").on("click",function(event) {
    event.preventDefault(); // cancel the event - not needed on type=button though
    $.get("/some/url/", function(data) {
       window.console&&console.log('hey');
    });
  });
});
</script>
</head>
<body>
<button type="button" id="some_id">Click</button>
</body>
</html>

this assumes the return value from /some/url/ is valid object - the console should tell you

Upvotes: 1

gesiud
gesiud

Reputation: 106

Try to use the Promise mechanism:

$.get("/some/url/").done(function() {
    alert( "1" );
  })
  .fail(function() {
    alert( "2" );
  })
  .always(function() {
    alert( "3" );
  });

Also, you can use $.ajax() function to test if connection is correct

Upvotes: 0

JRodDynamite
JRodDynamite

Reputation: 12623

The result is probably not in JSON format, so when jQuery tries to parse it as such, it fails. Try validating the JSON.

If the response is not in JSON format then try specifying the datatype. If it is returning a simple text then specify text.

$.get("/some/url/", function(data) {
    alert('hey');
}, "text");

Upvotes: 0

Related Questions