时间戳

首页 > 解决方案 > 我正在尝试在 wordpress 中学习 ajax 以删除表格条目，但在放置时感到困惑

javascript - 我正在尝试在 wordpress 中学习 ajax 以删除表格条目，但在放置时感到困惑

问题描述

我创建了一个 wordpress 插件来为不同联赛中的运动队添加赛程和结果，您可以查看每个联赛的赛程和结果并根据需要删除/编辑它们。

我在末尾添加了一个名为 Delete 的按钮，当我单击该按钮时，我希望它从表中删除条目并使整个条目随着淡入淡出而消失。

我一直在查找有关 ajax 如何与 wordpress 一起使用的网站，但我感到困惑。

这是我的插件中 fixtures_admin.php 页面上的按钮代码和 javascript。

<input type="button" id="<?php echo $elementid; ?>" class="submitDeleteEntry" name="submitDeleteEntry" value="Delete" />

<script type="text/javascript">
    jQuery(document).on('click', '.submitDeleteEntry', function () {
        var id = this.id;
        //alert(id);
        jQuery.ajax({
            type: 'POST',
            url: ajaxurl,
            data: {"action": "fws_delete_row", "id": id},
            success: function (data) {
               
            }
        });
     });
</script>

$elementid 只是使用数据库中的变量 id 并按预期工作。

如果我取消注释警报（id）；我确实收到了带有 id 的警报。

我已将此代码放在注册 ajax 的页面顶部

function fws_delete_row(){
    global $wpdb;
    $dbtable = $wpdb->prefix . 'fws_fixtures';
    $id = $_POST['id'];
    $wpdb->delete($table, array('id' => $id));    
}
add_action( 'wp_ajax_fws_delete_row', 'fws_delete_row' );
add_action( 'wp_ajax_nopriv_fws_delete_row', 'fws_delete_row' );

但是当我单击删除按钮时，什么也没有发生。我曾尝试在互联网上寻找如何做到这一点的例子，但似乎无法找到做到这一点的方法。

我很高兴自己得出结论，但如果有人可以向我解释我哪里出错了，我真的很想学习。

我知道一旦从数据库中删除，我将需要添加更多代码以在页面上删除该行，但现在我只想让按钮至少删除。

我非常感谢你的帮助。

标签： javascriptphpjqueryajaxwordpress

解决方案

I have figured out where I was going wrong, I just had the javascript at the bottom of the file, I had not registered it correctly as indicated in this page https://codex.wordpress.org/AJAX_in_Plugins

I needed to load it into the admin_footer using the code below

add_action( 'admin_footer', 'fws_delete_javascript' );
function fws_delete_javascript() { ?>
<script type="text/javascript">
                            jQuery(document).on('click', '.submitDeleteEntry', function () {
                                var id = this.id;
                                //alert(id);
                                jQuery.ajax({
                                    type: 'POST',
                                    url: ajaxurl,
                                    data: {"action": "fws_delete_row", "id": id},
                                    success: function (data) {
                   
                                    }
                                });
                            });
</script>
<?
}

推荐阅读