通过AJAX添加类别时调用Java脚本函数

时间:2016-01-06 作者:Ihor Vorotnov

我创建了一个插件来处理类别的特征图像(实际上,对于自定义分类法,这并不重要)。一切正常,除了添加新术语后未清除特征图像。正在重置所有标准字段,但自定义图像未重置。

问题是,分类术语是通过ajax添加的,没有重新加载页面(如帖子或页面)。所以我需要拦截ajax成功事件。

尝试$(document).ajaxSuccess - 不工作。谷歌没有任何有用的结果。

有什么想法吗?

下面是说明问题的屏幕截图。

Term image

下面是我使用的javascript代码:

/**
 * Callback function for the \'click\' event of the \'Set featured image\' anchor in its meta box.
 * Displays the media uploader for selecting an image.
 */
function renderMediaUploader() {
    \'use strict\';

    var file_frame, image_data;

    /**
     * If an instance of file_frame already exists, then we can open it
     * rather than creating a new instance.
     */
    if (undefined !== file_frame) {
        file_frame.open();
        return;
    }

    /**
     * If we\'re this far, then an instance does not exist, so we need to
     * create our own.
     *
     * Here, use the wp.media library to define the settings of the Media
     * Uploader. We\'re opting to use the \'post\' frame which is a template
     * defined in WordPress core and are initializing the file frame
     * with the \'insert\' state.
     *
     * We\'re also not allowing the user to select more than one image.
     */
    file_frame = wp.media.frames.file_frame = wp.media({
        frame: \'post\',
        state: \'insert\',
        multiple: false
    });

    /**
     * Setup an event handler for what to do when an image has been selected.
     *
     * Since we\'re using the \'view\' state when initializing
     * the file_frame, we need to make sure that the handler is attached
     * to the insert event.
     */
    file_frame.on(\'insert\', function () {

        var json, image;
        // Read the JSON data returned from the Media Uploader
        json = file_frame.state().get(\'selection\').first().toJSON();
        image = json.url;

        // First, make sure that we have the URL of an image to display
        if (0 > image.length) {
            return;
        }

        // After that, set the properties of the image and display it
        jQuery(\'#taxonomy-image-container\')
            .children(\'img\')
            .attr(\'src\', json.url)
            .attr(\'alt\', json.caption)
            .attr(\'title\', json.title)
            .show()
            .parent()
            .removeClass(\'hidden\');

        // Next, hide the anchor responsible for allowing the user to select an image
        jQuery(\'#taxonomy-image-container\')
            .prev()
            .hide();

        // Display the anchor for the removing the featured image
        jQuery(\'#taxonomy-image-container\')
            .next()
            .show();

        // Add image url to hidden form field
        jQuery(\'#taxonomy-image-src\').val(json.url);

    });

    // Now display the actual file_frame
    file_frame.open();

}

/**
 * Callback function for the \'click\' event of the \'Remove Featured Image\' anchor in its meta box.
 * Resets the meta box by hiding the image and by hiding the \'Remove Featured Image\' container.
 */
function resetUploadForm($) {
    \'use strict\';

    // First, we\'ll hide the image
    $(\'#taxonomy-image-container\')
        .children(\'img\')
        .hide();

    // Then display the previous container
    $(\'#taxonomy-image-container\')
        .prev()
        .show();

    // Finally, we add the \'hidden\' class back to this anchor\'s parent
    $(\'#taxonomy-image-container\')
        .next()
        .hide()
        .addClass(\'hidden\');

    // Finally, we reset the hidden form field
    $(\'#taxonomy-image-src\')
        .val(\'\');

}

/**
 * Checks to see if the input field for the thumbnail source has a value.
 * If so, then the image and the \'Remove featured image\' anchor are displayed.
 * Otherwise, the standard anchor is rendered.
 */
function renderFeaturedImage($) {

    /* If a thumbnail URL has been associated with this image
     * Then we need to display the image and the reset link.
     */
    if (\'\' !== $.trim($(\'#taxonomy-image-src\').val())) {

        $(\'#taxonomy-image-container\').removeClass(\'hidden\');

        $(\'#set-taxonomy-image\')
            .parent()
            .hide();

        $(\'#remove-taxonomy-image\')
            .parent()
            .removeClass(\'hidden\');

    }

}

(function ($) {
    \'use strict\';

    $(function () {

        $(\'#set-taxonomy-image\').on(\'click\', function (evt) {

            // Stop the anchor\'s default behavior
            evt.preventDefault();

            // Display the media uploader
            renderMediaUploader();

        });

        $(\'#remove-taxonomy-image\').on(\'click\', function (evt) {

            // Stop the anchor\'s default behavior
            evt.preventDefault();

            // Remove the image, toggle the anchors
            resetUploadForm($);

        });

        renderFeaturedImage($);

        /**
         * Now we need to remove the image and toggle the anchors
         * after we successfully added new term
         */
        $(document).ajaxComplete(function( event, xhr, settings ){
            /**
             * We should somehow intercept the correct event among lots of them fired by WordPress
             * and just call: resetUploadForm($);
             */
            console.log( event );
            console.log( xhr );
            console.log( settings );

        });

    });

})(jQuery);

1 个回复
最合适的回答,由SO网友:pxface 整理而成

最近,我也遇到了同样的问题,找到了解决办法。

使用ajaxSuccess事件,因为我们需要在ajax完成时重置输入代码:

$(document).ajaxSuccess(function(e, request, settings){
        var object = $.deparam(settings.data);
        if(object.action === \'add-tag\' && object.screen === \'edit-category\' && object.taxonomy === \'category\'){
            //DO RESET Your Input Here
        }
    });
我用过jquery-deparam plugin 分析设置。数据字符串。

相关推荐

Select2 AJAX和WP查询返回全部,不筛选

所以我在这里有点困惑。我经常使用Select2/AJAX/WP\\u查询来搜索和检索默认的WP帖子类型和我自己的自定义帖子类型。在过去几年中,我构建的几乎每个站点都至少包含一个实现。但是,我目前正在一个网站上搜索自定义帖子类型的结果,它只是返回所有内容。没有发生过滤。这是一个计划工具,管理员正在为一年中的每个月制定一个计划(自定义帖子类型)。时间表的标题为“月-年”,即。\'January 2022\'.问题是,如果您搜索“一月”,例如,您将得到返回的每个存在的时间表。包括2022年2月、2021 6月等