动态创建单选按钮和标签

时间:2012-05-09 09:17:16

标签: javascript jquery html ajax

好的我想要实现的是它为我从网络服务中返回的每条记录自动创建。

<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,)~" /> 

我用ajax调用来调用这个web服务。这个电话没有错。我通过打印值来测试它。

$.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);
                });
            } 
            }        
        });

所以我认为CreateRadioElement和createLabel存在错误。 以下是这两个功能。

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;
    }

现在我要做的另一件事是将这些radiobuttons放在div中,id = zaalField 这是div的HTML

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

                    //Here should go the radiobuttons and labels.

            </div>

有人可以帮忙吗?

亲切的问候

--- --- 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 />'));
                });
            } 
            }        
        });
    }

2 个答案:

答案 0 :(得分:1)

  $(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 />'));
                });
            }
            //                }
            //            });
        });

答案 1 :(得分:0)

function createLabel(id, name){
    var name = "Zaal 2";
    var label = document.createElement("label");
    label.setAttribute("for","RANDOM"+id);
    label.innerHTML = name;
    return label;
}

var label = createLabel(2, "Zaal 2");
$(document.body).append(label); //add it to the body, or to whatever else you want to add it to. 

此代码适用于我,而您编写的代码则不适用。