Contents tagged with .Net C# JQuery

  • JQuery selectors – selecting elements by a partial id

    Recently a coworker had a grid like the one below in an ASP.Net page. He wanted me too see if there was any way to make the javascript the manages the checkboxes easier to maintain.

    CheckboxGrid +

    The checkboxes on the left check or uncheck the day check boxes for the corresponding row. When the checkbox next to Barney Rubble is checked the grid looks like this:

    CheckboxGridDays

    The SO button checks all signoff checkboxes in the grid and when it is clicked the grid looks like this:

    CheckboxGridDaysSO

    The original programmer had a load of javascript to select the day checkboxes for the row, and to select all of the signoff checkboxes he did a post back to do the work on the server.

    Right away I knew this would be easy to do with JQuery. The only problem that I had was how to get just the day checkboxes or just the signoff checkboxes. Luckily, all of the day checkbox Ids had the word “Day” in them and the signoff checkboxes had the words “IsSignedOff” in their Ids.

    Here is how I check all of the day checkboxes in the row that the select all checkbox resides in:

    The function call from the select all checkbox’s onclick event:

     

    <input id="ctl00_ContentPlaceHolder1_grdTest_ctl03_SelectAll" type="checkbox" onclick="javascript:onSelectAll(this);" name="ctl00$ContentPlaceHolder1$grdTest$ctl03$SelectAll" />

    I pass “this”, which is the checkbox, to the function. Now for the function that does the work:

    function

    onSelectAll(checkbox) {

     

    var cb = $("#" + checkbox.id);

     

    var td = cb.parent("td");

     

    var tr = td.parent("tr");

    tr.children().children(

    "input:checkbox[id*=Day]").attr('checked', cb.attr('checked'));

    }

    Let’s break the function down. It has to get checkboxes with html like this:

    <td style="border-color: Black; border-style: Solid;">

    <input id="ctl00_ContentPlaceHolder1_grdTest_ctl03_Day1" type="checkbox" name="ctl00$ContentPlaceHolder1$grdTest$ctl03$Day1" />

    </td>

    The actual select all checkbox is passed as an argument. I then get the JQuery handle to that checkbox by using a JQuery id selector built using the actual id of the checkbox passed in.

    Next I get the TD that contains the select all checkbox using the JQuery parent function on the checkbox. Then I get the TD’s parent row using the JQuery parent function on the TD.

    Now that I have the rows I can get all of the checkboxes that are descendent children of that row, but I only want the checkboxes that contain the string “Day” in their ids. Remember, that last checkbox in the row has “IsSignedOff” in it’s id and the first one in the row is the select all checkbox.

    Using a css selector of input:checkbox[id*=Day] says give me the input controls that are of type checkbox that have an id that contains the string “Day”. The *= is the JQuery operator for contains.

    So this function gets me all of the day checkboxes and sets their checked attribute to the checked attribute of the select all checkbox that initiates the function call.

    The last piece is to get the is signed off checkboxes in all rows, one per row. This is really easy. The button html looks like this:

    <input type=”button” onclick="javascript:checkSignOffs();" value=”Sign Off” />

    The function is this:

    function

    checkSignOffs() {

    $("#grdTest input:checkbox[id*=IsSignedOff]").attr('checked', true);

    }

    It has to get checkboxes with html like this:

     

    <input id="ctl00_ContentPlaceHolder1_grdTest_ctl03_IsSignedOff" type="checkbox" name="ctl00$ContentPlaceHolder1$grdTest$ctl03$IsSignedOff" />

    The selector says for a table with an id of “grdTest”, get me the input controls of type checkbox that have an id that contains the string “IsSignedOff”. When JQuery gets the set of checkboxes, set the checked attribute of each one to checked.

    Not  bad for a few lines of code. Now maintenance will be much easy. We ripped out alot of javascript, removed a post back and best of all, I now have JQuery in another application.

    If anyone has a cleaner, more concise way of doing this please leave a comment. I know I can get the table row in the first set of code easier, I just need to figure it out. I will post an update when I do. I was in a hurry to share this :0)

    Read more...

  • Toggling visibility with JQuery

    There is a subtle issue with the JQuery toggle method. I had a page that had a div set up similar to this

     

    <div id="divGoodbye" style="border: 1px solid green; visibility: hidden; float: right;">Goodbye</div>

    I was trying to toggle it from not visible to visible by doing this

     

    function toggleGoodbye() {

    $("#divGoodbye").toggle();

    }

    It didn’t work; however, if the div was initially styled with visibility:visible it worked perfectly. So I logged a bug report and the JQuery team got back to me with this

    In jQuery, visibility is defined as taking up no space in the document.
    Most commonly that would be via {{{display:none}}} or {{{width:0}}}. There
    are other ways that an element might not be visible in the browser's
    viewport, including {{{visibility:hidden}}}, {{{opacity:0}}}, {{{margin-
    left:-10000px}}}, or being completely obscured by other elements higher in
    the {{{z-index}}} order. Those do not count as hidden as far as jQuery is
    concerned.

    If you need to use the {{{visibility}}} (or {{{opacity}}}) attribute as
    your method of making an element invisible, just track and toggle it
    yourself.In jQuery, visibility is defined as taking up no space in the document.
    Most commonly that would be via {{{display:none}}} or {{{width:0}}}. There
    are other ways that an element might not be visible in the browser's
    viewport, including {{{visibility:hidden}}}, {{{opacity:0}}}, {{{margin-
    left:-10000px}}}, or being completely obscured by other elements higher in
    the {{{z-index}}} order. Those do not count as hidden as far as jQuery is
    concerned.

    If you need to use the {{{visibility}}} (or {{{opacity}}}) attribute as
    your method of making an element invisible, just track and toggle it
    yourself.

    So I changed the style to this

     

    <div id="divHello" style="border: 1px solid red; display:none; float:left;">

    Hello

     

    </div>

    This works every time as expected. Hopefully this will save someone a bit of frustration. All scenarios worked in IE7, Firefox and Safari.

     

    Read more...