Can't get javascript fill working with div id class and div class elements

[Brad Stauf]

I'm trying to generate rules for a site to make reservations for sports activities on certain days, this site uses Bootstrap.  When I inspect the elements (following the FAQ on working with div & span) neither method 1 or 2 seems to work.  Method 2 wants something like a jsname to find, this form seems to have nothing like that (I can see it in the sample Google form from the FAQ).  Method 1 wants the action script with type 'document' (in the dev console Network tab) but the row with type document has a blank name; where the action script appears the type column is blank so I can't seem to use either of these methods to help generate a rule using Query String Parameters.  I looked at all rows in the network tab trying to find Query String Parameters and none appear anywhere.

The form lists the days of the week using code like this:

<div id="" class="DatePicker-module__dateDayItem___27kjP"><div class="DatePicker-module__dayLabel___3QlSy">Thursday</div><div class="DatePicker-module__dateLabel___1LiCL" style="">15</div></div>

Each day of the week is the same except for the name like "Thursday" and the incrementing number before the last close-div tags (15, 16, 17).

I tried this rule document.querySelector('[DatePicker-module__dayLabel___3QlSy="Thursday"]').click(); 

Result was this:

Error: Cannot read properties of null (reading 'click')

There doesn't seem to be anything in this part of the form except "div class" and "div id class" so I'm not sure autofill will work here.  Any suggestions are greatly appreciated.

[Autofill Extension]

While I cannot provide an exact solution for your situation (try StackOverflow.com), I can tell you that the reason you're getting "cannot read properties of null" error is because document.querySelector('[DatePicker-module__dayLabel___3QlSy="Thursday"]') doesn't exist. This command is trying to find an element that looks like this, which doesn't exist:

<div DatePicker-module__dayLabel___3QlSy="Thursday"></div>

Assuming the only unique things in the date selector are the week name and number inside the div, then on a high level what you want to do is something like this:

// 1. Loop though all day elements
(Array.from(document.querySelectorAll('.DatePicker-module__dateDayItem___27kjP'))).every((el) => {
  // 2. If it contains the string you want, then click on it
  if (el.textContent.includes('15')) {
    el.click();
    return false;
  } else {
    return true;
  }
});

[Brad Stauf]

Thanks for looking in on this, I'll start with that.  Not a java programmer so I'm trying to learn as I go.

[Brad Stauf]

The autofill javascript shows up in the chrome dev console as executing, but nothing happens, the day is not clicked.  I tried a few things like mangling the selector (DatePicker etc) to try and force an error and using a higher level selector than the 27kjP which is the same for each day but no change, it still just says it was executed. I tried using querySelector instead of querySelectorAll just to see what happened thinking it might select the first 2ykjp and "click" on it (when clicking on a date, the list of sports classes on that date show up below) and then it got an error, "object null is not iterable (cannot read property Symbol(Symbol.iterator))".  So it seems like the initial version is not really validating against selectors in the document or I should have been able to get it to throw an error with an invalid name.

I took a look at stackoverflow, I've heard of it before but had never joined but I may have to try that next.

[Autofill Extension]

Hmm...there's a chance that, like you find on more and more modern forms, they are using some JavaScript to try and force people to manually interact with the date widget using the mouse.

If you give me the URL of the form with this date widget I can try to come up with a JS snippet for you that auto-selects a date.

[Brad Stauf]

I really appreciate your help with this, it's above & beyond what anyone would expect.  The url is here https://www.ymcanoco.org/ice/adult-hockey/adult-recreational-hockey and  you don't need to select a location or have a logon or anything.  Just click on Thursday the 15th for example and you'll see a couple sessions pop up.  My next step would be to then pick a specific session which will have it's own additional drop-downs and points where I would enter my login information but I figure if I can get past step 1 it's probably a similar technique and I'll hopefully learn enough to make the rest of it work.

They had an older version of this registration app that didn't use bootstrap and I had that all working using a combination of text fill and javascript, it had some more traditional html elements that I could key on but this version is completely different so I'm not sure if what I'm trying to do can even work.  The whole point is to automate this so I don't have to a) wake up at 4:30 in the morning to register and b) remember to sign up for every session 2 days ahead of time.

Thanks again!

[Autofill Extension]

Hey you're welcome :-).

I just had a chance to look at your site and I found out why it wasn't working: the date picker is actually inside of an iframe that has a different domain, so the site filter was probably blocking the JS code from executing. This rule successfully auto-selected the 15th (by chance my untested code above worked ^^):

