Сохранение и отображение текста в textarea при потере фокуса Rails 2.3.12 - PullRequest
2 голосов
/ 09 сентября 2011

У меня нет предыдущего опыта работы с Javascript / JQuery / AJAX, и мне дали задание по нашему текущему проекту во время моей стажировки, которое в значительной степени зависит от всех трех!У нашего клиента есть сайт, на котором пользователи создают профили, но, по-видимому, многие пользователи покидают страницу или обновляют ее, прежде чем сохранить форму, и все будет удалено.

Я должен сделать так, чтобы каждый раз, когда пользователь изменял фокус с используемой текстовой области, введенный им текст сохранялся и перезагружался при обновлении страницы, или что бы он ни делалпотерять все.Из того, что мне сказали, мне нужно сделать функцию JQuery, которая выполняет публикацию AJAX, а затем получить, но я понятия не имею, как внедрить Javascript / JQuery / AJAX в проекты HAML и Rails, не говоря уже о том, как использовать любой из JSчто я должен.

Я понимаю, что здесь представлена ​​не вся информация, необходимая для полного решения проблемы, я с радостью предоставлю это, если кто-то спросит, но я подумал, что было бы лучше просто реализоватьфункция оповещения, когда текстовое поле теряет фокус и начинает с малого.

Заранее спасибо!


* Редакция № 1


Хорошо, я заполнил то, что дал мне Тейс, и получил:

: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");
        }
      });
    });
  }

У меня в данный момент есть это внизу страницы, и {:onblur => "post_text()"} прикреплен к text_area_tag, с которого я хочу получить данные.Я получил URL от rake routes и знаю, что данные должны быть отправлены в формате JSON.Я знаю, что мне нужно отправить JSON, но мне нужно включить profile_act_id's и я не хочу писать скрипт для каждого нашего действия, и я не уверен, как я могу включить переменные класса Ruby в код,

Что касается того, что нужно отправить с помощью JSON, я знаю, что это должно быть примерно так:

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

В идеале это было бы что-то вроде этого:

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

Я почти уверен, что не могу нарезать profile_act_40 на "profile_act_" + #{act.id}, но должен быть более простой способ сделать это.

Как только я понял это, я все еще не уверенто, что мне нужно включить в profile_acts_controller.rb.

Еще раз спасибо заранее.


* Редакция # 2


После работынемного больше и получая помощь от моего коллеги, у меня есть это:

: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);
    });
  });

Я пытался отладить alerts там, где мог, но абсолютно ничего не регистрируется, и у меня полная потеря с низкимсообразительность.Я не уверен, куда идти дальше с этим или даже побочным шагом и попробовать что-то новое.Я не могу помочь, но чувствую, что мне здесь чего-то не хватает.Еще раз спасибо заранее.

Ответы [ 2 ]

1 голос
/ 27 сентября 2011

Welllllll, спасибо только за это Tejs , но это то, что мне было нужно.

$(".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"});

});
0 голосов
/ 09 сентября 2011

Вам необходимо прикрепить к событию размытие / изменение текстового поля.

 $(document).ready(function()
 {
     $('#myTextBoxId').change(function()
     {
          var currentTextBoxValue = $(this).val();

          $.ajax({
              type: 'POST',
              url: '/Route/To/Your/Ruby/Handler',
              data: { value: currentTextBoxValue },
              success: function()
              {
                   // Insert Code Here when the ajax call comes back successfully.
              }
          });
     });
 });

Я предполагаю, что вы ссылаетесь на jQuery. Вы просто добавляете обработчик событий (вызов change(), затем получаете значение (вызов $(this).val()), а затем делаете ajax POST для вашего маршрута.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...