Autosaving a form in Rails with AJAX

Question

I am trying to autosave a form for the Post#new action. Every minute or so, I want to POST to Post#autosave and then I'll check for first_or_create and save/updated the record in the Posts table. My problem though is, I can no longer access the POST params from the form. I am trying to do it like so:

$(function() {
  if ($("#new_post").length > 0) {
    setTimeout(autoSavePost, 60000); 
  }    
});

function autoSavePost() {
  $.ajax({
    type: "POST",
    url: "/posts/autosave",
    dataType: "script",
    success: function(data) {
      console.log(data);
    }
  });
  setTimeout(autoSavePost, 60000);
}

I have this route:

post 'posts/autosave', as: :autosave_post_path

The problem is, the server log shows the params hash as only containing :action and :controller. How can I access the equivalent of what would have been sent as part of the POST data.

score 13 · Accepted Answer · answered Feb 20 '13 at 22:23

13

You need to pass the data param as well, via serialize method:

$.ajax({
  type: "POST",
  url: "/posts/autosave",
  data: $("#new_post").serialize(),
  dataType: "script",
  success: function(data) {
    console.log(data);
  }
});

answered Feb 20 '13 at 22:23

moonwave99

21,957
3
43
64

You are the man! Thanks so much. I looked over the docs you linked, I'm unclear as to what it is doing exactly, any chance you have a deeper understanding you could summarize? Thanks again. – mackshkatz Feb 20 '13 at 22:28
2

"The .serialize() method creates a text string in standard URL-encoded notation.", i.e. it serializes the form content as `param1=value1&param2=value2&...&paramN=valueN`, then Rails unserializes it back to an object. – moonwave99 Feb 20 '13 at 22:39
1

@mackshkatz You can think of serialize as looping over all of the form elements in your form and collecting the data that would be submitted into one long string. This is then sent in the POST request to your rails controller. If it were a GET request, it'd be the equivalent of creating the query string for you, based on the values entered in the form fields. – ChrisC Feb 20 '13 at 22:40

score 1 · Answer 2 · answered Feb 20 '13 at 22:23

1

Take a look at the serialize() function: http://api.jquery.com/serialize/ : You can use it to create an array of data to pass to your controller as parameters.

answered Feb 20 '13 at 22:23

ChrisC

2,461
1
16
25

Muhammad Hamza · Answer 3 · 2020-04-01T06:54:33.527

So, I am Explaining the new Form Script

function autoSavePost() {
  $.ajax({
      type: "POST",
      url: '/quotes',
      data: $("#new_post").serialize(),
      dataType: "script",
  });
}

Send the Post Request to the Controller which just render the edit form after inserting the Object in DB, or better say after persisting the Record.

After the Edit Page is Rendered we wrote a Script there to just update the object after some Interval

function autoSavePost() {
    $.ajax({
      type: "PATCH",
      url: "/post/<%= post.id %>",
      data: $("#edit_post").serialize(),
      dataType: "script",
      success: function(data) {
        console.log("data")
      }
    });
    setTimeout(autoSavePost, 60000);
  }

So, this approach is quite helpful and its a fully Working Auto Save Form Feature and it can be implemented on any type of Object. Thanks !

Autosaving a form in Rails with AJAX

3 Answers3

Linked