Thursday, 19 June 2014

Records as radio buttons create dynamically

I have a requirement where a set of records has to be displayed as radio button dynamically, the record being fetched from DB.
Let’s start with deciding the ‘rdassets’ as the content holder of the radio buttons.
<div id="rdassets"></div>

We will do an ajax request to the controller with some parameter passed. The result will be checked for null, and then the fetched records will be looped through and appended to the ‘rdassets’. Here below is the ajax call along with the solution to add records as radio buttons in the page.

$("#BtnSearch").click(function () {
            var param = $("#somepagecontrol").val();
            $.ajax({
                url: "/Controller/Method/",
                type: 'POST',
                dataType: 'json',
                data: { Param: param },
                success: function (result) {
                    if (result != null) {
                        $.each(result, function () {
                            $("#rdassets").append(
                                $('<input />', {
                                    type: 'radio',
                                    name: 'rdoAsset',
                                    id: this. RequestId
                                })
                            );
                            $("#rdassets").append(
                                $('<label />', {
                                    'text': this.Item
                                })
                            )
                        });                       
                    }
                    else {

                    }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert('Error in fetching details.');
                }
            });
        });


The ajax response will look similar to the below sample:

[{"RequestId":110,"Item":"Samsung TV"},{"RequestId":103,"Item":"Sample Asset 003"},{"RequestId":206,"Item":"Toyota Cars"}]

No comments: