如果已加载/存在精选图片,则在自定义元框中触发JS

时间:2016-05-30 作者:DᴀʀᴛʜVᴀᴅᴇʀ

使用WordPress定制,我创建了一个元框,其他几个元框可以报告帖子的详细信息。一个元框评估特征图像,但我很难弄清楚如何在元框的内容中启动AJAX。起初我认为我需要调查admin-ajax.php 所以我跟着Using AJAX With PHP on Your WordPress Site Without a Plugin 但在查看之后,我需要检查帖子是否在元框内容中加载了缩略图。我在标签下搜索 和标记 我发现的是Trigger JS when featured image upload window is opened in admin 这让我开始寻找wp.media.featuredImage 但是,如何使用AJAX构建函数,以便在加载特征图像时运行,如果没有加载,则不要运行。

我可以通过以下方式使其工作:

function foobar_metabox_callback( $post ) {
    wp_nonce_field( basename( __FILE__ ), \'metabox_meta_nonce\' );
    $metabox_stored_meta = get_post_meta( $post->ID );
    if ( has_post_thumbnail() ) { ?>
    <p>
        <!-- show results -->
    </p>
    <?php } else { ?>
        <p>No Featured Image not loaded</p>
    <?php
    }

    // test the meta content
    $getPostCustom=get_post_custom();
    var_dump($getPostCustom);
}
但只有在特色图片加载到帖子后我才会刷新。如何获取函数foobar_metabox_callback() 在不刷新的情况下运行,请使用admin-ajax.php 如果可能的话?

进一步参考:

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

我找不到任何可连接到的WP特定事件。您可以使用回调设置一个观察器,以响应DOM更改MutationObserver 并检查您的特色图像是否已添加到回调中。

no support 在IE中(<);不过,这可能会破坏你的交易,也可能不会。

我已经对此进行了最少的测试,但它对我有效:

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {

    // Fires every time a mutation occurs...

    // forEach all mutations
    mutations.forEach(function(mutation) {

        // Loop through added nodes
        for (var i = 0; i < mutation.addedNodes.length; ++i) {

            // any images added?
            if ( mutation.addedNodes[i].getElementsByTagName(\'img\').length > 0) {
                alert(\'Featured Image Added\');

                // Your featured image now exists
                console.log( $(\'#postimagediv img\') );

                // Do some AJAX...
            }
        }
    });
});

// define what element should be observed (#postimagediv is the container for the featured image)
// and what types of mutations trigger the callback
var $element = $(\'#postimagediv\');
var config = { subtree: true, childList: true, characterData: true };

observer.observe( $element[0], config );
可能有一种更好的方法来检查特征图像,而不仅仅是检查img 要素您可能希望有一个var来跟踪特征图像,以便您可以轻松地检查它是否也被删除(或者只需检查removedNodes 在observer回调中)。

这不会在页面加载时运行,因此您应该首先检查是否存在特色图像。

进一步阅读突变观察者:

SO网友:Mark Kaplun

非常广泛的解决方案。

你面临两个问题

服务器根据是否有特征图像生成不同的HTML

元数据框只是后期编辑的UI工件,不容易通过AJAX进行操作(即使在AJAX中,处理完整对象也比处理其单独属性更容易,即使只是为了保持所有内容的同步)

解决方案是删除第1点并将所有内容保留在客户端中。添加所有HTML,就像有一个特色图片一样,只需使用display:none 或类似。

现在,您所要做的就是监视何时插入特征图像,可能是通过DOM突变事件或使用jQuery可以执行的任何操作(甚至可能有一个由WP JS引发的事件与图像关联)。一旦检测到图像存在,就可以更新元数据库中的任何值并删除display:none.

根据所做工作的复杂性,您不太可能获得与使用已存在的特征图像呈现html时相同的准确行为,但您应该能够获得足够好的内容。

相关推荐

尝试在WordPress中实现AJAX注释,遇到WP错误

我试图在WordPress中为我的评论实现Ajax,使用this tutorial. 但我在将教程中的代码集成到自己的预构建主题时遇到了问题。问题是,我要么得到一个WP错误“检测到重复注释;看来你已经说过了!”或标准500错误。以下是我得到的:下面是我对ajax的评论。js文件如下所示: * Let\'s begin with validation functions */ jQuery.extend(jQuery.fn, { /* * check i