modal dialog box

rubyonrails-talk
1

HI, I’d like to insert a bootstrap modal dialog box between my add to cart button and the actual action.

I know how to display the dialog box, but not sure how to hook it up to the form cart button? [and the actual saving to cart]

Any suggestions?

Thanks,

Joe

2

Do you have multiple buttons on the page, each referring to a different product, and do you intend them to all go "through" a single modal? You're going to need to add some JavaScript to the mix, I imagine. Put a generic form in the modal itself, and then use data-attributes or a querystring to "tell" the modal which product is being ordered. You'll have to use JS to change the form element that signals what product is being ordered. Once you get through that, the rest is a normal CRUD Rails form.

Walter

3

No, I have an add to cart button, and I’d like them to confirm their action with a modal dialog box and if yes - save the record to the table, if no- do nothing.

[and I can also use the dialog to display some info].

4

You can pre-render the modal with a confirmation form. When clicking “Add to cart” you can update the form with the ID of the product being added and show the modal. When the user submits the form it’ll send the right product ID to the server.

Best

Greg

5

Capture.PNG
Capture.PNG913×666 45.1 KB

Ok, this is what I have so far. I’ve added the bootstrap modal and put the button right next to the actual button. So, I need to render this modal, and then on the modal boxes save changes (update the cart).
oh, the other thing I couldn’t figure out is how to get the :qty from the form input field. I need to check this value compare it to the remaining as well.

Thanks,

Joe

6

You could just make the regular button show a confirmation dialog in the usual Rails way

data: { confirm: "Are you sure you want to add #{@product.name} to your cart?" }

Then there are any number of Bootstrap plug-ins that hijack a normal JS confirm dialog (which is what the above creates) and style it as a BS modal. That way your form (including the quantity field) submits normally, and the Dootstrap part just decorates the result of a confirm() dialog in JS.

Walter

7

yes, that’s what I ended up doing. Removed the modal, and used the built-in submit tag confirmation. It will have to do.