how to auto focus on time cell

Question

I have a scheduling application that shows a table of assets across the top, and time cells down the side. The time cells are incremented by 15 minutes from 12:00 am to 11:45 pm. When the page loads or refreshes I want the screen to focus on the current time cell. I think I am close with my code, but I am not sure why it is not working. Here is the jquery I am using:

$(document).ready(function()
{
    var now = new Date();
    now = formatTimes(now);
    alert ("Looking for " + now);
    $('.timeColumnOdd[innerHTML="4:15 pm"]').focus();


    var thisScript = '';
    var roleID = document.getElementById('roleID').value;
    if (roleID == 5)
    {
        thisScript = '../js/tentativeSchedule.js';
    }
    else
    {
        thisScript = 'schedule.js';
    }
    var script   = document.createElement("script");
    script.type  = "text/javascript";
    script.src   = thisScript;
    document.getElementsByTagName('body')[0].appendChild(script);
});    
    function formatTimes(tm)
    {
        var hour = tm.getHours();
        var minutes = tm.getMinutes();

        if(minutes < 15 && minutes > 00){minutes = 15;}
        if(minutes < 30 && minutes > 15){minutes = 30;}
        if(minutes > 30 && minutes < 45){minutes = 45;} 
        if(minutes > 45 && minutes <= 59){minutes = 0, hour = tm.getHours()+1}

        if(minutes<1){minutes='0'+minutes}

        var timePiece = null;
        if (hour >= 12)
        {
            hour = hour - 12;
            if (hour == 00)
            {
                hour = hour + 1;
            }
            if (hour < 10)
            {
                var timePiece = hour + ":" +  minutes + ' pm';
            }
            else
            var timePiece = hour + ":" + minutes + ' pm';
        }
        else
        {
            var timePiece = hour + ":" +  minutes + ' am';
        }       
        return timePiece;
    }

And here is the portion of php that creates the time column:

    $table->setCellAttributes(0, 0, 'class="timeColumn"');
    $table->setHeaderContents(0,0, 'Time');
    $now = new DateTime($pickedDate);
    $now = date_format($now,'U');
    $offset = ($now % 900);
    $now = $now-$offset;

    for ($i = 1;$i < 97; $i++)
    {
        $table->setCellAttributes($i,0,'class="timeColumnEven"');
        $table->setHeaderContents($i++,0, date('g:i a',$now));
        $now += 900;
        for ($x = 0; $x<2;$x++)
        {
        $table->setCellAttributes($i,0,'class="timeColumnOdd"');
        $table->setHeaderContents($i++,0, date('g:i a',$now));
        $now += 900;
        }
        $table->setCellAttributes($i,0,'class="timeColumnOdd"');
        $table->setHeaderContents($i,0, date('g:i a',$now));
        $now += 900;

    }

I know the time is currently hard coded, that's because I was trying to make it work without variable input.

score 1 · Accepted Answer · answered Oct 17 '13 at 21:15

1

I believe the problem is here:

$('.timeColumnOdd[innerHTML="4:15 pm"]').focus();

innerHTML is not a valid selector.

You can view a list of all the possible selectors here

If I were you, I would add a data attribute to your elements.

For example, for each time entry you would have (I'll use inputs for this example)

<input type="text" data-time="4:00 pm" value="" />
<input type="text" data-time="4:15 pm" value="" />
<input type="text" data-time="4:30 pm" value="" />

Then, to focus on it you could do

$('.timeColumnOdd[data-time="4:15 pm"]').focus();

answered Oct 17 '13 at 21:15

VVV

7,288
3
30
53

Thanks for the pointers but it is not quite right. I can I identify the th cell (based on the code above) that i need with this: var findthis = $(".timeColumnOdd:contains(" + now + ")"); However, the field is not text and is not an input, its a header. I need the table to scroll to the identified header so that the user sees the current time slot in the middle of the screen instead of being bothered with having to manually scroll to the desired time. – royjm Oct 18 '13 at 16:40
1

AHHHH I see... then you don't want the focus() method but a scrollTo function. Check out this answer http://stackoverflow.com/questions/6677035/jquery-scroll-to-element – VVV Oct 18 '13 at 17:44
Thanks again, I am working with the scrollto function but cannot make heads or tails of why it does not work for me. I have the index of the cell I want to scroll to, but it does nothing. I do notice that scrollto seems to be linked to a button in all examples. If a button is needed I cannot use the function. My users are more than just a little demanding...It needs to do this automatically. – royjm Oct 18 '13 at 20:56
It doesn't need a button... I've done it many times. If you can provide me with the html markup, I can show you how it's done... send me fiddle and I'll help you out. – VVV Oct 19 '13 at 00:36
Thanks for the help, I have been getting a bit frustrated. Here is the fiddle I put up: http://jsfiddle.net/royjm248/XKrzL/ – royjm Oct 21 '13 at 13:41
1

Here's a simple example using you code. You need to be careful though. 1) your HTML is not fully valid. Be sure to close your `` and `` tags like this `` and ``. 2) I couldn't get your whole script to work because you didn't include `schedule.js` and I was getting errors. So I simply commented your code out and concentrated on the scroll to code. 3) Using this: `var findthis = $(".timeColumnOdd:contains(" + now + ")");` is not recommended because if `now` is equal to `1:15 am`, you will have 2 values (`1:15 am` and `11:15 am`) – VVV Oct 21 '13 at 14:46
If you look at this fiddle http://jsfiddle.net/XKrzL/2/ you can look at the code at the bottom. Change it to suit your needs. – VVV Oct 21 '13 at 14:47
With your help and patience I was able to get this working. Sorry about any difficulties with the html, but it should have been correct...The issue may have been the fact that what is in my fiddle is generated html as this entire page is php. I may have to go through and make sure everything is escaped properly (mainly the closing tags). It is working in my application, but I could not get it working in the fiddle either. – royjm Oct 21 '13 at 20:15
I have edited the original fiddle to closer resemble my application code. I cannot figure out (other than the original is php and this is generated html) why it is not working with my formatTime function. I am new with fiddle but it shouldn't be that different??? No big deal but fiddle is a rather nice js tool and I wouldn't mind being able to utilize it more efficiently. http://jsfiddle.net/royjm248/6Wydj/ – royjm Oct 22 '13 at 14:17
The reason it's not working is because you're getting an error: var findthis = $(".timeColumnOdd:contains(" + pageTime + ")"); where pageTime is not defined. – VVV Oct 22 '13 at 14:47
You commented out 'pageTime' but you're still using it in the animate function. http://jsfiddle.net/6Wydj/16/ – VVV Oct 22 '13 at 14:49

how to auto focus on time cell

1 Answers1