Agile Web Development with Rails 6 Chapter 11. Task F
Currently reading and working through AWDR6 by Sam Ruby, David Bryant Copeland, and Dave Thomas. I have run into a couple issues and worked through them. I couldn’t find some solutions so decided to make a work log here for anyone else that might be working through this book.
The Pragmatic Programmers are amazing enough to have hosted this book on Medium as well. If you are interested in following along, or practicing yourself follow the link .
Chapter 11. Task F: Add a Dash of Ajax
Iteration F1: Moving the Cart
Agile Web Development with Rails 6 — by Sam Ruby, David Bryant Copeland, with Dave Thomas (51 / 102)
- Moved the shopping cart into the sidebar. We then arranged for the create action to re-display the catalog page.
- We used remote:true to invoke the LineItemsController.create() action using AJAX
- We wrote a helper method that renders the cart only if it has anything in it
Issue: ArgumentError in ProductsController#update “wrong number of arguments (given 1, expected 2)”
Investigation: ‘Maybe it’s expecting an actual argument, not a keyword arg in the second place? The code you wrote passes (with a warning) on Ruby 2.7 but no longer works on Ruby 3.’ — https://stackoverflow.com/a/68432507
Solution: Wrap the argument in a hash, like it expects now (Running Ruby -v 3+). The p_id key is to help in the play time answer below.
- We wrote a test that verifies not only the creation of a line item but also the content of the response that’s returned from such a request.
Current Solution: If you have a methodology to follow dealing with this, please share. But for now my solution had to be two-fold: Because the cart can be emptied by the ‘empty cart button’ or by removing line items. Both solutions are the same and seem hacky to me.
//line_items/destroy.js.erbcart = document.getElementById("cart")cart.innerHTML = "<%= j render_if @cart && @cart.line_items.any?, @cart %>"------------------------------------------------------------------//carts/destroy.js.erbcart = document.getElementById("cart")cart.hidden = true;
Problem created by the solution: The cart now has a hidden property. If we want to add an item it will, but the cart will not be visible.
Solution to problem created by solution: Make sure it isn’t hidden.
cart = document.getElementById("cart")cart.hidden = false; <--------cart.innerHTML = "<%= j render(@cart) %>"
[✓]- Add a button next to each item in the cart. When clicked, it should invoke an action to decrement the quantity of the item, deleting it from the cart when the quantity reaches zero.
Did this in an earlier chapter. With the same conditional qualifier, just saw into the future. Task E Cart view with buttons below.
Agile_Rails_Six/show.html.erb at task_e · RomanTurner/Agile_Rails_Six
Working through Agile Web Development. Contribute to RomanTurner/Agile_Rails_Six development by creating an account on…
[✓]- Get it working without Ajax, and then add it afterwards.
Issue: “ArgumentError (too few arguments): in Format, in Edit”
Investigation: Responding with multiple formats. Imagine having your js turned off, you still would want your requests to work.
Rails: How does the respond_to block work?
This is a block of Ruby code that takes advantage of a Rails helper method. If you aren't familiar with blocks yet, you…
Checkout the repo for full the controller. Before action set_cart is crucial for redrawing the cart with Ajax.
[✓]- Make images clickable. In response to a click, add the associated product to the cart.
Investigation: I spent waaay too much time trying to figure out how to put an onclick event on an image or use the link_to and image_tag helper until I read and inspected the HTML.
I wanted to mimic the button_to and action that the ‘Add to Cart’ button had.
With further inspection I saw that Rails helper button_to creates a form with an submit input. This spurred my thinking that we could do the same thing with the image.
Activating hyperlinks always results in an HTTP GET request. However, if your application is RESTful, some links are in fact actions that change data on the server, and must be performed with non-GET requests. This attribute allows marking up such links with an explicit method such as “post”, “put” or “delete”.
The way it works is that, when the link is activated, it constructs a hidden form in the document with the “action” attribute corresponding to “href” value of the link, and the method corresponding to
Solution: I found a helper called image_submit_tag, which creates a submit input with they type=‘image’. Surrounded that with a form with remote data (or in this case local:false) and it worked! It created the same action as the button. The cart scss also reacted appropriately by animating the background.
Issue cont.: With this now working as the image it broke my scss for my image for the store presentation.
Solution: It is no longer an img tag, so of course it wouldn’t work. It is now a input[type=’image’], just change that out and it is Gucci.
[✓]- When a product changes, highlight the product that changed in response to receiving a broadcast message.
Issue: I am not too familiar with UJS methodology.
Investigation: This works like a pub/sub so I tried tooling around with it to make it work. The biggest issue here was placement. I was brain tired and kept adding the class to the list before I would then overwrite the innerHTML of the body 😩 Lame move on my part. But I finally got it to go by moving it down.
Borrowed the cart highlight class, because why not.
I am participating in a Ruby book club and if you are interested in joining please direct message me. Would love to meet you and get better together.