Question

我很好奇如何让我的AJAX / JQuery使用新的数据库信息更新页面。

对现有问题的研究表明这些帖子可能会有所帮助：

jQuery AJAX calls to database work, but not in order

与这些建议一致，我创建了一个PHP函数来处理用AJAX发送的数据。在成功上，我淡出旧的HTML，并用新的HTML替换。

问题是，第一次单击DOM元素时，不会显示数据库中的新数据，但是第二次单击它时会显示该数据。我也在第二次点击时收到了不需要的页面刷新。

您可以在以下位置查看实时示例（适用于我的婚礼网站）： http://bucketlingerwedding.com/80s-music-reception/

如果您尝试投票，它第一次不起作用，并且第二次工作（页面重新加载除外）。

我的另一个问题是我不知道cache：是应该设置为'false'还是简单地省略。部分问题可能是我使用replaceWith加载的新HTML（我也尝试过.html（）），每个表行都有相同的类和ID。我很好奇，如果我试图替换一行而不是整个表，并给它一个新的ID和类名，那么JQUERY / AJAX是否会使用数据库中的新信息淡化该新行？

以下是我用于AJAX的代码（部分基于上面的帖子）：

$(document).ready(function(){
//JQuery for the submission of a new list item.
    $('input.[class$="-arrow"]').click(function(e){
        e.preventDefault(); //put e in function.
        var ajaxurl = '<?php echo the_permalink(); ?>';
        if ($(this).hasClass('up-arrow')) {
            var arrowdirection = 'up';
            var entry = $(this).val();
        }
        else if ($(this).hasClass('down-arrow')) {
            var arrowdirection = 'down';
            var entry = $(this).val();
        }
        var rowid = '.line-items-rows' + '#' + entry;
        var data = {
            action: 'cb_lud_arrow_action',
            arrow: arrowdirection,
            entryID: entry
        };
        $.ajax ({
            cache: false,
            type: 'POST',
            url: ajaxurl,
            data: data,
            success: function(data){
                newtable = '<?php 
                $cb_table_code = plugins_url("list-up-down/table-up-down.php", _FILE_);
                include_once "table-up-down.php";
                echo $cb_lud_new_output;
                ?>';
                $('#cb_lud_table').fadeOut('fast', function(){
                    $(this).replaceWith(newtable).hide();
                    newtable.fadeIn('fast');
                });
                }
        });
});
});

注意：我已经确认使用AJAX发布的数据确实更新了数据库表，因此.php文件和ajax POST方法至少可以正常工作。

我基本上需要的是事件的年表：

用户对表格中的一行进行投票（点击）。
将数据发送到MySQL数据库，在正确的列中添加投票。
成功时，函数会从数据库中确定新值并生成新的html。
旧数据淡出，新数据淡入。
每个人都很开心。

如果这更像是一个JQuery解决方案（比如将效果放在正确的顺序，或使用.delay（）函数），或者更多的AJAX解决方案，我设置回调对我来说并不重要基于成功发布数据的功能，或与缓存有关的功能。只是想让它发挥作用。请帮忙。

Answer 1

使用浏览器控制台查看引发的错误。 newtable只是一个字符串，因此您不能将其用作jQuery对象来调用jQuery方法。这会在控制台中抛出错误，并且很容易在代码中进行归零。

在源视图中查看以下输出：

   newtable = '<?php 
            $cb_table_code = plugins_url("list-up-down/table-up-down.php", _FILE_);
            include_once "table-up-down.php";
            echo $cb_lud_new_output;
            ?>';

您可能不需要任何字符串，这是html字符串中表的完整重建，但由于整个页面也在html中返回，因此它是完全重复的，您可以简单地获取html版本本身完全删除上面的内容。

更改为：

     success: function(data){
           /* convert whole page returned to jquery and get inner html of the table*/
            var newRows=$(data).find('#cb_lud_table').html() 
            $('#cb_lud_table').fadeOut('fast', function(){
                 /* insert new rows*/
                $(this).html(newRows).fadeIn('fast');

            });
            }

一旦你开始工作，你可能还需要重新审视你的点击处理程序是如何连接的（我还没看过）。删除旧的html也会删除附加的任何事件。使用委托给表的on()（现在将是永久性资产）将补偿更改html

Answer 2

您已在变量上使用了fadeIn函数。所以它抛出一个错误newtable.fadeIn不是一个函数。你不能在变量上使用fadeIn函数。将id或类名称赋予fadeIn函数。

JQuery / Ajax - 使用.replaceWith或.html在数据库调用后在页面中加载新数据？

2 个答案: