Additional client-side action for CheckboxList

Sep 16, 2011 at 1:18 PM

Hello,

I am trying to hook up an event to the click-event of the checkboxlist but it's not working. I am guessing because the awesome script is trying to do something else like building the list of Ids for the selected (checked) items. Is there a way I can achieve this?

        $('input[name="cbList"]').click(function () {
            do something here
        });

Coordinator
Sep 16, 2011 at 2:37 PM

try

 $('input[name="cbList"] *').click(function () {
            do something here
        });
Sep 16, 2011 at 2:50 PM

It's not working either. I think the js code is being interrupted by something else. I tried capturing the event for a single item on the list but that did not work either. I did that by explicitly referencing it -

$("#aeProp1").click(function () {
            alert('test');
        });

Coordinator
Sep 16, 2011 at 5:16 PM

in chrome go to 

http://mrgsp.md:8080/awesome/AjaxCheckBoxListDemo

do F12 ( the dev tools will open), click on console

write in console :

$('#aeShows0').click(function(){alert('a');});

hit enter

click on the first checkbox from Shows:

Sep 19, 2011 at 4:08 AM

Right it does work that way. So I modified my copy of the Awesome project and the file Views\AjaxCheckBoxListDemo\Index.aspx and did the check there. The code below is what I have, the only thing I added was the js alert code. No alert is being shown.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<AjaxCheckBoxListDemoInput>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        AjaxCheckBoxList Demo</h2>
    <%using (Html.BeginForm())
      {%>
    <%=Html.EditorFor(o => o.Hobbies) %>
    <br class="cbt"/>
    <fieldset>
        <legend>bound by parentId</legend>
        <%=Html.EditorFor(o => o.Shows) %>        
        <%=Html.EditorFor(o => o.Characters) %>
    </fieldset>
    <div class="efield">
        <div class="einput">
            <input type='submit' value='submit' />
        </div>
    </div>
    <%} %>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#aeShows0').click(function () { alert('a'); });

        });

     
</script>
</asp:Content>

Sep 20, 2011 at 2:08 PM

I need help as I still can't make this to work.

Coordinator
Sep 20, 2011 at 7:13 PM

ok, I've tried this in the live demo and it works:

 $(function () {
            $('#Showslist input').live('click',function () {
                alert('hi');
            });
        });
the .click will not because the inputs don't exist at document ready

Sep 21, 2011 at 12:33 PM

Right, it now works that way. Thanks again for the great help!