Search code examples
jquerysharepoint-2010web-partsdocument-ready

How can I respond to a RadioButton's change event with jQuery on a SharePoint WebPart?


I'm getting close; after floundering around on an isolated promontory and sending forth filament, filament, filament out of myself (as recorded here), I added this to the end of the WebPage's *.ascx file (after the <%@ Assembly, <%@ Register, <%@ Import, and <%@ Control jazz, as well as an

<script>
$(document).ready(function () {
    alert("How does that grab you?");
    var s = $("#radbtnEmp").toString;
    alert(s);
    var t = $("#radbtnEmp").valueOf;
    alert(t.toString);
    $('input:radio[name=radbtnEmp]:checked').change(function () {
        if ($("input[name='radbtnEmp']:checked").val() == 'Employee?') {
            alert("radbtnEmp checked");
        }
        else {
            alert("radbtnEmp not checked");
        }
    });
});
</script>

...and I do see "How does that grab you?" when the page loads, as well as a couple of other alerts like so:

enter image description here

But I'm still not seeing a response to what I really need to respond to, that is the change event of the radio button (after toggling it from off to on).

Is there something wrong/missing with this jQuery?

Note: The RadioButton is created and assigned the ID like so:

var radbtnEmployeeQ = new RadioButton
{
    CssClass = "dplatypus-webform-field-input",
    ID = "radbtnEmp"
};

Solution

  • The problem was that trying to get a reference to the element using the ID I gave it was not good enough, as Sharepoint, or ASP.NET, or Chrome, or Tim Berners-Lee, or Al Gore, or somebody, was Welshifying the ID, as seen in "View Source"

    And so, I had to use a "find ID that ends with the ID name I assigned" syntax to get it to work. You can see the nitty-gritty here but basically what was needed was this (replaced the radio button with a check box):

    $(document).on("change", '[id$=ckbxEmp]', function () {