Breaking down URLs with Javascript

I didn't think this would be a big deal but I had the worst time trying to get a date picker and a custom filter to work in my search form.

More Details:

I took on the task at work to create a dashboard of activities for users, Ideally you would be able to login and access list just as you would see anywhere else, equipped with dates, dollar amounts, and etc. This public activity list was easily created, needed the ability to be filtered down by some given params which are to be a date range and filter type.

Knowing how to build a form I created just that, that included an already built Javascript date picker, specifically Pickaday. One of the nice things about working on an app is all the decision of what plugins and gems have already been made, and for the most part they some of the best decisions to solve the problems at hand; All I have to do is engineer it all to work together.

"This all sounds pretty legit until I actually try it"

I did not take into account that my Javascript skills are still very amateur. I also didn't realize that I knew nothing about url's and query params. I actually only just learned today, after it was explained to me coworkers. Imagine spending your whole life and just now figuring out how to tell time, that's how I felt when I learned about query params.

So are you ready to learn about them?

http://theblackc000000de.blogspot.com/search?q=bloc

The url I provided above includes a query string, do you see it?
It begins with the "?" and includes everything after it. If I wanted more params in the url, I could add an ampersand(&) and include more, like so:

http://theblackc000000de.blogspot.com/search?q=bloc&from=Dec%207,%202014&to=Jan%208,%202015

Not actually valid for this page but hope you get the idea, I passed in to and from dates to limit the blog post that were returned. So now I have 3 params: to, from, and q

The JS file that includes the date picker already had working code, which actually works for to and from but no longer q, which a select box with multiple options.

I was creating a url with no issue but the forgot to pass in a param key in the url build; Once I added that everything worked as expected.

My Solution:

*The url is being created in the last line

*variable names were change to protect the innocent

Another plus with working with Rails, I am able to call debugger/raise in the controller to manipulate the provided data received from this param, i.e. where all the filtering happens. Another plus is Ember has a lot of this handle, which is explained in their documentation - but I am not quite there yet.

This was all new to me and quite an eye opener, I hope this post will anyone else in working with url queries.

More info on url queries.