У меня нет предыдущего опыта работы с 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
там, где мог, но абсолютно ничего не регистрируется, и у меня полная потеря с низкимсообразительность.Я не уверен, куда идти дальше с этим или даже побочным шагом и попробовать что-то новое.Я не могу помочь, но чувствую, что мне здесь чего-то не хватает.Еще раз спасибо заранее.