使用 jQuery 在 WordPress Thickbox 中操作数据答案

【问题标题】：Manipulating data in WordPress Thickbox with jQuery使用 jQuery 在 WordPress Thickbox 中操作数据
【发布时间】：2014-07-18 20:03:08
【问题描述】：

我需要能够弹出一个模式来快速编辑 WordPress 后端中的数据。使用thickbox，我可以正常工作，并且创建一个新条目就可以了。我想使用相同的模态进行编辑，只使用 jQuery 来更改一些数据。

这是我用于编辑链接的代码

<a href="#TB_inline?width=600&height=175&inlineId=addNewPoll" data-id="<?php echo $poll->poll_id; ?>" data-question="<?php echo $poll->question; ?>" class="editPoll thickbox">Edit</a>

这是thickbox的代码

    <div id="addNewPoll" style="display:none;">
        <h3 id="newPollHeader">Add A New Poll</h3>
        <form method="post" action="<?php echo admin_url('plugins.php?page=managemkpolls&noheader=true'); ?>">
            <p><input type="text" name="question" id="pollQuestion" placeholder="Question" size="60"></p>
            <p><input type="submit" value="Save Poll" class="button button-primary"></p>
            <input type="hidden" name="action" value="addPoll">
            <input type="hidden" name="id" value="" id="pollId">
        </form>
    </div>

这是我用 admin_print_footer_scripts 添加的 editPolls 触发的 JavaScript

    <script type="text/javascript">
        jQuery(document).on("click", ".editPoll", function () {
            var id = jQuery(this).data('id');
            var question = jQuery(this).data('question');
            console.log(id + ' ' + question);
            jQuery("#pollId").val( id );
            jQuery("#pollQuestion").val( question );
            jQuery("#newPollHeader").html( 'Edit Your Poll' );
        });
    </script>

源代码中的所有内容看起来都应该如此。链接很好，添加了Javascript。当我单击链接时，模式会打开，但它只是标准的添加表单。如果我从编辑链接中删除了thickbox 类，控制台会吐出正确的信息。

只有当thickbox 和editPoll 类一起使用时才会出现问题。厚盒似乎会阻止任何其他脚本运行。我已经尝试更改类的顺序以查看是否可以解决问题，但这是不行的。

【问题讨论】：

这确实看起来应该可以工作。不幸的是，Thickbox 不是一个非常强大的插件，因此它没有回调方法。（它也不再处于开发阶段。）如果您不需要Thickbox 来处理其他事情，请考虑切换到jQueryUI 对话框。
检查浏览器控制台，你可以找出错误..
感谢 jquery ui 的提示，让事情变得更容易。如果其他人偶然发现，包括我在下面使用的代码作为答案。

标签： jquery wordpress thickbox

【解决方案1】：

感谢上面的评论，我选择了 Jquery UI 路线，让事情变得更容易。这是我使用的更新代码。

首先我必须设置一个 admin_enqueue_scripts 函数：

add_action('admin_enqueue_scripts','loadScripts');

这是那个函数：

function loadScripts()
{
    wp_enqueue_style("jquery-ui-css", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.min.css");
    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-dialog');
}

我的链接变成了这个：

<a data-id="<?php echo $poll->poll_id; ?>" data-question="<?php echo $poll->question; ?>" class="editPoll">

模态代码只去掉了样式

    <div id="addNewPoll">
        <h3 id="newPollHeader">Add A New Poll</h3>
        <form method="post" action="<?php echo admin_url('plugins.php?page=managemkpolls&noheader=true'); ?>">
            <p><input type="text" name="question" id="pollQuestion" placeholder="Question" size="60"></p>
            <p><input type="submit" value="Save Poll" class="button button-primary"></p>
            <input type="hidden" name="action" value="addPoll">
            <input type="hidden" name="id" value="" id="pollId">
        </form>
    </div>

这是新的内联javascript：

    <script type="text/javascript">
        jQuery(function() {
            newPoll = jQuery( "#addNewPoll" ).dialog({
                autoOpen: false,
                height: 200,
                width: 600,
                modal: true,
            });

            jQuery(document).on("click", ".editPoll", function () {
                var id = jQuery(this).data('id');
                var question = jQuery(this).data('question');
                console.log(id + ' ' + question);
                jQuery("#pollId").val( id );
                jQuery("#pollQuestion").val( question );
                if(id){
                    jQuery("#newPollHeader").html( 'Edit Your Poll' );
                }
                newPoll.dialog( "open" );
            });
        });
    </script>

现在可以完美运行了。

【讨论】：