Refresh widget admin page resetting jQuery hidden class

Question

I am working on Media Upload widget. When I upload image file, it show the image in the admin page. Until I refresh this page, it is disappeared. After I checked, I found that the hidden class is added automatically.

I tried to google and found only the save widget problem (It is similar with my case). Anyone can help.

More Information: it works in Firefox only. It does not work in Chrome and IE. (just test)

This is my jQuery file.

 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' );

}

 }

Answer 1

I can solve the problem now. Because, I forget to put the label/id of media upload widget in the widget form section.

Regards, W. Nelson