第一次ajax'er - 关闭但缺少几件

时间：2011-11-13 22:37:17

标签： php jquery ajax wordpress

这是我第一次尝试将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：

根据brandwaffel的建议，以下是向控制台输出调试信息的结果：

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;
        });
    });
});

1 个答案:

答案 0 :(得分：1)

更新：我认为您正在遇到有问题的问题。目前，你的jQuery正在抓取.id字段，它会在你的id列表中获得第一个id。您需要为jQuery建立一个上下文来查看特定的问题元素。尝试

$(this).find('.id').val();

依此类推您提交给ajax端点的所有元素。

/更新

看起来你有这个：

'correct' => $_POST['sort'],

你可能想要这个：

'correct' => $_POST['correct'],

为了进一步测试，我建议调试$ wpdb-＆gt;更新调用的结果

 $debug = $wpdb->update( $wpdb->prefix . 'ccd_ex_answers', array( 
        'answer' => $_POST['answer'],
        'sort' => $_POST['sort'],
        'correct' => $_POST['sort'],
        'question_id' => $_POST['question_id']
    ), array(
        'ID' => $_POST['id']
    ) 
 );
var_dump($debug);

然后在ajax成功处理程序中，只需添加：

console.log(data);

并且您将看到ajax响应的结果（应该是更新查询中更改的行的数组）。

另外，当您单击提交按钮时，您是否在JS控制台中看到任何错误？

相关问题
最新问题