1

I'm using asp.net web forms 4.0 with the latest version of jQuery. My page consists of several buttons and inputs.

What I'm trying to do is set the focus on the next input field within a gridview. This input field has a specific class for this. The behaviour should only work when clicking on the button or when pressing ctrl + down arrow.

The class of my gridview is GridView and the class of my input is toControl. So this creates a table with class="GridView" with rows. Some rows have a td with an input with class="toControl".

I have tried several things with the .next, .nextAll and even indexing, but I'm guessing there is some specific solution I'm looking over.

The two functions I'm using for the button and the click event are:

$(document).keydown(function (e) {
        if (e.keyCode == 40 && e.ctrlKey) {
            e.preventDefault();
            NextError();
        }
    });

$('#ButtonNext').on('click', function () {
    NextError();
});

The NextError function:

 function NextError() {
                $('.GridView .toControl:first').focus();
  }

Right now the next error field is shown with a focus on the first toControl in my GridView. This code works. However, when I try something along the lines of the code beneath, it doesn't work.

$('.GridView .toControl').next().focus();

So even the basic functionality doesn't work. If I manage to fix this, I'll even have to go a step further. When a user fills in an input with toControl, then it loses that class. I'm thinking of working around this by just negating it with a verified class due to the difficulty of this.

So what exactly am I doing wrong here? I've already searched tons of stackoverflow questions, but the first focus was the closest I got.

EDIT: As requested, I have added the gridview generated html.

<table class="GridView" id="MainContent_GridView1" style="border-width: 0px; border-collapse: collapse;" rules="all" cellspacing="0">
        <tbody>
<tr class="errorRow" onclick="ShowCase(image link,image link)">
            <td>0003_CASE1</td><td>1</td><td>1</td><td>
                            <input name="ctl00$MainContent$GridView1$ctl02$GridViewValidate" class="toControl" id="MainContent_GridView1_GridViewValidate_0" type="number">
                        </td>
        </tr><tr>
            <td>0003_CASE2</td><td>2</td><td>1</td><td>
                            <input name="ctl00$MainContent$GridView1$ctl03$GridViewValidate" disabled="disabled" class="aspNetDisabled" id="MainContent_GridView1_GridViewValidate_1" type="number">
                        </td>
        </tr><tr class="errorRow" onclick="ShowCase('image link,image link)">
            <td>0003_CASE3</td><td>3</td><td>1</td><td>
                            <input name="ctl00$MainContent$GridView1$ctl04$GridViewValidate" class="toControl" id="MainContent_GridView1_GridViewValidate_2" type="number">
                        </td>
        </tr><tr>
            <td>0003_PAGE3</td><td>3</td><td>1</td><td>
                            <input name="ctl00$MainContent$GridView1$ctl05$GridViewValidate" disabled="disabled" class="aspNetDisabled" id="MainContent_GridView1_GridViewValidate_3" type="number">
                        </td>
        </tr>
    </tbody></table>
3
  • Could you show the HTML that gets generated for the GridView? Or at least a small sample of it (one that includes at least two "toControl" elements? That way we could try a few things, and post something that will definitely work for you. Dec 9, 2013 at 20:04
  • I have added the html as you requested.
    – whodares
    Dec 10, 2013 at 8:20
  • Thanks for updating your question. If would be great if there were more users like you, that were willing to stick around and improve / update their questions (in order to get higher quality answers). Dec 10, 2013 at 15:06

1 Answer 1

0

I would grab all the inputs that match your criteria, and then just keep track of where you are between "ctrl+down" keypresses.

Basically, what this does is keep a list of all the "toControl" controls in the jQuery object "errorControls", and it keeps track of your current index in that list of inputs using the index variable.

Each time NextError is called, index is incremented. If it's the last element in the list, "index" is set back to zero.

Here's the code:

var errorControls;
var index = 0;
$(document).keydown(function (e) {
    if (e.keyCode == 40 && e.ctrlKey) {
        e.preventDefault();
        NextError();
    }
});

$('#ButtonNext').on('click', function () {
    NextError();
});

// This function loads all the "toControl" controls 
// into an array on page load
$(function () {
    errorControls = $('.GridView .toControl');
});

function NextError() {
    errorControls[index].focus();

    index = index + 1;
    if(index >= errorControls.length) {
        index = 0;
    }
}

Here is a link to JSFiddle, showing this JS code working on your example HTML table: http://jsfiddle.net/kKhS2/

1
  • 1
    Thanks for the help. I had to change it a little bit due to changes in the code (I'm looking at my teammate now), but your suggestion worked perfectly.
    – whodares
    Dec 10, 2013 at 15:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.