Back in March I wrote a little bit about an issue I was having where, at several points along my path to solving it, I should have realized I was doing things wrong. I had another one of those come up and thought it was good to share for a few reasons. A little background…
On the admin side of DetroitHockey.Net I have a form that allows me to add multimedia items and their associated metadata to my database. One of those pieces of metadata is the name of each player in the photo/video, a subset of the collections a multimedia item belongs to.
It used to be that if I was adding multimedia for a player who I didn’t have in my players database, I had to jump over to the tools for managing that, add the player, and then jump back. I streamlined the process just a little bit by giving myself an “Add New Player” button that takes me to the form for adding a new player.
Which brings me to the little problem I was trying to solve when I learned this lesson.
I enter the name of a player in my little form and it turns out that the player doesn’t exist in my system. No big deal, I click that Add New Player button and it takes me to the add new player form.
But when I get there, I have to enter the name again. That’s stupid. Why not make it so I can pass in the name I already entered? Updating the player form to accept a name in the query string wasn’t a problem. How to get that name into the query string ended up being interesting, though.
My first thought was that when I clicked the “Add New Player” link, I should pull the name (if there was one) out of the player name box and append it to the query string of the href attribute for that link element. And it should be easy enough with JavaScript.
In fact, updating the link was easy. For some reason, though, I was thinking that window.open() forced a new window, not just a new tab, so popping that new link URL open through script wasn’t an option for me. Mistake #1.
This led me down the path of applying an onclick event to that link that first looked to see if any change to the URL needed to be applied. If the URL manipulation was needed, it would prevent the default action of the link, make the changes, and then re-fire the click event using jQuery’s trigger() method. Mistake #2.
It turns out, firing a click event on an anchor only re-runs the JavaScript attached to that link. I spent a ton of time trying to figure out why my code was preventing that from happening when it wasn’t. What I was trying to do was impossible.
Which made me realize Mistake #3, the cause of all of it.
I was trying to make it so that when I clicked on that link, I went to a URL that had the player name from the box. And “when I clicked on that link” was stuck in my head, so that’s where I had the script running. When I couldn’t re-fire the click programmatically, it caused me to take a step back and re-evaluate.
Re-wording it, what I needed was for the proper URL to be applied to that link by the time I clicked on it.
I moved the logic to fire onblur of the name text box. If I click the “Add New Player” link, it’s already populated by the time I get there. If I don’t click it, I never see anyway.
More lessons learned from stupid mistakes.
