Question

我需要能够弹出一个模式来快速编辑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>

这是我的editPolls触发的JavaScript，添加了admin_print_footer_scripts

    <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类，则控制台会发出正确的信息。

只有将thickPow与editPoll类放在一起时才会出现问题。 thickbox似乎会杀死任何其他脚本。我已经尝试更改类的顺序，看看是否可以解决问题，但这是不行的。

Answer 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>

现在它完美无缺。

使用jQuery在WordPress Thickbox中操作数据

1 个答案: