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

Question

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"
};

I changed the radiobutton to a checkbox. Then I found that the ID I assigned it (ckbxEmp) got "Welshified". SO, the following is needed to get it to work: $(document).on("change", '[id$=ckbxEmp]', function () { — B. Clay Shannon-B. Crow Raven, Jun 02 '15 at 21:41

score 1 · Answer 1 · answered Jun 01 '15 at 22:53

1

It's because you need

var s = $("#radbtnEmp").toString();
var t = $("#radbtnEmp").valueOf();

Instead of

var s = $("#radbtnEmp").toString;
var t = $("#radbtnEmp").valueOf;

Without being called explicitely, both valueOf and toString are functions, and since in JavaScript functions are objects, you can assign them to a variable, the result of alerting that is what you see...

answered Jun 01 '15 at 22:53

JSelser

3,510
1
19
40

Really? jsfiddle (using JSHint) does not complain abut the lack of parens - either way, it says the jQuery passes muster. Besides, that's not really my question - how can I get the radiobutton to respond to being changed (checked or unchecked) is the question. – B. Clay Shannon-B. Crow Raven Jun 02 '15 at 15:38
And besides, adding the parens made no difference. Either way is fine/not fine, depending on whether you like the alerts. – B. Clay Shannon-B. Crow Raven Jun 02 '15 at 15:45
1

I see. When you are creating your radio button you aren't assigning the "name" attribute that you select with jquery to listen for the change event, can you update your question with how the radio button element ends up being drawn in the page? – JSelser Jun 02 '15 at 16:41
1

The issue with that JsFiddle is that there's no "id" in your input to be selected and there's no jQuery loaded. Here's the working version => https://jsfiddle.net/clayshannon/jy6t5oru/ – JSelser Jun 02 '15 at 17:15
Actually, this is the one that works as I want: http://jsfiddle.net/clayshannon/jy6t5oru/3/ – B. Clay Shannon-B. Crow Raven Jun 02 '15 at 17:27
1

Looks good. If you want it to be uncheckable the is no escaping the checkbox, glad you found your solution. – JSelser Jun 02 '15 at 17:33

score 0 · Accepted Answer · edited May 23 '17 at 12:05

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 () {

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

2 Answers2