CODEWITHSUNDEEP
jquery-ui
ChadM
ChadM

Reputation: 167

JQueryUI Checkboxes not clickable?

I'm a newbie to JQuery and JQueryUI and I've run into a bit of a problem w/ the .button() and .buttonset() on my project.

When I follow the example on the JQueryUI page everything works fine. My page, however, is creating buttons as a function and after they are created the button text shows up but the button is not clickable.

Here is the source link: http://mdihosting.com/5/Projects/form/test1.html

After the append in the source below this - $('#epcf-wrap').buttonset(); - does not result in a clickable button.

I've also tried $('#epcf-wrap').buttonset('refresh');

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.selectmenu.js" type="text/javascript"></script>
<script type="text/javascript" src="js/sliding.form.js"></script>
<script src="js/jquery.ui.selectmenu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="all" href="css/blitzer/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.ui.selectmenu.css" />
<script type="text/javascript">
$(document).ready(function(){
    $('input:checkbox').button();
                $.ajax({
            type: "GET",
            url: "xml/categories.xml",
            dataType: "xml",
            success: function(xml) {
                var select = $('#vendorcat');
                $(xml).find('Cat').each(function(){
                var title = $(this).attr('name');
                select.append("<option class='vendorcat' value='"+title+"'>"+title+"</option>");
                $('#vendorcat').selectmenu();
                });     
            }
        });

   $("#about").dialog({
    resizable: true,
    autoOpen:false,
    modal: true,
    width:400,
    height:400,
    buttons: {
    'Continue': function() {
    $(this).dialog('close');
    alert('You clicked continue');
    }, // end continue button
    Cancel: function() {
    $(this).dialog('close');
    } //end cancel button
    }//end buttons

    });//end dialog
    $('#results').hide();
    $('#btnOpen').click(function(){
    $('#about').dialog('open');
    }); //end click handler

});

</script>

<script type="text/javascript"> //onchange1 - Build Category Dropdown
 //Going for the single function length world record
 //Open categories.xml and find the node based upon the passed variable catname - Category Name
 //If the Category Name is equal to the argument passed build the variables, build the array, and output
function onchange1(catname){
    $.ajax({
            type: "GET",
            url: "xml/categories.xml",
            dataType: "xml",
            success: function(xml) {
                var table = $('<table>', {id:'opttable', align:'left'});
                tr = $('<tr>').appendTo(table); // create TR and append to TABLE
                td = $('<td>').appendTo(tr);    // create TD and append to TR
                // iterate all children of the current Category
                $(xml).find('Cat[name="' + catname + '"]').children().each(function() {
                    d = $(this)
                    if (d.text() === 'TRUE') {
                        $('<input>', {
                        className: 'checkbox',
                        type: 'checkbox',
                        id: d.attr('id'),
                        name: d.attr('name'),
                        checked: 'checked'
                        }).appendTo(td);
                    }
                    else {
                        $('<input>', {
                        className: 'checkbox',
                        type: 'checkbox',
                        id: d.attr('id'),
                        name: d.attr('name')
                        }).appendTo(td);
                    }
                    // create LABEL with the id attribute of the current
                    //   child of Cat and append to TD
                    $('<label>' + d.attr('name') + '</label>', { for:d.attr('id').toLowerCase() })
                                                .appendTo(td);
                    $('<br />').appendTo(td); // create BR element and append to TD
                });
                $('#epcf-wrap').empty().append(table);  // Append the table to its container
                $('#epcf-wrap').buttonset();//This doesn't work
            }
    });
}



 </script>
<script type="text/javascript"> //Form Submitted
function formsubmitted(){
    var resultsArr = []
    resultsArr += "<table><tr><td>";
    resultsArr += "Name: " + $("input[name='name']").val();
    resultsArr += "</td></tr><tr><td>";
    resultsArr += "Email: " + $("input[name='email']").val();
    resultsArr += "</td></tr></table>"

    $('#results').empty().append(resultsArr).show();
    $('#content').hide();
}
</script>

</head>
<style>
    span.reference{
        position:fixed;
        right:5px;
        top:5px;
        font-size:10px;
        text-shadow:1px 1px 1px #fff;
    }
    span.reference a{
        color:#555;
        text-decoration:none;
        text-transform:uppercase;
    }
    span.reference a:hover{
        color:#000;

    }
    h1{
        color:#ccc;
        font-size:36px;
        text-shadow:1px 1px 1px #fff;
        padding:20px;
    }
</style>
<body>
    <div>
        <span class="reference">

            <a href="javascript:modalbox();">Version popup could go here</a>
    <input type="button" id="btnOpen" value="Open">
        </span>
    </div>
    <div id="content">
        <h1>VRACC</h1>
        <div id="wrapper">
            <div id="steps">

                <form id="formElem" name="formElem" action="" method="post">
                    <fieldset class="step">
                        <legend>Vendor Details</legend>
                        <p>
                            <label for="vendorcat">Vendor Category</label>
                            <select id="vendorcat" name="vendorcat" onChange="onchange1((this).options[this.selectedIndex].value);">
                            </select>
                        <legend>Enterprise Processes</legend>

            <input type="checkbox" id="check1" /><label for="check1">Some Checkbox</label>
            <div id="epcf-wrap" class="epcf-wrap">
            </div>
                    </fieldset>

                </form>
            </div>
            <div id="navigation" style="display:none;">
                <ul>

                    <li>
                        <a href="#">Vendor Details</a>
                    </li>

                </ul>
            </div>
        </div>
    </div>

</body>

Upvotes: 1

Views: 1287

Answers (1)

jk.
jk.

Reputation: 14435

You need to add a for attribute to the label tags that corresponds to the id of the input. For whatever reason, they way you are adding the for attribute doesn't seem to be working. And, remove the toLowerCase(). It won't work unless they match case.

Maybe you just need a space after for:

$('<label>' + d.attr('name') + '</label>', { for: d.attr('id') })

But, if it still doesn't work, try:

$('<label for="' + d.attr('id') + '">' + d.attr('name') + '</label>'

http://jsfiddle.net/CL9Tt/

Upvotes: 1

Related Questions