Как обновить контент после обновления ajax? - PullRequest
Новая
       7

Как обновить контент после обновления ajax?

0 голосов
/ 15 ноября 2011

У меня есть страница администратора для плагина WordPress, благодаря сообществу stackoverflow , я узнал, как добавить вызовы ajax ко всем функциям, которые добавляют / удаляют / обновляют вопросы и ответы дляПлагин для доступа.

Чтобы помочь визуализировать его: enter image description here

Следующим шагом является обновление содержимого после успешного вызова AJAX.Конечно, я не хочу просто перезагружать страницу и предполагаю, что обновление всей страницы может привести к сбою ответов div, что нежелательно.Поэтому лучше всего обновлять только связанный контент.

Список вопросов генерируется с помощью следующего обращения к базе данных: 

<?php
    $qresult = $wpdb->get_results("SELECT * FROM " . $wpdb->prefix . "ccd_ex_questions ORDER BY sort ASC");
    $qcount = $wpdb->num_rows;
    foreach( $qresult as $key => $qrow ) {
    ?>

        <div id="question<?php echo $qrow->id; ?>" class="display-questions">
            <form id="update-question-<?php echo $qrow->id; ?>" action="" method="post">

                            //question form and content

            </form> {snip...}

, и ответы выполняются аналогично и в цикле, генерирующемсписок вопросов: 

<?php
$aresult = $wpdb->get_results("SELECT * FROM " . $wpdb->prefix . "ccd_ex_answers WHERE question_id = " . $qrow->id . " ORDER BY sort ASC");
foreach( $aresult as $key => $arow ) {
?>      

    <form id="update-answer-<?php echo $arow->question_id."-".$arow->id; ?>" action="" method="post">

            //answer form and content

    </form> {snip...}

Ниже приведена одна из функций jQuery, использующая вызов ajax для обновления содержимого: 

//Add New Answer
    jQuery(document).ready(function($) {        
        $('.asubmitbutton').live("click", function(){   
        var thisasubmit = $(this).data('asubmit');
            $(thisasubmit).submit(function(){

                // Get the proper instance of the form fields for the variables
                var answer = $(this).find('.answer').val();
                var sort = $(this).find('.sort').val();
                var correct = $(this).find('.correct').val();
                var question_id = $(this).find('.question_id').val();

                $.ajax({
                    type: 'POST',
                    url: ajaxurl,
                    data: {
                        action: 'ccd_ex_insert_answer',
                        answer: answer,
                        sort: sort,
                        correct: correct,
                        question_id: question_id
                    },
                    success: function(data, textStatus, XMLHttpRequest){
                    console.log(data);
                    console.log(answer);
                    console.log(sort);
                    console.log(correct);
                    },
                    error: function(MLHttpRequest, textStatus, errorThrown){
                        alert(errorThrown);
                    }
                });
            return false;
            });
        });
    });

И пока мы здесь, вот функция phpобработка этого вызова ajax: 

//Add an answer
function ccd_ex_insert_answer() {
    global $wpdb;
    $wpdb->insert( $wpdb->prefix . 'ccd_ex_answers', array( 
        'answer' => $_POST['answer'],
        'sort' => (int)$_POST['sort'],
        'correct' => (bool)$_POST['correct'],
        'question_id' => (int)$_POST['question_id']
        )
    );
}
add_action( 'wp_ajax_ccd_ex_insert_answer', 'ccd_ex_insert_answer' );

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

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

Итак, мой вопрос: Как обновить только обновленный контент после вызова ajax и, если возможно, сохранить видимость расширенных элементов div?

Любая помощь будет принята с благодарностью! Примечание: Я всего лишь промежуточный пользователь jQuery, и это моя первая попытка ajax, поэтому лучше предположить, что я ничего не знаю, если это мешает чему-то важному выстрелить мне в голову.;)

ОБНОВЛЕНИЕ: Я думаю, что делаю успехи, но все еще чего-то не хватает.Проблема с предлагаемым решением состоит в том, что .html (данные) возвращал '0'.Удалив строку: url: ajaxurl, из вызова ajax, теперь возвращается весь контент страницы.Что мне действительно нужно вернуть, так это только обновленный контент.

1 Ответ

3 голосов
/ 15 ноября 2011

Во-первых, вы хотите сделать POST для страницы / URL, которая будет возвращать только обновленное содержимое для определенного элемента (скажем, с id = "id").Например, вы делаете вызов 

$.ajax({url:"http://example.com/newcontent.php", ...});

и страница PHP просто возвращает 

<?php echo "thisisnewcontent"; ?>

Затем вы можете обновить html любого элемента DOM с помощью 

$("css_selector").html(newContent); // newContent will contain "thisisnewcontent"

Это обновление следует выполнить в функции успеха ajax, где «данные» представляют данные, полученные с сервера. 

$.ajax({ ..., success: function(data, textStatus, XMLHttpRequest) {
    $("#id").html(data);
});

Подробнее о ajax () и html () можно прочитать здесь http://api.jquery.com/jQuery.ajax и здесь http://api.jquery.com/html/

Удачи!

...