CODEWITHSUNDEEP
phpjqueryajax
Pamela
Pamela

Reputation: 684

Ajax success response and select option append

I am trying to make an ajax call to obtain the list of countries from my DB. The following are parts of the code:

country.php:

while ($country = $stmt->fetch(PDO::FETCH_ASSOC)) {
$data[] = $country['country'];
   }
echo json_encode(array("response"=>$data));
}

I am getting following response as:

{"response":["Afghanistan","Albania","Algeria","American-Samoa","Andorra","Angola"......

Ajax code:

//country select
$( "#country" ).focus(function() {
$.ajax({
url: 'country.php',
dataType: 'json',
contentType: 'application/json',
success: function(data) {
//console.log(data);
var formoption = "";
$.each(data, function(v)
{
var val = data[v];
formoption += "<option value='"+val+"'>"+val+"</option>";
});

$('#countries').append(formoption);
      }
   });
});

and in the form:

<select id="country" name="country" class="form_input required">
<div id="countries"></div>
</select>

somehow it is not working and i am unable to find the reason. Please note that i am a JavaScript newbie. I am using it as part of Framework7 code.

Expecting help from experts.

Upvotes: 5

Views: 10050

Answers (4)

Brian Patterson
Brian Patterson

Reputation: 1625

data only has one item named response which contains a json object.

when you json_encode in php, need to json.parse the response.

add before $.each...

data = JSON.parse(data);

then use... data.response in your "each" loop

$( "#country" ).focus(function() {
$.ajax({
    url: 'country.php',
    dataType: 'json',
    contentType: 'application/json',
    success: function(data) {

        data = JSON.parse(data);
        $.each(data.response, function(key, value) {
             $('#country')
                .append($("<option></option>")
                .attr("value",key)
                .text(value));
        });

    }
});
});

or something like that...

https://jsfiddle.net/0jLnnwrq/18/

Upvotes: 2

vinayakj
vinayakj

Reputation: 5681

Use $('#countries').append(formoption);

and remove div tag inside select tag & change select id to countries, use below html

<select id="countries" name="countries" class="form_input required">
</select>

you were wrapping options in div tag so thats not proper html. options should directly be appended to select tag.

Refer below sample code

$(function() {
  var resultFromAjax = {response: ["Afghanistan", "Albania", "Algeria", "American-Samoa", "Andorra", "Angola"]}
  var data = resultFromAjax.response

  var formoption = "";
  $.each(data, function(v) {
    var val = data[v]
    formoption += "<option value='" + val + "'>" + val + "</option>";
  });
  $('#countries').html(formoption);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="countries" name="country" class="form_input required">
</select>

Upvotes: 3

shuai
shuai

Reputation: 1

You can try this. 

$( "#country" ).focus(function() {
    $.ajax({
        url: 'country.php',
        dataType: 'json',
        contentType: 'application/json',
        success: function(data) {
            var formoption = "";
            $.each(data.response, function(k, v) {
                formoption += "<option value='"+v+"'>"+v+"</option>";
            });
            $('#countries').append(formoption);
        }
    });
});

Upvotes: 0

Daniel
Daniel

Reputation: 108

You can write this :

//country select
$( "#country" ).focus(function() {
$.ajax({
url: 'country.php',
dataType: 'json',
contentType: 'application/json',
success: function(data) {
//console.log(data);
var formoption = "";
obj = JSON.parse(data['response']);
for (i in obj) {
formoption += "<option value='"+obj[i]+"'>"+obj[i]+"</option>";
}

$('#countries').append(formoption);
  }
 });
});

Upvotes: 0

Related Questions