No-postback database update with ASP.Net Gridview and jQuery AJAX

Question

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?

Community · Accepted Answer · 2017-05-23 11:49:20Z

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.

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Aug 1, 2014 at 20:29

mason

32.8k12 gold badges83 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Cody Hackjob Over a year ago

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.

mason Over a year ago

It's just a simple string concatenation. $("#"+ctrl)

Cody Hackjob Over a year ago

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 Over a year ago

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!

Collectives™ on Stack Overflow

No-postback database update with ASP.Net Gridview and jQuery AJAX

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related