CODEWITHSUNDEEP
jqueryajax
PanicBus
PanicBus

Reputation: 576

If else statement in ajax call not working

For some reason the if else statement I have to weed out mistyped api searches is not doing its job. The ajax request is coming back with the no-results message div ALONG WITH the correct search result.

When there is actually no result it seems to filter okay and display the message.

Here's the ajax request along with the success logic:

$.ajax({
  url: "apis/api",
  type: "get",
  dataType: "json",

  success: function(data) {
    if (data.status == "success") {
      $("#results").html(data);
    } else { 
      $("#results").html("<div class='no-results'>No matches.</div>");
    }
  }
});

I also tried this success block, which doesn't actually make it to the else condition:

 success: function(data) {
    if ($(document).ajaxSuccess()){
      $("#results").html(data);
    } else {
      $("#results").html("<div class='no-results'>No matches.</div>");
    }
  }

I tried reversing the if else statements with a != but no luck.

Not sure why this wouldn't work. Please help, thank you!

Upvotes: 0

Views: 2461

Answers (3)

bkahler
bkahler

Reputation: 365

Based on the fact that you are making a call to an external API, I would assume that the object being returned does not have a "status" attribute at the root level, hence the data.status will always return nil. If that is the case your the first condition if (data.status == "success") will always evaluate to false, and the second part of the conditional will evaluate. Use a console.log or debugger to get a better idea of what the object you've returned contains, and then rethink the conditional.

Upvotes: 1

EternalHour
EternalHour

Reputation: 8621

I don't know what your HTML looks like, but seems that you may need to change get to post. Since you are also using json, seems that you need to specify the correct key in your json data array.

Similar to your data.status, your HTML should be something like data.html.

$json = array('status' => 'success', 'html' => '<div>Some HTML</div>');
echo json_encode($json);

Supposing that you are using PHP.

$.ajax({
  url: "apis/api",
  type: "post",
  dataType: "json",

  success: function(data) {
    if (data.status == "success") {
      $("#results").html(data.html);
    } else { 
      $("#results").html("<div class='no-results'>No matches.</div>");
    }
  }
});

Upvotes: 0

We Are All Monica
We Are All Monica

Reputation: 13344

It's not possible that both your if and else branches would execute in the same call, which means that you are making multiple requests to the server and getting multiple results.

This is most likely because you are sending a request every time the user-entered text changes. You need to debounce requests using a technique similar to that described in Debouncing JavaScript Methods. If the user types some text while you have a server request outstanding, you'll also need to cancel any pending requests before sending the new one.

Handling all of this correctly can be tricky, so I'd recommend using one of the many pre-built jQuery plugins for this task:

Upvotes: 1

Related Questions