CODEWITHSUNDEEP
javascriptjqueryajax
duff
duff

Reputation: 29

Jquery For Loop with AJAX

I'm trying to display a drop down menu of options that are from database (I used ajax to retrieve these). The retrieving of the data using ajax is working but what I'm having trouble is displaying them.

This is my code.

<div id='advocacy'>
    <select name='advocacy[]'>
        <?php
            while ($row = mysqli_fetch_array($data)){
                echo "<option>".$row['advocacy_name']."</option>";
            }
        ?>
    </select>

    <a href="#" id="add">Add</a>
</div>

and this is the jquery code

$(document).ready(function(){

    $("#add").click(function(){
        fetch();
    });

    $("#advocacy").on("click", "#remove", function(){
        $(this).parent("div").remove();
    });
});


function fetch(){
    $.ajax({
        url: "viewAd.php",
        method: "POST",
        dataType: "json",
        success: function(retval){
            for (var i = 0; i<retval.length; i++){
                addAd = "<div id='advocacy'><select name='advocacy[]'><option>"+retval[i].advocacy_name+"</option></select><a href='#' id='remove'>Remove</a></div>";

                $("#advocacy").append(addAd);
            }

        }
    })
}

now my expected output would be a single drop down menu but what I'm getting is a drop down menu for every retval[i].advocacy_name. How can i fix it?

Upvotes: 2

Views: 133

Answers (3)

AuxTaco
AuxTaco

Reputation: 5171

You're adding an entire <div> on every iteration of your loop. Only use the loop to generate <option>s:

success: function(retval) {
  let options = '';
  for (var i = 0; i < retval.length; i++){
    options += `<option>${retval[i].advocacy_name}</option>`;
  }
  let addAd = `<div id='advocacy'><select name='advocacy[]'>${options}</select><a href='#' id='remove'>Remove</a></div>`;
  $("#advocacy").replaceWith(addAd);
}

Or reduce the loop to a line:

success: function(retval) {
  let options = retval.map(r => `<option>${r.advocacy_name}</option>`).join('');
  let addAd = `<div id='advocacy'><select name='advocacy[]'>${options}</select><a href='#' id='remove'>Remove</a></div>`;
  $("#advocacy").replaceWith(addAd);
}

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

The $("#advocacy").append(addAd); should be outside the loop, and it should be replaceWith instead of append since you are overwritting the same element.

Moreover inside the loop you should only add the option elements.

function fetch(){
    $.ajax({
        url: "viewAd.php",
        method: "POST",
        dataType: "json",
        success: function(retval){
            var addAd = '';
            for (var i = 0; i<retval.length; i++){
                addAd += "<option>"+retval[i].advocacy_name+"</option>";
            }
            addAdd = '<div id='advocacy'><select name='advocacy[]'>'+ addAd + '</select><a href='#' id='remove'>Remove</a></div>';
            $("#advocacy").replaceWith(addAd);

        }
    })
}

Upvotes: 0

mike_t
mike_t

Reputation: 2691

You are trying to insert the whole SELECT component for each option of the returned array. Try this callback instead:

success: function(retval){
        var addAd = "<div id='advocacy'><select name='advocacy[]'>"
        for (var i = 0; i<retval.length; i++){
            addAd +="<option>"+retval[i].advocacy_name+"</option>";
        }
        addAd += "</select><a href='#' id='remove'>Remove</a></div>";    
        $("#advocacy").html(addAd);
}

Upvotes: 2

Related Questions