create radio buttons and labels dynamically

advertisements

Ok what I want to achieve is that it creates this automatically for each record I got back from my webservice.

<label for="ZAALID_1">Zaal 1</label>
                    <input id="ZAALID_1" type="radio" name="RESERVATIE.ZAALID" value="1" MSGCHECKED="~IF(CHKPROP(@RESERVATIE.ZAALID,'1'),CHECKED,)~" />

I am calling this webservice with an ajax call. There is nothing wrong with this call. I tested it with printing down the values.

$.ajax({
            url: "~SYSTEM.URL~~CAMPAIGN.URL~/SelligentMobile/Webservice/WebService.asmx/getReservaties",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "{'DATUM_BEGIN':'2012-05-09 10:10:36','DATUM_EINDE':'2012-05-09 12:10:45'}",
            success: function (response) {
            var zalen = response.d;
              if (zalen.length > 0) {
                       $.each(zalen, function (index, zaal) {
                    createRadioElement(zaal.zaalId);
                    createLabel(zaal.zaalNaam,zaal.zaalId);
                });
            }
            }
        });

So I think there is an mistake in CreateRadioElement and createLabel. Here are these two functions.

function createRadioElement( id ) {
      var radioInput;
        try {
                var radioHtml = '<input id="ZAALID_' + id +  '" type="radio" name="RESERVATION.ZAALID" value="' + id + '" MSGCHECKED="~IF(CHKPROP(@RESERVATIE.ZAALID,' + 1 + '),CHECKED,)~ ';
                radioHtml += '/>';
            radioInput = document.createElement(radioHtml);
            } catch( err ) {
                radioInput = document.createElement('input');
                radioInput.setAttribute('type', 'radio');
                radioInput.setAttribute('name', 'RESERVATION.ZAALID');
            }
     return radioInput;
    }
    function createLabel(name,id) {
        var label;
        var labelHTML = '<label for="ZAALID_' + id + '">'+ name +'</label>';

        label = document.createElement(labelHTML);
        return label;
    }

Now another thing that I want to do is that is places these radiobuttons inside the div with id=zaalField here is the HTML of that div

<div id=ZaalField data-role="fieldcontain" class="knoppen_boven">
                <LABEL for=zaal>Zalen ter beschikking: </LABEL> 

                    //Here should go the radiobuttons and labels.

            </div>

Can anybody help ?

Kind regards

---EDIT---

 function getZalen()
    {
        var dateB = $("#DATUM_BEGIN").val();
        var dateE = $("#DATUM_EINDE").val();
        console.log(dateB);
        $.ajax({
            url: "~SYSTEM.URL~~CAMPAIGN.URL~/SelligentMobile/Webservice/WebService.asmx/getReservaties",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "{'DATUM_BEGIN':'2012-05-09 10:10:36','DATUM_EINDE':'2012-05-09 12:10:45'}",
            success: function (response) {
            var zalen = response.d;
            alert(JSON.stringify(zalen));
              if (zalen.length > 0) {
                    $.each(zalen, function (i, entity) {
                    $('ZaalField ').append(
                            $('<label />', { 'for': 'ZAALID_' + entity.zaalId, 'text': entity.zaalNaam }),
                            $('<input />', { 'id': 'ZAALID_' + entity.zaalId, 'type': 'radio', 'name': 'RESERVATION.ZAALID', 'value': entity.zaalId, 'MSGCHECKED': '~IF(CHKPROP(@RESERVATIE.ZAALID,' + 1 + '),CHECKED,)~ ' }), $('<br />'));
                });
            }
            }
        });
    }


  $(document).ready(function () {
            var data = { "d": [{ "__type": "Reservatie", "zaalId": 2, "opmerking": null, "zaalNaam": "Zaal 2" }, { "__type": "Reservatie", "zaalId": 3, "opmerking": null, "zaalNaam": "Zaal 3"}] };

            //            $.ajax({
            //                url: "/SelligentMobile/Webservice/WebService.asmx/getReservaties",
            //                type: "POST", contentType: "application/json; charset=utf-8",
            //                dataType: "json", data: { 'DATUM_BEGIN': '2012-05-09 10:10:36', 'DATUM_EINDE': '2012-05-09 12:10:45' },
            //                success: function (data) {
            if (data.d.length > 0) {
                $.each(data.d, function (i, entity) {
                    $('body').append(
                            $('<label />', { 'for': 'ZAALID_' + entity.zaalId, 'text': entity.zaalNaam }),
                            $('<input />', { 'id': 'ZAALID_' + entity.zaalId, 'type': 'radio', 'name': 'RESERVATION.ZAALID', 'value': entity.zaalId, 'MSGCHECKED': '~IF(CHKPROP(@RESERVATIE.ZAALID,' + 1 + '),CHECKED,)~ ' }), $('<br />'));
                });
            }
            //                }
            //            });
        });