Это моя первая попытка добавить ajax в плагин WordPress.У меня был некоторый успех, но есть пара областей, где я застрял.Я узнал огромное количество от всех присутствующих здесь, так что я надеюсь, что не потерял свой прием?;)
Вот сценарий.Я пытаюсь использовать ajax для предотвращения перезагрузки страницы после обновления списка ответов на вопросы, которые являются отдельными формами.Это часть страницы администрирования для плагина WordPress, но я думаю, что я покрыл свои базы с помощью WP, так как он работает до определенного момента.
PHP:
//Update an answer
function ccd_ex_update_answer() {
global $wpdb;
$wpdb->update( $wpdb->prefix . 'ccd_ex_answers', array(
'answer' => $_POST['answer'],
'sort' => $_POST['sort'],
'correct' => $_POST['correct'],
'question_id' => $_POST['question_id']
), array(
'ID' => $_POST['id']
)
);
}
add_action( 'wp_ajax_ccd_ex_update_answer', 'ccd_ex_update_answer' );
JQuery:
//Update Answers
jQuery(document).ready(function($) {
$('.aupdatebutton').live("click", function(){
var thisupdate = $(this).data('aupdate');
$(thisupdate).submit(function(){
var answer = $(".answer").val();
var sort = $(".sort").val();
var correct = $(".correct").val();
var question_id = $(".question_id").val();
var id = $(".id").val();
$.ajax({
type: 'POST',
url: ajaxurl,
data: {
action: 'ccd_ex_update_answer',
answer: answer,
sort: sort,
correct: correct,
question_id: question_id,
id: id
},
success: function(data, textStatus, XMLHttpRequest){
jQuery("#test-div").html('').fadeIn(500);
jQuery("#test-div").append("Answer Updated!").fadeOut(3000);
},
error: function(MLHttpRequest, textStatus, errorThrown){
alert(errorThrown);
}
});
return false;
});
});
});
Проблема 1. Как сейчас, ajax-вызовы работают для обновления поля, связанного с .answer, но когда я пытаюсь обновить любойдругих полей в форме, это не происходит.Что мне не хватает в этом отношении?
Задача 2. Я хотел бы добавить возможность обновлять список ответов, чтобы отразить недавно обновленный контент с использованием ajaxзвонки также.Как мне добавить правильный обратный вызов, чтобы сделать это? РЕДАКТИРОВАТЬ: Проблема 1 сделала этот поток настолько длинным, что я перенесу этот вопрос в новый поток.
Эти списки ответов в настоящее время создаются в цикле, например:
<?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">
<input type="hidden" class="id" name="id" value="<?php echo $arow->id; ?>" />
<input type="hidden" class="question_id" name="question_id" value="<?php echo $qrow->id; ?>" />
<div style="float:left;">
<input type="text" style="width:40px;margin-right:15px;" class="sort" name="sort" value="<?php echo $arow->sort; ?>"/>
</div>
<div style="float:left;">
<input type="text" style="width:480px;" class="answer" name="answer" value="<?php echo $arow->answer; ?>"/>
</div>
<div style="float:left;">
<select class="correct" name="correct">
<option value="0"<?php selected( 0 , $arow->correct ); ?>>No</option>
<option value="1"<?php selected( 1 , $arow->correct ); ?>>Yes</option>
</select>
</div>
<div>
<input type="submit" name="aupdate" data-aupdate="#update-answer-<?php echo $arow->question_id."-".$arow->id; ?>" value="Update" class="aupdatebutton ccd-ex-show-questions toggletable<?php echo $qrow->id; ?>"/>
<input type="submit" name="adelete" value="Delete" class="ccd-ex-show-questions toggletable<?php echo $qrow->id; ?>"/>
</div>
<div style="clear:both;"></div>
</form>
<?php
}
?>
Я своего рода промежуточный нуб в области jQuery и js в целом, и, как я уже сказал, это моя первая попытка ajax.Я рад, что мне все объяснили, если это позволит избежать важных знаний, пролетевших над моей головой.
Я останусь рядом на случай, если упущу что-нибудь важное.
Спасибо!
ОБНОВЛЕНИЕ:
Мне кажется, что, возможно, проблема с полями, которые не обновляются, связана с их структурой базы данных?Поле, которое обновляет, является VARCHAR, но два, которые не являются INT и BOOLEAN ... не уверены, имеет ли это значение или нет.Не было, когда функция была полностью PHP.
UPDATE2:
Исправлена опечатка в коде, которая по-прежнему не влияла ни на одну из проблем.
UPDATE2:
Вот результаты вывода отладочной информации на консоль в соответствии с рекомендациями бренда:
int(0)
0
UPDATE3:
При дальнейшей отладке я записывал каждую отдельную переменную в консоль, и независимо от того, какой ответ я обновляю в списке ответов, переменные отражают форму / поля в первой позиции списка.Теперь я вижу, что мое первоначальное убеждение, что обновлялось только поле ответа, было неверным.
Что действительно происходит, так это то, что первый элемент в списке обновляется должным образом, а все остальные не работают, что, вероятно, связано с содержимым переменных jQuery.
Теперь возникает вопрос, как мне настроить мои переменные так, чтобы они заполнялись соответствующим экземпляром полей формы?
В случае, если это помогает визуализировать все это, здесьэто скриншот страницы администратораТекущие проблемы связаны только с функцией (ами) для обновления Ответа.
ОБНОВЛЕНИЕ 4 - ЗАКЛЮЧИТЕЛЬНАЯ РАБОЧАЯ ВЕРСИЯ:
Вот окончательная версия jQuery.Хотя в комментариях был хороший совет по поводу другого кода, решение моего вопроса было в jQuery.Решением было правильно определить экземпляр, из которого заполняются переменные.
Рабочий jQuery:
//Update Answers
jQuery(document).ready(function($) {
$('.aupdatebutton').live("click", function(){
var thisupdate = $(this).data('aupdate');
$(thisupdate).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();
var id = $(this).find('.id').val();
$.ajax({
type: 'POST',
url: ajaxurl,
data: {
action: 'ccd_ex_update_answer',
answer: answer,
sort: sort,
correct: correct,
question_id: question_id,
id: id
},
success: function(data, textStatus, XMLHttpRequest){
jQuery("#test-div").html('').fadeIn(500);
jQuery("#test-div").append("Answer Updated!").fadeOut(3000);
console.log(data);
console.log(answer);
console.log(sort);
console.log(correct);
},
error: function(MLHttpRequest, textStatus, errorThrown){
alert(errorThrown);
}
});
return false;
});
});
});