Jquery form submit not working with AJAX and Rails re-renders index.html.erb inexplicably

Question

I'm having the oddest problem with a jquery/ajax html update form.

My app is a single page TODO App that uses a Rails controller, but all DOM changes take place through Jquery/Ajax. After the TODOs are rendered to the page through Javascript, there is an edit button for each TODO.

When the edit button is clicked, an API request is made that results in an update form being appended to the DOM.

However, when the update button from that form is clicked it isn't recognized by Jquery and for some unknown reason Rails re-renders the Index.html.erb page everytime. I've tried 10 different solutions for the selector and nothing works.

The method that selects appends the edit form to the DOM is here:

  $(document).on("click", ".ugh3", function(e) {
      e.preventDefault()
  let id = e.target.id
  let event = e
  $.ajax({
    type: "GET",
    url: `/todos/${id}`,
    success: function(response) {
        let newTodo = new Todo(response)
        let todoHtml = newTodo.formatEdit()
        $('.todo-list').append(todoHtml)
    }
  })
 })

The above call works perfectly. But when I try to get the form submit or on Click to work it never will recognize it and the Index.html.erb page is resubmitted. I've tried preventDefault and return false as shown below:

  $("form.edit_todo").on("submit", function (e) {
   debugger
   e.preventDefault();
   return false;
  })

If anyone has a couple minutes to look at this I'd greatly appreciate it. This has been driving me insane for two days now. Thank very much!

The git repo is: https://github.com/jwolfe890/todoapp/blob/master/app/assets/javascripts/todo.js

FuriousD · Accepted Answer · 2017-08-11 04:58:48Z

1

As you're appending the form dynamically, the submit handler - $("form.edit_todo").on("submit", ... - will not fire as the form did not yet exist in the DOM at the time of binding.

Similar to the click event you're using on the .ugh3 class, you need to register the submit event against the document:

$(document).on('submit', 'form.edit_todo', function (e) { ... })

The document is a constant - it will always exist, and therefore any event listener can be bound against it. When a submit event is fired, the document detects it (a result of event bubbling) and jQuery will take the target element (the one causing the event) and compare it against any registered handlers (handlers are created with you $.on function). If there's a match it will execute that handler.

edited Aug 11, 2017 at 4:58

answered Aug 11, 2017 at 4:54

FuriousD

8545 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anup Sharma · Accepted Answer · 2017-08-11 04:07:19Z

0

Hi I have some suggestion for you: Are you putting the code inside the document.ready() function of jquery. Like the following:

$(document).ready(function(){
   $("form.edit_todo").on("submit", function (e) {
     debugger
     e.preventDefault();
     return false;  }); });

I think this should work keeping in mind that "form.edit_todo" is referring to the form object

answered Aug 11, 2017 at 4:07

Anup Sharma

11 bronze badge

1 Comment

Dog Over a year ago

yeah it's definitely in the document.ready function. at the top of the .js file i have: $(function() { and all the jquery calls are enclosed

Collectives™ on Stack Overflow

Jquery form submit not working with AJAX and Rails re-renders index.html.erb inexplicably

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related