0

I have a feature that allows the user to search the database for an item that matches the string they type in. For example, if they type in "Superman" it'll return whatever is in the database that is associated with Superman. Next to each item in the resulting list is a checkbox. If the user selects a checkbox, they can then press the "delete" button to remove that item from their list. I want to be able to select all of the checkboxes by pressing a "select all" button. Sometimes the lists are really long and if the user wants to delete all of the items, it would be time consuming to select and delete each one individually.

The checkbox is an asp:checkbox inside of an asp:TemplateField. The asp:TemplateField is inside an asp:GridView. Here is the checkbox code:

<asp:TemplateField HeaderText="Select">
                                    <ItemTemplate>
                                        <asp:CheckBox ID="uxSelectAdd"     runat="server" />
                                    </ItemTemplate>

For the "select all" button, I'm using a regular input type:

<input type="submit" value="Select All" id="uxSelectAll" />

Here are the contents of the js file I'm using in my resources folder(I'm using the alert function for debugging. For some reason, the alert pops up when the page loads, rather than when I click on the button. Clicking the button doesn't do anything):

 $(document).ready(function () {
    $('#uxSelectAll').click(function (e) {
        $(searchCheckBoxSelector).prop('checked', true);
        alert("helloooo");
    });
});

This is the js that is included in the front-end code at the top inside of a script tag:

<script type="text/javascript">
        var searchCheckBoxSelector = '#<%=uxSearchedComics.ClientID%>     input[id*="uxSelectAdd"]:checkbox';
    </script>

I know that .live is no good since it's been removed in the version of javascript that we're now using, so I tried changing .live to .click instead. That didn't work. I also tried adding this js to the front-end instead of what was already there, just to experiment and see if this works:

<script type="text/javascript">
        $(document).ready(function () {
            $('#uxSelectAll').click(function () {
                alert('hello world');
            });
        });
    </script>

For some reason, that didn't work either. Am I missing something obvious? I wanted to at least get an alert to work before I tried adding in code to check all of the checkboxes for me but not even the alert works. I'd appreciate any help or nudges in the right direction.

Here are the .js files I'm using in the front-end code:

<script src="../../../../resources/js/ItemSlotEdit.js" type="text/javascript"></script>
<script src="../../../../resources/js/plugins/jquery-1.11.0.js" type="text/javascript"></script>
HandleThatError
  • 598
  • 7
  • 29
  • 1
    Have you included jquery Js file? – Ehsan Sajjad Mar 02 '15 at 17:38
  • Yes, I've edited my question to show what .js files I'm using at the bottom of the ItemEdit.aspx file. – HandleThatError Mar 02 '15 at 17:49
  • If you only put alert in document.ready function without click event does alert comes? – Ehsan Sajjad Mar 02 '15 at 18:11
  • If I only put alert in the document.ready function in the front end code, I get an alert. But if I put it in the document.ready function of the .js file, I don't get an alert. – HandleThatError Mar 02 '15 at 19:26
  • I can get the alert to work in the .js file too. I'll edit the code from the js file into my question. Even though I've put the alert function inside of the click function, it alerts when the page loads rather than on the button click. When I click the button, nothing happens. There is no alert, and the checkboxes do not get checked. – HandleThatError Mar 02 '15 at 21:37

1 Answers1

0

I want to share the solution I'm using. I've kept the input element exactly the same and this solution is in a separate js file that I've included into the .aspx front-end file.

$(document).ready(function () {
    $('#body').on('click', 'input[type=submit]#uxSelectAll', function () {
        $(this).toggleClass("checked");
        var isChecked = $(this).hasClass("checked");
        $('input[type=submit]#uxSelectAll').val(isChecked ? "Unselect All" :  "Select All");
        $(this).prev().find(":checkbox").prop("checked", isChecked);
        return false;
    });
});

The reason the button wasn't working before is because the button was in a div that doesn't exist when the page loads. The div appears after the user clicks the search button and the search results come in. The search results are populated into a div that appears dynamically. So, in order to access the button you need to include a parent container in the selector. Otherwise the event delegation doesn't go through. I used the #body container because I have only a single Select All button and a single checkbox so it doesn't conflict with anything. The toggleClass function alternates between giving and removing the "checked" class on each click, and you can modify the text of an input element by using the .val property.

I hope this helps someone.

HandleThatError
  • 598
  • 7
  • 29