I was managing state with a big ugly invisible form on a page. I would serialize the values in the form on the click event and do ajax submissions, which would provide content for a div on the page. I was serializing and deserializing the values from the big form, and using the jQuery BBQ plugin (which I never fully understood) to manage state.
I am trying to redo the jQuery BBQ stuff in my application to use history.js. I plugged the ajaxify-html5 gist into my application.
My application drills down into a database table, listing columns in that table as links on the page. They have the class “.attrs” assigned to them.
I see the “click” event that is being called in ajaxify. It looks like it calls History.pushState, which I imagine is like bbq.pushState in that it will do my submission for me.
Though my URL has stayed the same, my request does not appear to be being performed as I expected in my Rails application. An example URL I’m working with is:
http://myapp/brands/get_attributes?brand_id=539page_attribute=attribute1&attribute1=Whirlpool
When I used the BBQ plugin, I specified the hash I sent to the $.ajax() call like so:
hash = type: "POST", url: "brands/get_attributes", data: $("#buyersguideform").serialize()
Since it was doing an Ajax request, Rails would recognize that and respond with the appropriate .js.erb template.
Unfortunately, my URL doesn’t appear to contain enough information to tell History.js what kind of request to make. As such, the code is doing a regular old GET request which is not even getting the correct get_attributes action in the controller.
I really need to solve these issues with this History.js:
1) Figure out how to move away from the crazy home grown state management invisible form I built. I have begun to do that with the parameterized URLs I’m generating. I’m just not sure how to do that from one Ajax request to the next. In other words, I don’t know when/how I’m supposed to use getState().
2) Find out how to make History.js do an Ajax POST instead of a non-Ajax GET.
3) Understand more of this gist. The instructions say all I have to do is plug in the scripts, but obviously there are some classes mentioned in the declaration section that I’m supposed to somehow work into my application.
I am new to state management, and as such am a little overwhelmed. I’ve been at this for 8 hours and I’m making some progress, but it is extremely slow. Any help is very deeply appreciated.
UPDATE 1:
I can see that the gist will only ever do GETs, because it doesn’t specify the type key in the hash supplied to the $.ajax() call. When I hard code it in there, of course it does a POST. On further review, it doesn’t look like using the gist is what I need.
It also looks like I was wrong that somehow History.pushState() would do the Ajax request for me. It appears to only push entries onto the state. Which is entirely appropriate. The reason for my confusion was that this app previously had a pushState wrapper employed that would handle both the state management and then the subsequent Ajax request. So the reason my Ajax post isn’t happening when I don’t use the gist is that it isn’t supposed to in the first place.
There appears to be only paid support available for the History.js plugin. While it looks like it may do a good job, I have been unable to really find any real answers about using it. If you are a Javascript expert, as the author says about himself, then you will probably do well with it. If you are relatively new to state management and are looking for documentation, you will likely struggle.
I have gone back to the BBQ plugin for my simple requirements, and it is working appropriately. It is much more fully documented than the History.js plugin. I am sure History.js is superior in its functionality. When the documentation catches up and I am able to get answers to my questions, I will switch.