刷新小部件管理页面重置jQuery隐藏类

时间:2015-11-18 作者:W. Nelson

我正在开发媒体上传小部件。当我上传图像文件时,它会在管理页面中显示图像。在我刷新此页面之前,它将消失。检查后,我发现隐藏类是自动添加的。

我尝试谷歌搜索,只发现了保存小部件的问题(这与我的情况类似)。任何人都可以帮忙。

更多信息:它只在Firefox中工作。它在Chrome和IE中不起作用。(仅测试)

这是我的jQuery文件。

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

var file_frame, image_data, json;

/**
 * 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;

}


file_frame = wp.media.frames.file_frame = wp.media({
    frame:    \'post\',
    state:    \'insert\',
    multiple: false
});


file_frame.on(\'insert\', function ()
{
    $ = jQuery;
    // Read the JSON data returned from the Media Uploader
    json = file_frame.state().get(\'selection\').first().toJSON();

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

    // After that, set the properties of the image and display it
    $(\'.media-upload-container\')
    .children(\'img.wp-post-image\')
        .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
    $(\'.media-upload-container\')
    .prev()
    .hide();

    // Display the anchor for the removing the background image
    $(\'.media-upload-container\')
    .next()
    .show()

    // Store the image\'s information into the meta data fields. 

    $(\'.media\').val(json.url);

});

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

 }

 jQuery(document).ready(function($) {
     \'use strict\';

$(function() {
    $( \'.set-background-thumbnail\' ).on( \'click\', function( evt ) {

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

        // Display the media uploader
        renderMediaUploader();

    });
    $( \'.remove-background-thumbnail\' ).on( \'click\', function( evt ) {

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

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

    });

    renderFeaturedImage( $ );
});

 })

 jQuery(document).ajaxSuccess(function (event, xhr, settings)
 {
var widget_id_base = \'image_widget\';
if (settings.data !== "undefined")
{
    if (settings.data.search(\'action=save-widget\') != -1 && settings.data.search(\'id_base=\' + widget_id_base) != -1)
    {
        \'use strict\';

        $(function ()
        {
            $(\'.set-background-thumbnail\').on(\'click\', function (evt)
            {
                // Stop the anchor\'s default behavior
                evt.preventDefault();

                // Display the media uploader
                renderMediaUploader();

            });
            $(\'.remove-background-thumbnail\').on(\'click\', function (evt)
            {

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

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

            });

            renderFeaturedImage($);
        });
    }
}
 });

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

// First, we\'ll hide the image
$( \'.media-upload-container\' )
    .children( \'img.wp-post-image\' )
    .hide();

// Then display the previous container
$( \'.media-upload-container\' )
    .prev()
    .show();

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

// Finally, we reset the meta data input fields
    $( \'.media-upload-meta\' )
    .children()
    .val( \'\' );
 }


 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 ( $( \'.media\' ).val() ) ) {

    $( \'.media-upload-container\' ).removeClass( \'hidden\' );

    $( \'.set-background-thumbnail\' )
        .parent()
        .hide();

    $( \'.remove-background-thumbnail\' )
        .parent()
        .removeClass( \'hidden\' );

}

 }

1 个回复
SO网友:W. Nelson

我现在可以解决这个问题了。因为,我忘了将媒体上传小部件的标签/id放在小部件表单部分。

你好,W.Nelson