CODEWITHSUNDEEP
javascriptajaxruby-on-rails-4
colmtuite
colmtuite

Reputation: 4491

SetInterval Form Submit with AJAX Rails

I want .edit_canvas to submit every 5 seconds via AJAX. Right now it seems like nothing is happening. I have no console errors though.

Javascript:

setInterval(function(){
  // Get html content of canvas element
  var canvasContent = $('.canvas').html();
  // Populate hidden field with canvas content
  $('#canvas-content').val(canvasContent);

  // Submit form with AJAX
  $('.edit_canvas').submit(function() {
      var valuesToSubmit = $(this).serialize();

      $.ajax({
          url: $(this).attr('action'), //sumbits it to the given url of the form
          type: 'POST',
          data: valuesToSubmit,
          dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard
      }).success(function(json){
          $('.canvas').css('background', 'pink');
      });

      // Prevent normal behaviour
      return false;
  });
}, 5000);

Form:

<%= form_for @canvas do |f| %>      
    <%= f.hidden_field :content, value: "", id: "canvas-content" %>
    <%= f.submit "Save", id: "save-canvas" %>
<% end %>

Upvotes: 0

Views: 453

Answers (1)

Musa
Musa

Reputation: 97727

What you're doing is attaching a submit event handler, not submitting the form via ajax.
Just remove the submit code and it should work

setInterval(function(){
  // Get html content of canvas element
  var canvasContent = $('.canvas').html();
  // Populate hidden field with canvas content
  $('#canvas-content').val(canvasContent);

  // Submit form with AJAX
      var valuesToSubmit = $('.edit_canvas').serialize();

      $.ajax({
          url: $('.edit_canvas').attr('action'), //sumbits it to the given url of the form
          type: 'POST',
          data: valuesToSubmit,
          dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard
      }).success(function(json){
          $('.canvas').css('background', 'pink');
      });

}, 5000);

Upvotes: 2

Related Questions