Harnish Kumar Harnish Kumar - 3 months ago 33
Ajax Question

How to list bootstrap dropdown item values from database using ajax call?

I am having a Bootstrap dropdown in my HTML which when clicked should list values from postgres database through AJAX request

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Region/Country
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#"></a>
</li>
</ul>
</div>


This is my PHP service code which gets called by AJAX when the dropdown is clicked:

$result = pg_query($dbh, "SELECT country from countries");

if (!$result) {
echo "An error occurred.\n";
exit;
}
$features = array();

while ($row = pg_fetch_array($result)) {
$features[] = array("country" => array($row[0]));
}

$result_feature = $features;

echo json_encode($result_feature);


I had tried something like below

$(".dropdown-toggle").dropdown({
source: function (request, response) {
$.ajax({
url: 'KFRI_Service.php',
dataType: 'json',//since you wait for json
data: {
'service': 'dropdown'
},
success: function(json){
//now when you received json, render options
$.each(json, function(i, option){
var rendered_option = '<li><a href="#">'+ option.country +'</a></li>';
$(rendered_option).appendTo('.dropdown-menu');
})
}
})

}
})


current dropdown

Answer

Something like this:

$.ajax({
  url: 'url',
  dataType: 'json', //since you wait for json
  success: function(json) {
    //now when you received json, render options
    $.each(json, function(i, option) {
      var rendered_option = '<li><a href="#">' + option.country + '</a></li>';
      $(rendered_option).appendTo('.dropdown-menu');
    })
  }
})

And by the way - since frontend is waiting for JSON, you don't always echo your text, for example you need to write an error message:

if (!$result) {
  echo "An error occurred.\n";
  exit;
}

That's bad - because on client side JQuery will try to parse JSON response and will silently fail in case of error.

Should be done like this:

if (!$result) {
  echo json_encode(['error' => 'An error occurred.']);
  exit;
}

Now it can easily be checked on client side:

success: function(json){

  if (json.error) {
    alert(json.error);
  } else {
    // do your stuff
  }

}