CODEWITHSUNDEEP
jqueryjqueryi-ui-buttonset
Hyperjase
Hyperjase

Reputation: 127

Create dynamic JQuery Buttonset from multiple radio sets

I am trying to create something quite simple. I have code which creates dynamic "yes"/"no" questions based on query passed through from SQL, returning anywhere from 10 - 20 questions.

I've tried to use JQuery Buttonset() but can't get it to work on dynamic div's. At the most I can get it to work with the first set, then all after fails.

I've resorted to using SPAN elements to create simple buttons, but this then creates a problem checking whether yes and no are selected at the same time. Each one is created currently like:

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

The buttons are created in the long append line, which I have made unique with name and data-val attributes.

If I create a DIV with an ID of #radio, then use $( "#radio" ).buttonset(); it only affects the first #radio element. How would I achieve this with a dynamic set of yes/no questions?

Upvotes: 1

Views: 95

Answers (1)

Trialsman
Trialsman

Reputation: 359

Maybe this will help. When I wanted to update a jquery accordion based on an ajax call, I found that I had to destroy and then re-initialize the element to display the data from ajax. The line of code looks like this:
$( "#accordion2" ).accordion('destroy').accordion({header: "h3", collapsible: true, active: false, heightStyle: "content"});

Combined with a .onreadystatechange it looks like this:

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

I hope this helps in some way. I don't have enough reputation to comment...

Upvotes: 1

Related Questions