1

I have this page where users need to check things off down a gridview. They don't want to click Edit and Save and all that. So using info from here and elsewhere I came up with the following. In the gridview I have this for the checkbox (where UserID if the DataKeyName for the record and also the row to update in the table):

<ItemTemplate>
<asp:CheckBox ID="cbIsActive" runat="server" Enabled="true" Checked='<%# Bind("IsActive") %>'  CssClass="cbActive"  data-id='<%# Eval("UserId")%>' />
</ItemTemplate>

The jQuery that executes on the checkbox change looks like this:

//Called from gridview checkbox control.
$(".cbActive").change(function () {
   var userid = $(this).data("id");
   //checkbox is nested in a span, so we have to dig down a litte.
   var ctrl = $(this).children(":first");
   var isChecked = (document.getElementById(ctrl[0].id).checked);
   $.ajax({
     contentType: 'application/json; charset=utf-8',
     url: 'Services/WebService.asmx/UpdateStatus',
     data: JSON.stringify({ strUserID: userid, strStatus: isChecked }),
     dataType: 'json',
     type: 'POST',
     error: function (err) {
       //blah blah
     },
     success: function (data) {
       //blah blah
     }
   });
 });

It all works fine. The only thing that bothers me (and yes, I know it's kind of trivial) is that document.getElementById in the middle of the jQuery code. I couldn't seem to find a more jQuery-ish syntax for that. Is there an alternative?

Cody Hackjob
  • 53
  • 4

1 Answers1

1

Yes.

Use $("#ELEMENTID") where ELEMENTID is the id of the element. The # indicates it's going to be an ID. For more info about jQuery Selectors, see documentation. Also, you can refer to this question for using jQuery to see if a checkbox is checked. There's a couple of ways to do it listed there, you might find a style you prefer.

By the way, no need to tag your question as JSON or AJAX or GridView if they're unrelated to the question. And your title should be more descriptive of your actual question, not just telling people about your application.

Community
  • 1
  • 1
mason
  • 31,774
  • 10
  • 77
  • 121
  • Thanks Mason, I appreciate the response and I apologize for mis-titling and mis-tagging my question. But I'm still stuck with the original problem. The $("#ELEMENTID") syntax does work fine when 'ELEMENTID' is a literal. But here that id name is in the ctrl variable, and that's why I had to resort to document.getElementById(ctrl). I couldn't figure out how to use the variable name in the jQuery selector. Is there a way to do that? I didn't see it in the jQuery documentation. – Cody Hackjob Aug 02 '14 at 11:28
  • It's just a simple string concatenation. `$("#"+ctrl)` – mason Aug 02 '14 at 14:55
  • Thanks again. I tried that and numerous variations, but still end up with undefined or an error. That document.getElementById(ctrl[0].id).checked syntax seems to be the only thing that works there for me. – Cody Hackjob Aug 06 '14 at 20:14
  • I thought so, but maybe I had the .checked part wrong. This seems to work: var isChecked = $("#" + ctrl[0].id).prop('checked'); Thanks so much for all you help! – Cody Hackjob Aug 12 '14 at 16:51