Notice the different domain in the site filter. Here's a recording of the auto-select in action:

https://www.loom.com/share/ead3503119d346d1a855ce0b0a21f113

This should get you started. Automating the rest might be a bit tricky because you might have to wait until the elements are dynamically added to the document before interacting with them via JavaScript.

Good luck!

[Brad Stauf]

That's got stage 1 working, thanks!  I had noticed the upacedev url in the console but I didn't realize I had to set the code to look for that site. I saw some stuff in the autofill faq about dynamically generated values so I'll keep banging away on it.  Have a great day and thanks again for your help!

[Autofill Extension]

Here's a trick that I use myself before I write a single line of JS code: press F12 and got to the Console tab. You can enter any JS code here to preview whether it will work once it's added as an Autofill rule. If the code doesn't work in the console, it's also not going to work as a rule. This should save you some thrashing time.

[Brad Stauf]

Thanks, I appreciate the tips. I've been trying to get this to work once the table of available sessions shows up but that turns out to be pretty tough.  Been reading posts and answers on stackoverflow and trying some ideas from there.

Once the sessions show up, each session is a table row and the text content (name of the session I'm looking for) seems to be in one cell using the <td> tag but the element you actually click on seems to be the adjacent table cell, not the one with the actual text content.

So some kind of column offset seems called for unlike stage 1 where once you get the element with "Friday" or whatever I would be looking for, you could "click" on it and trigger the next container to show up.

There is no more <div class id> like there was at the first stage so I've been trying to use different things as the container to call up an array and search but no joy so far.  I was actually a mainframe programmer back in the days of COBOL and CICS

and even Assembler code but by the time Java came along I was doing database administration so I never got deep into any of the really object oriented languages.  I get the concepts but the syntax is still tough; my fault since I never did it for a living or a hobby.

I'm not sure how stable the table structure is, I know it's generated dynamically but it stays the same until somebody at the YMCA changes the schedule by adding or dropping a session, and then all bets are off as far as "is the session

I want the first row", second row in the table etc.  One thing I did see just to make it all simpler is that they always start the schedule with today, and the session I want is always two days from now (48 hour signup lead time) so I don't really need to loop through the array,

I can just select the #2 offset DatePicker element (today is zero) and poof, got the right one.  "If" they keep doing it this way but the nice thing is if I can get this working, I don't need a version looking for "Friday" and one looking for "Thursday", ti's always "today plus 2".

But I've got the array loop you showed me so I can always grab the right day regardless.

[Autofill Extension]

Okay if you tell me what you want clicked in each stage, I can try to hack something together...

[Brad Stauf]

That's really kind of you, thanks!

Next Tuesday the 20th is a good target.

Normally I would use windows task scheduler to open a chrome browser session on Sunday morning so the zero position DatePicker element would be Sunday and Tuesday would be position 2 so this line would select Tuesday: document.querySelectorAll('.DatePicker-module__dateDayItem___27kjP')[2].click();

I put in a 4 second pause to give time for the table of sessions to populate so right now the code looks like this (the target date position is 4 instead of 2 because today is Friday):

(function myLoop(i) {
  setTimeout(function() {
    console.log('hello');
    document.querySelectorAll('.DatePicker-module__dateDayItem___27kjP')[4].click(); //  your code here                
    if (--i) myLoop(i);   //  decrement i and call myLoop again if i > 0
  }, 4000)
})(1);    
//next step

The session I would want says "Adult Recreational Hockey Novice/Intermediate - Carlston Ice Arena" so clicking on the down arrow to the right brings up some drop down lists for 'Start Time' etc.  The only field that needs to be chosen is start time (6:30) and then I would click the 'Reserve' button.  Then it prompts for a login, I enter my email and click on 'Password' button, then enter my password and click on the 'Login' button.  I think that's it, I can't see past there right now because it's too far ahead to actually reserve anything.  The session name is different on different days but it's always something similar to this, sometimes it says "Advanced" or "Intermediate" but it seems to stay consistent for each Tuesday or for each Thursday etc.

I'm not sure if my login would stay active across sessions so I'm not sure right now if I would need to log in every time.  Normally I use the phone app to do all this, they just reactivated this web page reservation system a little while ago so I haven't used this new version to reserve sessions yet.  I haven't really looked at the email/login entry part right to see if a regular text fill would work here.

Thanks a lot for any further help!

[Brad Stauf]

FYI I got the time selection (6:30 am) and duration working with the standard autofill 'select' statement using the element ids st-1626 and du-1626 so that's one part working (the easy part of course, once the proper session is selected and expanded).

The 'reserve' button I don't have working but I haven't spent much time on it yet.

[Autofill Extension]

This will get you to the Reserve popup. You can use this code as a template:

// 1. Loop though all days
(Array.from(document.querySelectorAll('#container .DatePicker-module__dateDayItem___27kjP'))).every((elDay) => {

  // 2. If it contains the string you want, then click on it

  if (elDay.textContent.includes('20')) {
    elDay.click();

    // 3. Wait for search results to appear
    const nTimer = setInterval(() => {
      let nlRows = document.querySelectorAll('#search-results tr');
      if (nlRows.length > 0) {
        clearInterval(nTimer);

        // 4. Loop through all locations
        (Array.from(nlRows)).every((elLoc) => {
          // 5. If it contains the string you want, then click on the arrow
          if (elLoc.textContent.includes('Adult Recreational Hockey Novice/Intermediate')) {
            elLoc.querySelector('.py-2.px-3')?.click();
           
            // 6. Loop through all columns in location form
            const elLocForm = elLoc.nextSibling;
            (Array.from(elLocForm?.querySelectorAll('td'))).every((elCol) => {
              // 7. If it contains the start time, then autofill it
              if (elCol.textContent.includes('Start Time')) {
                const elStartTime = elCol.querySelector('select');
                if (elStartTime) {
                  elStartTime.value = '6:30 AM';
                  // 8. Press the Reserve button
                  elLocForm.querySelector('button')?.click();

                }
               
                return false;
              } else {
                return true;
              }
            });          

            return false;
          } else {
            return true;
          }
        });

      }

    }, 100);

   
    return false;
  } else {
    return true;
  }
});

[Autofill Extension]

P.S. Some things that may not be obvious...

100 param in setInterval() means to poll every 100 ms.

?. is an optional chaining operator, so if the object to the left of it doesn't exist, then it will fail quietly.

[Brad Stauf]

Thanks so much, I've been working on getting the email address filled in, I can see it's current value with document.getElementByClassName but I haven't been able to fill in the field using the .value function.  The value I assign shows up in the chrome dev console but doesn't appear in the actual HTML form so I'm still fiddling with that.

I see where you set the value for the start time by using another array with the .value function so I'm trying to do something similar.

[Brad Stauf]

The good news by the way is that this code will actually make the reservation if I'm already logged in to the web site from a prior reservation. I'm not sure if there is a time limit on staying logged in so I still need to figure out filling the email address, password button and password and I'm still working on it but you've been a huge help so thanks again.

[Brad Stauf]

I know you don't need 8,000 updates on my code mangling but I did figure out filling in the email field and pressing the 'register' button using querySelectorAll statements once I learned about getting attribute names and values and setting them.  It's not using arrays and looping and looking for text on buttons etc so if they change the structure again I'll have to change the code but now that I'm starting to understand it, that hopefully won't be a big deal.  Password field should be the same, looks like it may all work!

[Brad Stauf]

Spoke to soon, I can set the value of the email field and it shows up in the console and with querySelector.getAttribute but when I click on the 'Register' button (manually or using jscript) it resets the value attribute to null and throws an error asking for a valid email address.  If I type in an email address it's fine and to me it looks like exactly the same data in the value attribute.  And once I've typed in an email address, rerunning that line of jscript to try and overwrite the "value" attribute doesn't work any more.  Confused, but I think I read about this problem when using querySelector.setAttribute so still trying to get this to actually work and retain the value on the web page.

[Autofill Extension]

Are you saying once you get to the Reserve popup, you're having trouble autofilling the email field?

[Brad Stauf]

Yes but a little more complicated than that.  I can fill the email field and console.log shows the correct value in the chrome dev console but once the Reserve button is clicked, that email address is reset to null and the form pops up an error asking for a valid email address.  In fact the same thing happens with the 'Start Time' field that the code autofills, it "seems" to work because the form displays the start time that begins with "12:00 PM" but it doesn't "actually" work.  Just like the email field, when the Reserve button is clicked, that field is nulled out and an error is produced in the form.  If I have manually typed in an email address (which the form accepts), then the error because of the start time is "you cannot select an activity that begins in the past" because the Start Time value on the web page is not actually set, it is now null after clicking the Reserve button.

The entire start time field is actually something like "12:00 PM 4 of 20 slots available" depending on how many signup slots are still open. So I believe that the Start Time cannot be set or filled, it must be selected from the dynamic value that is created in that container.  If it is possible to use an array pointer (if that is the right description) or a drop-down "counter" like [0] or [1] then [1] would always be correct because the first option is always the placeholder like "Select start time" and the second option is always the actual correct value like "12:00 PM 4 of 20 slots available".

So, the start time field and the email field both "seem" to be OK when they are set/filled by javascript but in fact they are not; clicking on the Reserve button nulls them out.

I can send you my email address that I use to log on so you can see this behavior yourself but I can't post that on this forum, I'm sure you've seen the kind of spam email that comes as a result of posting here. I would need to email you directly to do that and I understand if you would rather not, this has become a very time-consuming exercise.  I am just very puzzled by the behavior of the Reserve button by wiping out object attributes; who cares if those attributes were keyed into the page or set by javascript?  They are the correct attribute names and valid values, at least in the case of the email field.

[Brad Stauf]

Could this be a browser issue?  I just noticed in my old version using autofill that for some reason autofill stopped working with chrome but still worked with firefox and edge to autofill the form.  Maybe not but sometimes it's the simple stuff.

[Brad Stauf]

tinkering with the start time field I found that if I use the autofill 'select' function to get index #1 (that's always the right value, index #0 is always "Start Time") I can press the Reserve button and it works.  If I use javascript statement "document.getElementById('st-1628').selectedIndex=1;' (on a session where st-1628 is the correct ID) it again looks like it works and the "12:00 PM 2 of 2 slots remaining" (or whatever is actually remaining) appears but when I click on Reserve, it nulls out the value in the console and on the web page and throws the error "cannot reserve a session in the past".  No idea how autofill is doing it's 'select' function but for whatever reason it works so I can always split the main javascript into sections to find the session, then run autofill to get the start time, then click the Reserve button.  That just leaves the email and password to figure out.  If I can leave a browser session logged in permanently then I don't need to enter those fields, I'll experiment with that over the next few days.

I was reading about the 'postback' function, could the problem be related to this and whether it gets triggered by manually interacting with the page vs. javascript entries?

[Brad Stauf]

To fill the email field maybe it needs a dispatchEvent, like a keypress event?  fooling around with that now.

[Autofill Extension]

Hmm....this form appears to use all sorts of JS code to ensure things are manually entered. It may be a candidate to try our alternative solution, which bypasses autofilling entirely by using JS to submit the form with all params expected by the server. Here's how in a nutshell:

1. Schedule a timeslot manually.

2. When you submit the form, monitor the Network tab. Click on the end point that the page submits the form info to. You can see all of the form params and values that are submitted to the server.

3. If the form uses hidden fields to store the values, you can use JS to update the hidden fields to the values you want; if the form accepts a GET submission, you can try and use JS to submit the form with all of the values you want appended to the URL you are submitting to.

More info on this technique (Method 1): https://www.tohodo.com/autofill/help.html#faq-q8

[Autofill Extension]

Another thing you can try is to simulate inputting text. Assuming you assigned the email element to elEmail, the code would look something like this:

elEmail.value = 'yo...@email.com';

elEmail.dispatchEvent(new Event('input', { bubbles: true }));

If firing 'input' alone doesn't work, then you can try firing the full chain of events that happens when you manually type into an input box. The order of events: 'keydown', 'keypress', 'input', 'keyup'. Revised code:

elEmail.value = 'yo...@email.com';

elEmail.dispatchEvent(new Event('keydown', { bubbles: true }));

elEmail.dispatchEvent(new Event('keypress', { bubbles: true }));

elEmail.dispatchEvent(new Event('input', { bubbles: true }));

elEmail.dispatchEvent(new Event('keyup', { bubbles: true }));

FYI this is actually what Autofill does under the hood for you automatically when you generate rules, hence they generally work pretty well.

More info about creating JS events here: 

https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events#triggering_built-in_events

[Brad Stauf]

Thanks, I will try monitoring the network tab.  I saw that in the FAQ but hadn't tried it yet.

I tried the top dispatchEvent and the keypress  dispatchEvent code but they didn't seem to work.  I'll work at it some more in case I had something wrong in the syntax.

The good thing is that I can stay logged in for several days (at least) so as long as I'm already logged in, I have it working now with a version of your code followed by autofill 'select' to fill in the start time (one of the very few elements that actually has an ID) followed by an autofill javascript step for the button click.

[Autofill Extension]

Cool, glad it's somewhat working :).

To stay logged in longer, try changing the session cookie expire time to something far into the future.

[Brad Stauf]

Great suggestion, just did that to bump it up from 24 hours to 3 days.  I'll make sure that works and then set it longer.

One thing I noticed, about the "active profile".

I have a "Master" autofill profile that calls 2 other profiles with delays using the javascript/autofill(profileid,delay).  That works great and I need the delay to wait for the session table to populate since I need to use the autofill-select function instead of javascript to fill in the start time.  All good but when the master profile is done running, the active profile left in the autofill "Form Fields" is no longer the Master profile, it's the last individual profile that I called as a step in the Master sequence (which is to click the 'Reserve' button).  So that means that next time I use taskscheduler to start the whole Master process again, it's no longer the active profile.  Instead the only thing that gets run is the "Click Reserve Button" profile which of course is the wrong thing to run at the beginning.  Is there a way to force the Master profile to remain as the active profile always?  I have the "only run active profile" checked to ensure that no other profiles but the Master gets run when the web page pops up so it seems the only other way is to remove the "Site" parameter from all profiles except the Master, then uncheck the "only run active profile" option so Autofill tries to run any and all profiles but only finds the Master.  Does that sound right?

[Brad Stauf]

Oops never mind, since I am running this in auto instead of manual mode that would try to trigger every profile on every web page I visit...duh...

[Brad Stauf]

The keypress sequence (4 lines) worked for setting the start time via javascript, thanks for that suggestion, now everything works in one javascript step as long as my session is still active.

I'm going through the data on the network tab as you suggested so I need to learn some more about what it's showing me in the various tabs. The 'Header' information says the get method is POST.

But here's what's interesting: when I fill in the email field manually and click on 'Login' it calls a CheckTheUser function and I see a bunch of information including some fields that are not listed on the form, not sure yet if they are hidden fields etc.  However when I use a querySelectorAll to set the attribute "value" to my email address in that field so that it shows on the form (and follow it with all the keypress dispatchEvents) and then click on 'Login', it nulls out the field, asks me to enter an email address but never even calls that CheckTheUser function.  So whatever problem I'm having with getting it to accept the value entered by javascript, is happening locally on the form.  There is zero network traffic in this case when it nulls out my value and asks for an email address.  Somewhere there must be logic validating something, maybe a hidden field that prevents the call to CheckTheUser.

[Autofill Extension]

Try to find what the email field name is when it's submitted to the server. If you can submit exactly what the server expects, then you can bypass all this crazy front-end validation stuff. You can also do a form post using JS.

[Brad Stauf]

I got to where the Query String parameters "should" be under Payload (this all works as expected at another free site I tried with my login just to make sure I understood how it should work) and there aren't any, it just says form data and it's my email address.  They are using a WebKitFormBoundary statement with some text like "Content-Disposition" and "form-data" to pass my email address along for validation, that's what is under Payload.  I can try copying this entire block completely and calling the API URL and see what happens.  I'm starting to look through stackoverflow for examples.

There are only 2 entries in the network tab, the first one (a POST to the CheckTheUser api URL described above ).  Then the second Network entry is a loading.svg? followed by a long hex string but it's a "GET" and the request URL includes /images/ which seems like it's not part of the validation, it's probably just returning what is displayd to the user to complete their login and enter their password.  Argh.

[Autofill Extension]

Do you have a test email account I can use to debug the Request popup?

[Brad Stauf]

I don't have a test email account, only a live one but so far they haven't disabled my account despite all my testing so it should be OK to use.  i'm putting some dashes in because of the spam that comes from this forum.

b-1-s-t-a-u-f a-t y-a-h-o-o d-o-t c-o-m  to me it looks like I would need to generate a form and submit it with a POST, I was seeing some examples on stackoverflow.  the good news is that the only form data it seems to send is my email so it's pretty simple but I haven't tried messing with it yet especially since editing the session cookies to keep my session alive for multiple days seems to work.  i'm on the site every day or two anyway.

[Brad Stauf]

Now it's stumbling over the 'Reserve' button even when I'm logged in.  If I select a session and start time manually and use this code from the console or from AF to click the button "document.querySelectorAll('#datepicker button')[2]?.click();" it works.

But if I use the script to select the session and start time and then click the button all in one script, it doesn't work, instead the popup window gives this error:

Sorry, you cannot make a reservation for a date in the past - 09/27/2022

The same error occurs if I manually click the 'Reserve' button (after the jscript picks session and start time but does not try to click the Reserve button).

The correct button (index [2]) is selected and highligted on the page when I run querySelectorAll; buttons with index 0 and 1 also exist on the underlying page in the #datepicker container, they are the arrows to move the date range backwards and forwards.  So it's something about the way the script is selecting the date and session apparently even though everything looks fine.  This seemed to all be working previously.

[Brad Stauf]

Troubleshooting this, when I run a 3-step profile where step 1 selects the date and session with javascript, step 2 uses AF to 'select' the first index start time and then step 3 is the one-line javascript 'click' statement, it works.

When I use an all-in-one script to select the first index start time, it doesn't work and all the rest of the code is the same.  Here's the code I put into the all-in-one script to set the start time followed by the click statement:

       document.getElementById('st-1626').selectedIndex=1;

        dispatchEvent(new Event('keydown', { bubbles: true }));

        dispatchEvent(new Event('keypress', { bubbles: true }));

        dispatchEvent(new Event('input', { bubbles: true }));

        dispatchEvent(new Event('keyup', { bubbles: true }));

            // 7. Press the Reserve button

                document.querySelectorAll('#datepicker button')[2]?.click();

It all "looks" like it works, the correct start time gets filled in.  I tried with double quotes around the index and around the elementID, same result.

[Autofill Extension]

Hey, I created a new account for myself to try and test this manually, but I couldn't even do that -- I either got "All Sports Reserved" under the Start Time dropdown or "There are no items available for reservation" when selecting the day,  so I wasn't able to do much.

Btw, have you heard of AutoHotkey? It might be a tool that can let you achieve what you want. With AutoHotkey you can define spots on the screen (using x/y coorindates) to auto-click and send keystrokes into input boxes. It does have its own scripting language, but it's a lot simpler than JavaScript.

https://www.autohotkey.com/docs/AutoHotkey.htm

If you want to get fancy, there's even a package that will allow you to do screen OCR and wrap logic around text is displayed in a region of the screen:

https://github.com/iseahound/Vis2/

For example, you can use Vis2 to scan the "out of stock" region of an online store, and when the text changes to a price, you can have AHk automatically click on add-to-cart and proceed with the entire checkout.

AHk is pretty powerful as it can hook into external libraries and Win32 API (e.g. https://www.autohotkey.com/docs/commands/DllCall.htm), so if you have experience programming DLLs you might find it a lot easier to get into than programming JS.

(Trivia: the Autofill version before v1 of the Autofill Chrome extension was coded entirely in AHk.)

[Brad Stauf]

I'll take a look at auto hotkey.  I tried a similar-sounding app for android but couldn't get it to work.

The reservation web site is really twitchy, one thing I ran into is after clicking on the day (like day+1 or day+2) sometimes the search results table (sessions for that day) was actually the sessions for the original day-zero so the search loop was always failing to find a match.  If you then clicked manually on day+2, the proper search results table for that day came up.  This never happened when I ran the javascript code from the console, but happened regularly when I ran it through AF in fully automated mode where a new chrome session started to trigger an AF profile.  Maybe the next step of looking for the session name happened too quickly so I put in a AF global delay to give the site more time to respond plus a brief timeout loop in the script after clicking on the day and I think I could use an onload function to make sure the site is fully loaded so I'm still playing with it.  Plus a few times the web site fails to respond and gets a http 500 error just for fun.  They mainly want people to use the smart phone app to sign up.

Re: "no items available", you have to be within 48 hours of the session to be able to sign up, maybe that was part of the problem (as a paid member I get a 50 hour lead time).  So on some days there are no sessions within 48 hours and the farthest you can get is to click on the 'Reserve' button that will bring up a message saying you can't actually reserve it.  Plus some of the popular sessions like the 6:30 am ones get filled up really fast but the mid-day sessions or goalie sessions usually have more slots available longer.

Anyway I really appreciate you taking so much time with this, I've learned a lot about javascript and it's fun to try and solve a coding problem again.