Jalal
Jalal

Reputation: 77

How can i append checkboxes to my ajax response

I am trying to create checkboxes dynamically for the data received from database.

jQuery and AJAX call:

$("#destinationName").autocomplete({
    source : function(request, response) {
        $.ajax({
            url: "${pageContext.request.contextPath}/showDestinations",
            type: "POST",
            data : { term : request.term },
            dataType : "json",
            success : function(data) {
                alert(data);
            }
        });
    }
});
<label>Destination</label>
<input type="text" id="destinationName" name="destinationName" value="${Form.destinationName}" class="field" />

Response received when I kept alert:

[ "abc", "def"]

Kindly provide your valuable suggestions. Being new to AJAX and jQuery I am facing a tough time in getting this result.

Upvotes: 1

Views: 3997

Answers (3)

mck
mck

Reputation: 988

You can use following code

success: function (data) {
                if (data.d != null) {

                    var temp = data.d;

                    if (temp != '') {

                        var Response = temp.split(",");

                        if ((Response != '') && (Response.length > 0)) {

                            for (i = 0; i < Response.length; i++) {
                                $("#resultDiv").append("<input type='checkbox' id='chk-" + i + "' name='" + Response[i] + "' /> " + Response[i]);

                            }
                        }

                    }
                }
            }

Upvotes: 0

progrAmmar
progrAmmar

Reputation: 2670

You can try something like this

success: function(data) {
  $("#resultDiv").html("");
  $.each(data, function(i, record) {
    $("#resultDiv").append("<input type='checkbox' id='chk-" + i + "' name='" + record + "' /> " + record);
  });
}

Upvotes: 1

Suraj Rawat
Suraj Rawat

Reputation: 3763

You can try this : http://jsfiddle.net/4wf3rq04/

    use $.each(function(){...})

Upvotes: 0

Related Questions