New to jQuery with ASP.NET, simplifying jQuery code?

Question

So I have the below little number on a ASP.NET page.

The page consists of a gridview that I'm happy with, there is a checkbox in each row and once checked enables other controls in row, a save button iterates through the rows and actions into database.

My question is, the below code works how I want it, however is there any neat tricks to simplify further? More of a question to expand my knowledge? :)

`<script type="text/javascript">
    $(document).ready(function () {

        //If checkbox in row is checked then
        $('[id^="MainContent_TCProcurement_TABPurchasing_GVQuotes_CBPurchased1_"]').click(function () {
            //Checkbox row id
            var idstr = this.id.replace('MainContent_TCProcurement_TABPurchasing_GVQuotes_CBPurchased1_', '');
            //Controls to alter
            var suppDDL = $("#MainContent_TCProcurement_TABPurchasing_GVQuotes_DDLSuppliers_" + idstr);
            var qtyPurchased = $("#MainContent_TCProcurement_TABPurchasing_GVQuotes_TBQuantity1_" + idstr);
            var ratePaid = $("#MainContent_TCProcurement_TABPurchasing_GVQuotes_TBRatePaid1_" + idstr);
            var buyer = $("#MainContent_TCProcurement_TABPurchasing_GVQuotes_TBBuyer1_" + idstr);
            var purchasedDate = $("#MainContent_TCProcurement_TABPurchasing_GVQuotes_TBDatePurch1_" + idstr);
            //If checked then remove disabled and enter some details
            if (this.checked) {
                suppDDL.removeAttr('disabled').removeClass('aspNetDisabled').removeAttr("style");
                qtyPurchased.removeAttr('disabled').removeClass('aspNetDisabled').removeAttr("style");
                ratePaid.removeAttr('disabled').removeClass('aspNetDisabled').removeAttr("style");
                buyer.removeAttr('disabled').removeClass('aspNetDisabled').removeAttr("style").val("<%= Session("loggedInUserName")%>");
                purchasedDate.removeAttr('disabled').removeClass('aspNetDisabled').removeAttr("style").val("<%= Date.Now()%>");
            } else {
                var newTBStyle = "font-family: Arial; font-size: 1em; background-color: rgb(235, 235, 228);";
                suppDDL.attr('disabled', 'disabled').addClass('aspNetDisabled').attr('style', newTBStyle);
                qtyPurchased.attr('disabled', 'disabled').addClass('aspNetDisabled').attr('style', newTBStyle);
                ratePaid.attr('disabled', 'disabled').addClass('aspNetDisabled').attr('style', newTBStyle);
                buyer.attr('disabled', 'disabled').addClass('aspNetDisabled').attr('style', newTBStyle).val("");
                purchasedDate.attr('disabled', 'disabled').addClass('aspNetDisabled').attr('style', newTBStyle).val("");
            }
        });

    });
</script>

Many thanks, Ollie

Ouch those asp.net id names hurt my eyes. Can't you use simple id's instead of the old-style autogenerated ones ? Maybe you can't, but check this out: http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series.aspx Not only will it be easier on the eyes, but probably a lot less error prone too. — Robert Hoffmann, Aug 23 '13 at 13:13
instead of `attr`, prefer `prop`. Instead of `.prop("style")` there's a `.css()` function in JQuery. JQuery offers powerfull selectors. You are using the `id^=` "id starting with" like with old "getElementByID". You can use a more specific (and more readable) selector like "all checkboxes in my table named ***". — TCHdvlp, Aug 23 '13 at 13:17

score 0 · Accepted Answer · answered Aug 23 '13 at 13:15

0

This is untested, but you could add a common class to the items you want to enable and disable like this

class="rowControl"

Then, adjust it like this:

var myControl = $("[id~="+idstr+"].rowControl"); 
...
if (this.checked) {
   myControl.removeAttr('disabled').removeClass('aspNetDisabled').removeAttr("style");
} else {
   myControl.attr('disabled', 'disabled').addClass('aspNetDisabled').attr('style', newTBStyle);
}

While it doesn't do everything you need, it would adjust ALL elements with that class. You can add back the parts that are missing (like setting specific values).

NOTE: var myControl = $("[id~="+idstr+"].rowControl"); will select all elements with the id containing idstr and class rowControl.

answered Aug 23 '13 at 13:15

davids

5,397
12
57
94

Thanks Robert for that, had a look into but going to leave as is, just because I have a few tabs in a tab container and with lots of controls etc in! Thanks as well, Karl Anderson thats what I would do, but just testing in page :) TCHdvlp, ahh okay, will look into! Thanks for that @davids, didn't look at it that way round!! – Ollie Chalk Aug 23 '13 at 13:22
Are you responding to Robert's comment, or my answer? – davids Aug 23 '13 at 13:23
No just failing to use the site, see above! – Ollie Chalk Aug 23 '13 at 13:24

New to jQuery with ASP.NET, simplifying jQuery code?

1 Answers1