Radio Buttons, Multiple Dialogs, Jquery

Question

Hey Guys-

So I'm trying to make my 3 radio buttons, each pop up with a different dialog box using jquery. (http://www.regrettablehookups.com/sandbox/contact.php)

This is what I have in the header:

//Radio Button
$("#radioset").buttonset();
//Button
$("#dialog_button").button({
    icons: {
        primary: 'ui-icon-newwin'
    }
});

// Dialog           
$('#dialog').dialog({
    autoOpen: false,
    width: 600,
    buttons: {
        "Okay": function () {
            $(this).dialog("close");

        },
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});


// Dialog Link
$('#dialog_button').click(function () {
    $('#dialog').dialog('open');
    return false;
});
});

And the code in my body:

 <div id="radioset">
    <input type="radio" id="kevin" name="radio" /><label for="kevin">Kevin</label>
    <input type="radio" id="natalie" name="radio" /><label for="natalie">Natalie</label>
    <input type="radio" id="kaitlyn" name="radio" /><label for="kaitlyn">Kaitlyn</label>
 </div>

Thanks guys! :)

Answer 1

Here's how I'd do it:

<script type="text/javascript">
    $(function() {
        $("#dialog1").dialog({
            autoOpen: false,
            buttons: {
                Kevin: function() {
                    $(this).dialog('close');
                }
            }
        });
        $("#dialog2").dialog({
            autoOpen: false,
            buttons: {
                Natalie: function() {
                    $(this).dialog('close');
                }
            }
        });
        $("#dialog3").dialog({
            autoOpen: false,
            buttons: {
                Kaitlyn: function() {
                    $(this).dialog('close');
                }
            }
        });

        $("#radioset").buttonset();
        $('#radioset input:radio').change(function() {
            var value = $(this).val();
            switch (value) {
                case 'kevin':
                    fireKevin();
                    break;
                case 'natalie':
                    fireNatalie();
                    break;
                case 'kaitlyn':
                    fireKaitlyn();
                    break;
            }
        });
    });

    function fireKevin() {
        $('#dialog1').dialog('open');
    }
    function fireNatalie() {
        $('#dialog2').dialog('open');
    }
    function fireKaitlyn() {
        $('#dialog3').dialog('open');
    }
</script>

<div id="radioset">
    <input type="radio" id="kevin" name="radio" value="kevin" /><label for="kevin">Kevin</label>
    <input type="radio" id="natalie" name="radio" value="natalie" /><label for="natalie">Natalie</label>
    <input type="radio" id="kaitlyn" name="radio" value="kaitlyn" /><label for="kaitlyn">Kaitlyn</label>
</div>

<div id="dialog1">Dialog 1</div>
<div id="dialog2">Dialog 2</div>
<div id="dialog3">Dialog 3</div>

By the way, you could just share one dialog window for all three subjects, but depending on your needs, that could easily get really ugly quick (say, you need different buttons for each subject, or the inner html needs to change accordingly, etc.).