0

I am working on a RoR and JavaScript project and am using an AJAX request to submit a form. I have a POST request on submit, but it is performing a GET request at first. The form is clearing and the page reloads.

The url changes from http://localhost:3000/beers to http://localhost:3000/beers?utf8=%E2%9C%93&authenticity_token=HVoHQ8WEZdIfVEvBcWJU5XT0dIiV2QL0B%2B2XeaY5m9g69A4yYWFxmx%2B4qiv2qPqx%2BJe3pphvtGT0oZhlWNTw3A%3D%3D&beer%5Bname%5D=Fat+Tire&beer%5Bbrewery_attributes%5D%5Bname%5D=New+Belgium+Brewing+Company&beer%5Bbeer_type%5D=Red+Ale+-+American+Amber+%2F+Red&beer%5Bibu%5D=22&beer%5Babv%5D=5.2%25&commit=Create+Beer.

I press submit once again (with an empty form) and then it performs the POST request and works as it should. It doesn't do this every single time, which is what is really confusing me. I have cleared my cookies, restarted my server, and tried a different browser. None have fixed the issue. If anyone has any insight, I'd greatly appreciate the help. Thanks in advance.

My AJAX request: 

$(function() {
    // new beer request
    $('#new-beer-form').on("submit", function(e) {
        $.ajax({
            url: this.action,
            method: "POST",
            data: $(this).serialize(),
            success: function(response) {
                var $ol = $("div.beers ol")
                $ol.append(response);
            },
            error: function(response) {
                alert("Please fill out all criteria.");
            },
        });
        e.preventDefault();
    })
})
Victoria Fluharty
  • 1
  • You have script loading errors... Likely in the code that is not shown here... – Alexei Levenkov Dec 07 '18 at 01:47
  • It sounds like you may be dealing with either a race-condition, or a situation where the code you list above is being run more than once, resulting in multiple handlers on the form. Try checking how often the code above is run by adding a console.log("handler registered"); just under the //new beer request. Also, does your
    have a method="post" on it? If you want the default action of that form to be a POST, you should declare it as such in the HTML.
     – Nikolaj Baer Dec 07 '18 at 01:48
  • So, it's only showing the "handler registered" one time. But, at the moment it's working properly. I haven't done anything to change the code, so I'm unsure why it's now working correctly. It's been doing this off and on to me all day. It'll work properly for a few minutes, then not work properly for a while. – Victoria Fluharty Dec 07 '18 at 01:56

3 Answers3

0

I think that your e.preventDefault() should be moved to the very beginning of the on.Submit function's callback. Before the ajax request. I think what is happening is that the default action (sending a get request) is not prevented in time.

Joseph
  • 61
  • 4
  • I just attempted that and it worked the first time I added a new beer. Then, I went on to add a second just to make sure it was working and not just tricking me again. It was just tricking me. It's still doing it. Off and on. – Victoria Fluharty Dec 07 '18 at 01:49
  • Sorry, I thought that would do it. If you are still troubleshooting this, could you try making a small javascript fiddle or something similar. Assuming the problem is with the javascript and not your rails app, you could change the ajax request to something generic. Also, it could be that another part of your page is making the request, and it frequently happens to coincide with the actions your posted code performs. If you have resolved your problem, it might help other people in the future if you post your resolution. And if any of us helped, that would be great to know. Good luck! – Joseph Dec 07 '18 at 20:23
0

Can you verify if the button you are using to submit defined as <button> ? If yes, it should have attribute type="button", since it will default to "submit" action on click, as being replied here:

What's the point of <button type="button">?

Vinh Truong
  • 388
  • 1
  • 10
  • My form is written using the Rails `form_for` method. My submit button is written as `<%= f.submit %>`. I don't know if that makes a difference in regards to using `type="button"` or not. – Victoria Fluharty Dec 07 '18 at 21:02
0

So, it appears that the issue lied within my gemfile. I was utilizing the turbolinks gem when I shouldn't have been. As soon as I went through the necessary steps to remove it from my project, it began working correctly, consistently.

For anyone that has a similar issue, here is a really helpful and straightforward article in regards to the topic: http://codkal.com/rails-how-to-remove-turbolinks/.

Thank you to everyone that helped me.

Victoria Fluharty
  • 1