Редактирование своих записей с помощью AJAX

Всем здрасте! Сегодня я покажу вам один из вариантов, как сделать редактирование записей на своей стене (ага, снова она; кто не в курсе, смотрим сюда) без перезагрузки страницы. На самом деле здесь воооообще ничего сложного нет, но для людей пока еще далеких от программирования будет самое то - можно посмотреть, попробовать, может на мысли какие натолкнет.

По правде говоря, делай я это для себя, я бы реализовал это чуть иначе, но я понимаю, что если перемудрю, то многим новичкам будет сложновато. Поэтому собственно вот.

Основной скрипт все тот же (ссылка на скачивание в конце статьи), чего добавилось нового, сейчас поясню.

В файле index.php на строках 36-37 проверяю, могу ли я редактировать записи:

$editable = ( $userdata->id == $my_id ) ? true : false;

Потом просто будет удобнее смотреть if ( $editable ) вместо if ( $userdata->id == $my_id )

На строках 226-233 добавил div'ам id, чтобы можно было с помощью jquery манипулировать элементами.

<!-- Этот див мы будем скрывать при редактировании, а затем показывать снова -->
<div id="post-<?=$row['id']?>-container">
    <?php if ( $editable ) : ?>
        <p align="right"><small><a href="javascript:;" onclick="editPost(<?=$row['id']?>);">редактировать</a></small></p>
    <?php endif; ?>
    <p id="post-<?=$row['id']?>-message"><?=$row['message']?></p>
</div>

<!-- А этот пока пустой, но в нем будет появляться форма редактирования текста (а пока терпение) -->
<div id="edit-<?=$row['id']?>"></div>

Как вы могли заметить, здесь появилась функция editPost(), её и еще пару других я добавил в конце документа (строки 315-340):

<script type="text/javascript">
    function editPost(id) {
        $('#post-'+id+'-container').hide();
        
        // здесь фигачим нашу форму редактирования
        $('#edit-'+id).html('<textarea name="new_message" class="to_send" cols="50" rows="3">' +             
                            $('#post-'+id+'-message').html() + '</textarea>' +
                            '<input type="hidden" name="post_id" value="'+id+'" class="to_send">' +
                            '<br><input type="button" value="Сохранить" onclick="savePost('+id+');"> <input type="button" value="Отмена" onclick="cancelEdit('+id+');">');
        $('#edit-'+id).show();
    }

    function cancelEdit(id) {
        // тут банально скрываем div редактирования, и возвращаем тот, что был изначально
        $('#edit-'+id).hide();
        $('#post-'+id+'-container').show();
    }

    function savePost(id) {
        // мы отправляем ajax-запрос файлу ajax/post_edit.php; функцией serializeArray() мы просто и красиво собираем post-переменные для отправки из dom документа - у них у всех класс to_send
        $.post('ajax/post_edit.php', $('#edit-'+id+' .to_send').serializeArray(), function(data) {
            $('#edit-'+id).hide();
            $('#post-'+id+'-message').html(data); // переменная data содержит текст, который вернет файл post_edit.php
            $('#post-'+id+'-container').show();
        }).fail(function(){    // это будет запущено, если по каким-то причинам запрос выполнится неудачно
            // по сути то же, что и при cancelEdit(), но еще и выразим негодование
            $('#edit-'+id).hide();
            $('#post-'+id+'-container').show();
            alert('Какая-то ошибка при сохранении...');
        });
    }
</script>

В файле ajax/post_edit.php мы просто обрабатываем $_POST переменные new_message и post_id, ищем в базе, есть ли такой пост и тому ли юзеру принадлежит, если да, то меняем текст и выдаем его. Код здесь не привожу, а в файле разумеется он есть, но он очень простой, я даже не комментировал его. Хотя мало ли, чуть что, спрашивайте в комментариях :)

Исходник скачать можно здесь, демка тут (там можно просто посмотреть, как это выглядит, функционально она урезана, т.к. запросы никакие не отправляются и не обрабатываются).


Возможно, вам будет интересно почитать и другие статьи из этой же серии:

1. Создание стены как Вконтакте
2. Создание стены для разных пользователей
3. Информация о сайте при вставке ссылки в запись на стене
4. Удаление записей со стены
5. Добавление фотографий на стену
6. Добавление в друзья
7. Система сообщений как Вконтакте
8. Делаем репосты и лайки на PHP
9. Дорабатываем стену: онлайн-статус пользователя и устройство, с которого он вошел

 Жду с нетерпением
ваших комментариев!
 

Подписаться на RSS

Вы можете нажать "подписаться", чтобы следить за моими новостями!
Так вы всегда будете в курсе появления новостей на сайте =)
О том, что такое RSS можно прочитать здесь.

Подписаться

Подписаться на Twitter

Я специально зарегистрировался в Твиттере, чтобы вы могли следить за обновлениями на сайте =)

Подписаться

Envato marketplace А эти люди занимаются прокатом карнавальных костюмов и масок в Минске. К слову, я им делал сайт.