Question

I have no previous experience with Javascript/JQuery/AJAX and I was given a task on our current project at my internship that relies heavily on all three! Our client has a site where users create profiles, but apparently a lot of users leave the page or refresh before they save the form and everything gets deleted.

I am supposed to make it so every time a user changes focus from the text area they are using, the text they have entered so far saves and is reloaded when they refresh the page, or whatever they are doing to lose everything. From what I have been told I need to make a JQuery function that does an AJAX post and then get, but I have no idea how to implement Javascript/JQuery/AJAX into HAML and Rails projects, let alone how to use any of the JS that I’m supposed to.

I realize not all the information needed to completely solve the problem is given here, I’ll happily supply that if someone asks, but I thought it would be best to just implement an alert function when the textarea loses focus and start small.

Thanks in advance!

---

*Revision #1

---

Okay, I filled in what Tejs gave me and have:

:javascript
  function post_text() {
    $(document).ready(function() {
      $.ajax({ 
        var currentTextBoxValue = $(textarea).val();
        var currentStatus = $(input).val();

        type: 'POST',
        url: '/profiles/:profile_id/profile_acts',
        data: ''
        success: function() {
          alert("Hello");
        }
      });
    });
  }

I currently have this at the bottom on the page and have {:onblur => "post_text()"} attached to the text_area_tag I want to get the data from. I got the URL from rake routes and I know that the data should be sent in JSON. I know that I need to send some JSON, but I need to include the profile_act_id's and don’t want to write a script for each act that we have and I’m not sure how I could incorporate Ruby class variables within the code.

As for what needs to be sent with JSON, I know that it needs to be something like this:

profile_acts:{"profile_act_40":{
  "act_id":"40", 
  "additional_info":currentTextBoxValue, 
  "status":currentStatus
  }
}

Ideally it would be something like this:

profile_acts:{"profile_act_" + #{act.id}: {
  "act_id":#{act.id},
  "additional_info":currentTextBoxValue,
  "status":currentStatus
  }
}

I’m pretty sure I can’t chop profile_act_40 into "profile_act_" + #{act.id}, but there’s got to be an easier way to do this.

Once I get this figured out I still am not sure what I would need to incorporate into the profile_acts_controller.rb.

Once again, thank you in advance.

---

*Revision #2

---

After working on it a bit more and getting help from my coworker I have this:

:javascript
  $(document).ready(function() {
    jQuery.ajaxSetup({  
      'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}  
    });

    ajaxPost = function (_url, _dataString) {
      $.ajax({
        type: 'POST',
        url: _url,
        data: _dataString,
        success: function() {
          alert("Success!");
        }
        failure: function () {
          alert("Failure!")
        }
      });
    };

    getId = function(object) {
      var _id = $(this).closest(".act").attr("act_id");
      alert("ID got!");
      return _id;
    }

    getInfo = function(object) {
      var _info = $(this).value();
      alert("Info got!");
      return _info;
    }

    getInfoString = function(_id, _info) {
      var _infoString = '"profile_acts":{"profile_act":{"act_id":_id, "additional_info":_info}}';
      alert("Info string got!");
      return _infoString;
    }

    getStatusString = function(_id, _status) {
      var _statusString = '"profile_acts":{"profile_act":{"act_id":_id, "status":_status}}';
      alert("Status string got!")
      return _statusString;
    }

    getUrl = function(_id) {
      var _url = "/profiles/" + _id + "/profile_acts";
      alert("URL got!");
      return _url;
    }

    showAlert = function(msg) {
      alert(msg);
    }

    $('.info_field').change(function() {
      var _id = getId($(this));  
      var _info = getInfo($(this));
      var _dataString = getInfoString(_id, _info);
      var _url = getUrl(_id);

      var message = "hello text";
      showAlert(message);
    });

    $('.status_yes_field').change(function() {
      var _id = getId($(this));  
      var _info = getInfo($(this));
      var _dataString = getStatusString(_id, _info);
      var _url = getUrl(_id);

      var message = "hello yes";
      showAlert(message);
    });

    $('.status_maybe_field').change(function() {
      var _id = getId($(this));  
      var _info = getInfo($(this));
      var _dataString = getStatusString(_id, _info);
      var _url = getUrl(_id);

      var message = "hello maybe";
      showAlert(message);
    });

    $('.status_no_field').change(function() {
      var _id = getId($(this));  
      var _info = getInfo($(this));
      var _dataString = getStatusString(_id, _info);
      var _url = getUrl(_id);

      var message = "hello no";
      showAlert(message);
    });
  });

I tried to have debugging alerts where I could, but absolutely nothing is registering and I am at a complete loss with low gumption. I am not sure where to go forward with this or even side-step and try something new. I can’t help but feel like I am missing something very basic here. Thanks in advance again.

Answer 1

Welllllll, thanks to only Tejs on this, but this is what I needed.

$(".description_form input, #certificates_holder ul li input").change(function(){

  form = $("#actions form");

$.ajax({data:jQuery.param(form.serializeArray()), dataType:'script', type:'post', url: "/profiles/" + $("#profile").attr("data-profile_id") + "/profile_acts"});

});


$(".additional_info_form textarea").change(function(){

    form = $("#actions form");

$.ajax({data:jQuery.param(form.serializeArray()), dataType:'script', type:'post', url: "/profiles/" + $("#profile").attr("data-profile_id") + "/profile_acts"});

});