In my product page, I was trying to display a textbox in the form of a form_for formbuilder, and later display the user input on the DOM. The first step was attaching a event handler to a “Click Here to Order” button tag.
When that button was clicked, it fired a Ajax Get request which gave me back a response of a form with a hidden_field and text_field.
On line 49, I am attaching the response in a html format to my show page inside a div with a id named #textbox.
That line of code gave me this output.
Once that was done, I had to somehow get access to the form once again. So I did that by grabbing the form element by it’s id name new-line_product. On line 53, I attached a submit event handler to the form and called upon another function submitForm(this) with an argument of this so that the function had access to the form data.
As you can tell the submitForm function is sending a AJAX post request to the line_products index page. Here I opt to use the low level $.ajax() instead of the high level $.post() request because I had specific details to add like data, success and error and found using $.ajax() easier with those details. So type was a POST request, the url was where I wanted my form to be posted to and data was given a variable formData that basically serialized the form and gave me back a query string. I then went further to code what I wanted to happen if the response was a success or error.
if it’s successful:
The function cartButtons(id) will be called upon passing in the carts id as a argument. The cartButton(id) function basically did another Ajax Get request to the carts show page and spits that html page out onto the dorm.
if it’s not successful:
The error message will be put out to the dom.
All the logic for the AJAX process was done in the line_products and carts controller. To view the entire code please visit my github