Здравствуйте. Есть страница с комментариями. Комментарии иерархические, с родителми и потомками. При нажатии кнопки "Прокомментировать" Ниже появляется окно для вода текста, данные отправляются через аякс без перезагрузки страницы. При выпадании окна там есть кнопка закрть, коорой можно закрыть это выпавшее окно. Всё работает как надо. НО! Хочется чтобы кнопка "Прокомментировать" при нажатии превращалась в "Закрыть". | Код |
$(function (){
/* Объект sendDataComment будет содержать данные для отправки на сервер
commentForm - переменная, в которую будет помещен клон формы */
var sendDataComment = {};
var commentForm;
// Функция создает форму для ответа путем клонирования нашей спрятанной формы
function CommentForm() {
if(commentForm) {
// Проверяем существования клона. Если он уже создан, то удаляем его, а затем создаем новый.
removeCommentForm();
}
commentForm = $('#newComment').clone();
}
// Функция удаления клона
function removeCommentForm() {
commentForm.remove();
sendDataComment = {};
}
// На событие клика по кнопке "Добавить комментарий/Ответить" вешаем необходимые действия
$('#addNewComment, .reply').click(function(){
CommentForm(); // Создаем клона формы
if($(this).attr('id') == 'addNewComment') {
// Новый комментарий
// Добавляем форму после всех комментариев
commentForm.appendTo('#commentRoot');
}
else {
// Новый ответ
// Добавляем форму под родительским комментарием
// Для этого находим родительский элемент li
var parentComment = $(this).parent().parent();
// в sendDataComment добавим идентификатор родителя
sendDataComment.parent_id = parentComment.attr('id');
var childs = parentComment.find('ul'); // Ищем у этого коммента потомков (ответы)
if(!childs.length) {
// Если у этого комментария нет ответов (потомков) добавим для ответов контейнер ul, а затем уже в этот контейнер нашу форму
parentComment.append('<div></div>');
commentForm.appendTo(parentComment.children('div'));
}
else commentForm.prependTo(childs); // Добавляем форму в контейнер для ответов
}
commentForm.show(); // Показываем форму
return false; // предотвращаем дефолтное действие браузера
});
$('#cancelComment').live('click', function(){
// Здесь live обязательно, т.к. мы работаем не с самой формой, а ее клоном
removeCommentForm();
})
// По клику на кнопку "Сохранить", доформировываем объект данных и отправляем их на сервер
//$('#newComment button').live('click',function(){
$('#newComment #comment_button').live('click',function(){
//Имени у меня нет
//sendDataComment.parent_id = commentForm.find("input[name='parent_id']").val();
sendDataComment.username = commentForm.find("input[name='username']").val();
sendDataComment.publ_id = commentForm.find("input[name='publ_id']").val();
sendDataComment.prenadl = commentForm.find("input[name='prenadl']").val();
sendDataComment.znach = commentForm.find("input[name='znach']").val();
sendDataComment.comment = commentForm.find("textarea").val();
// Подробнее о поиске элементов по аттрибутам тут http://ruseller.com/lessons.php?rub=32&id=682
//sendDataComment.comment = commentForm.find("textarea").val();
sendData(); // Отправка данных
});
// Функция отправки данных комментария на сервер
function sendData() {
commentForm.find('#comment_button').hide().next().show(); // Прячем кнопку и показываем лоадер
$.post(
"./blocks/comment_save.php",
sendDataComment,
function(data) { // Обработчик ответа от сервера
if(data) {
// Если что-то пришло, значит есть ошибки
data = $.parseJSON(data); // Преобразовываем пришедшую строку JSON в объект JS
// Теперь в цикле пройдемся по всем ошибкам
var errors ='';
$.each(data, function(i, val) {
errors += val+'\n';
// alert(i);
/* В i на каждой итерации цикла содержится имя поля,
в котором возникла ошибка, расскоментируйте alert() выше
и отправьте комментарий, заведомо содержащий ошибку.
Подумайте, как это можно использовать. */
});
commentForm.find('#comment_button').show().next().hide(); // показываем кнопку и прячем лоадер
alert(errors);
/* Выведем ошибки простым alert-ом.
Но по-хорошему, конечно же, такие сообщения лучше встроить
на страницу, под тем полем, где возникла ошибка. */
}
// Если ошибок нет, значит у нас все нормально сохранилось
// Форму комментария преобразуем в просто коммент
else formToComment();
}
)
}
// Функция преобразование формы в комментарий
function formToComment() {
// Заменяем содержимое h6 на имя комментатора (инпут таким образом сам удалится)
commentForm.find('h5').text(sendDataComment.username);
// Заменяем содержимое блока div с классом .comment только на текст (текстэрея удалится сама)
commentForm.find('.comment').text(sendDataComment.comment);
// Удаляем теперь уже лишние элементы
commentForm.find('button').remove(); // Удаляем кнопку
commentForm.find('.comment_loader').remove(); // Удаляем картинку-лоадер
commentForm.find('#cancelComment').remove(); // Удаляем кнопку закрытия формы
/* Обязательно Удаляем атрибут id у клона.
На данный момент он у объекта commentForm такой же, что и у спрятанной
базовой формы, а это значит: во-первых, двух элементов с одинаковым id
быть не должно, во-вторых, оставлять id никак нельзя, иначе в дальнейшем,
при попытке создания нового клона, клонироваться будет этот комментарий,
а не нужная нам форма */
commentForm.removeAttr('id');
/* Обязательно commentForm присваиваем значение null, таким образом,
мы разорвем связь между полученным в итоге комментом и объектом в js */
commentForm = null;
}
});
|
| Код |
<div id="commentRoot">
<h6>
<span id="addNewComment">Ответить</span>
<span id="cancelComment">Закрыть</span>
</h6>
</div>
<div class="text2 wech" id="newComment">
<div class="commentContent">
<div class="send_opionion article_send">
<form action="./articles_view.php?id=22" method="post" class="form">
<textarea rows="5" cols="20" name="textar" id="textar"></textarea>
<div class="sub">
<a id="comment_button" class="link_fon_2">
<span class="link_fon_2fon">
<span class="link_icon"></span>
<span class="p1 color1">Комментировать</span>
<span class="p2 color2">Комментировать</span>
</span>
</a>
<div class="comment_loader"><img src="./img/27.gif"/></div>
</div>
</form>
</div>
</div>
</div>
|
|
помощь в jquery 
Загрузка ...
