从多个无线电集创建动态JQuery Buttonset

时间:2016-06-27 12:07:35

标签: jquery jqueryi-ui-buttonset

我想创造一些非常简单的东西。我有代码创建动态"是" /"没有"基于从SQL传递的查询的问题,返回10到20个问题。

我已尝试使用JQuery Buttonset()但无法让它在动态div上运行。我最多可以使用第一组,然后全部失败。

我已经使用SPAN元素来创建简单的按钮,但这会产生一个问题,检查是否同时选择了是和否。目前创建的每个都像:

$.ajax({
    url: 'getQuestions.asp',
    dataType: "json",
    data: { area: area },
    success: function (data) {
        $('#output').html('<div class="center" id="date">'+name+' - Audit Area is '+area+'</div><div class="table"><div id="radio">')
        var len = data.length;
        for (var i = 0; i< len; i++) {
            $('#output').append('<div class="tr"><div class="col1">Q'+data[i].Qno+'.</div><div class="col2">'+data[i].Question+'</div><div class="col3"><span class="button" data-val="yes" name="Q'+data[i].Qno+'">&#10004;</span>&nbsp;&nbsp;<span class="button" data-val="no" name="Q'+data[i].Qno+'">&#10008;</span></div></div>')
        }
        noQuestions = i;
        $('#output').append('</div><div class="center" id="date"><div class="button wide" id="finish">Finish Audit</div></div>')
        $('.col2').each(function(){
            $(this).parent().find('.col1, .col3').height($(this).height())
        });
        $('#output').append('</div>')
    }
}); 

按钮是在长附加行中创建的,我使用namedata-val属性将其设为唯一。

如果我创建ID为#radio的DIV,则使用$( "#radio" ).buttonset();它只影响第一个#radio元素。如何通过一组动态的是/否问题实现这一目标?

1 个答案:

答案 0 :(得分:1)

也许这会有所帮助。当我想基于ajax调用更新jquery手风琴时,我发现我必须销毁然后重新初始化该元素以显示来自ajax的数据。代码行如下所示:
$( "#accordion2" ).accordion('destroy').accordion({header: "h3", collapsible: true, active: false, heightStyle: "content"});

结合.onreadystatechange看起来像这样:

function showLookups(str) {
if (str == "") {
    document.getElementById("accordion2").innerHTML = "";
    return;
} else {
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("accordion2").innerHTML = xmlhttp.responseText;
            $( "#accordion2" ).accordion('destroy').accordion({header: "h3", collapsible: true, active: false, heightStyle: "content"});
        }
    };
    xmlhttp.open("GET","faqlookup.php?q="+str,true);
    xmlhttp.send();
}}

我希望这在某种程度上有所帮助。我没有足够的声誉来发表评论......