WHAT’S THE PROJECT?
I’m so excited to share with you my first Ruby on Rails app with added JQuery/Ajax. With JQuery, I was able to allow a user to sift through products on the products#show page without having to make a new request to the browser! I know that some of you “uppity” experienced programmers are probably like “Where have you been!?”, but seriously this is SO freaking cool and I know it’s too premature to say, but I suddenly don’t feel like such a NEWB anymore! Anyway, this is a ruby on rails project but with added features and functionality through client side JQuery. I’ve always been inspired by the creativity during the roaring 20s so Gatsby Designs is a mock ecommerce website dedicated to the Lost Generation.
What I Accomplished:
1. Include a show resource rendered using jQuery and an Active Model Serialization JSON backend.
2. Include an index resource rendered using jQuery and an Active Model Serialization JSON backend.
3. Include at least one has_many relationship in information rendered via JSON and appended to the DOM.
4. Use your Rails API and a form to create a resource and render the response without a page refresh.
5. Translate JSON responses into js model objects.
6. At least one of the js model objects must have at least one method added by your code to the prototype.
WHAT I IMPLEMENTED
A user can navigate to the user’s show page, click on the orders button to see an index of their orders. Similarly, a user can click on the reviews button and see an index of their reviews. When a user hovers over the index of their orders or reviews, the order/review show page will appear in the div container.
A user can navigate to the product show page and see an index of the product’s reviews. They can also create a review by clicking on a button which will append a reviews#new form onto the page. I also added http codes in my controller to handle a request where the user neglects a form field, if so, my validations errors will append to the form. Once submitted, the review will prepend to the page as the first review.
Additionally, a user can sift through from product to product using the next or back buttons on the page. When a user clicks on either of these buttons, the url is updated with the product ID. I did this by using history.replaceState(). Going back or going forward will cause the product’s reviews to also append to the page!
When they add a product to the cart, a cute “Added!” will appear next to the button.
That was just a bit of extra ?