AJAX receiving non-updated data after submit

Question

I have a form for editing information and updates my database after submitting. I want my page to refresh my HTML view after the change. Below is my code:

$('#modal').on 'submit', '#form', (e) ->
  user_id = this.dataset.userid
  $.ajax
    type: 'GET'
    url:  '/api/users/' + user_id
    success: (data, textStatus, jqXHR) ->
      listTemplate = HandlebarsTemplates['lists/list'](data)
      $('#panel').html("")
      $('#panel').append(listTemplate)

However, the AJAX data I am receiving back is the old data. When I refresh the page, it renders the new data but that defeats the purpose of AJAX. How can I make the page refresh after submitting a form?

score 1 · Answer 1 · edited May 23 '17 at 12:11

Is your Controller correct, i mean the local link "/api/users/userid" ? Did you double check the Output of your Controller? are your reloadlink and the Ajax URL the same? There are syntax errors in your post. You are passing the userid to your Controller, it should return the current datasets. If your reloadlink and the Destination URL in Ajax request are not the same, there must be something wrong in your Controller.

Update: for things like this, you can just use the element serialize() function for html form in jquery. more can be found under How can I get form data with JavaScript/jQuery?

<!-- remove the action and method attribut, you don't need that any more-->
<form id="ajaxsubmit">
   <input name="changeme" type="text">
   <input type="submit" value="save">
</form>

In JS / JQuery snippet

$('#ajaxsubmit').submit(function(event) {
  // what every this is for
  var user_id = this.dataset.userid
  var additionalparams = $('#ajaxsubmit').serialize();
  // serialize produces: "changeme=xx&foo=xxx"
  $.ajax({
    type: 'GET',
    url:  'myhost/newrailscontroller',
    data:  'user_id=' + user_id +'&' + additionalparams,
    success: function(data, textStatus, jqXHR){
      // do what ever you want here
      listTemplate = HandlebarsTemplates['lists/list'](data);
      $('#panel').html("");
      $('#panel').append(listTemplate);
    }  
  }); 
});

And now you just need to build a new railscontroller names "newrailscontroller" to handle the ajax get request with all of your passed parameters. and update your db with the params from your ajax request, finally call your db JSON App to return the interested data als JSON back to your ajax call. Be careful with your success-call in ajax, the json show be parsed with JSON.stringify() or Jquery.parseJSON(). more about this can be found in serialize : deserialize data structure to/from JSON

since i have programmed in almost every language, but only not in ruby. Sorry that i can't give you an example how to make a railscontroller for your case. Good luck.

The code works for sure. The issue is that I am not getting updated data on which was submitted from the form. The AJAX is returning the same old data as a response. The link is for my JSON API based on my database. — user1584575, Apr 26 '14 at 20:47
I think the issue is caused by your calling logic. the ajax request will be called first before the submit post request is handled by your controller for the submit post request. It is like you asked for the old dataset with ajax request first, and then update your data in your database. What is handling your form data? you do need to add more hint in your question, sothat i can make better help. — Yingding Wang, Apr 26 '14 at 22:23
The form is handled by a rails controller action. I think all I need is to write my code in a way where submit post request runs before the ajax request. However, I am not sure how to write it in that order. — user1584575, Apr 27 '14 at 03:52

AJAX receiving non-updated data after submit

1 Answers1