Display admin_notice error message form jQuery event

admin管理员组

文章数量:1196136

I want to display an admin_notice error message on the custom admin page of my plugin - but I want it to only be displayed from a jQuery event.

All of my jQuery is working. I can send data, see alerts, receive data. But I cannot get the error message to work from the jQuery event.

This displays the error message on every screen in the dashboard.

add_action('admin_notices', 'my_error_notice');

function my_error_notice () {
    echo '<div class="error"><p>This is my error message.</p></div>';
}

This displays the error message on my admin page only.

add_action('admin_notices', 'my_error_notice');

function my_error_notice () {
    global $my_admin_page;
    $screen = get_current_screen();
    if ( $screen->id == $my_admin_page ) {
            echo '<div class="error"><p>This is my error message.</p></div>';
        } else {
      return;
        }
}

I want to only display the error message from a jQuery event.

add_action('wp_ajax_test_function', 'test_function');

function test_function() {
    add_action('admin_notices', 'my_error_notice');
}

function my_error_notice () {
    global $my_admin_page;
    $screen = get_current_screen();
    if ( $screen->id == $my_admin_page ) {
            echo '<div class="error"><p>This is my error message.</p></div>';
        } else {
      return;
        }
}

jQuery

jQuery(document).ready(function() {
jQuery("#my-button").click(function() {
    jQuery.ajax({
        type: 'POST',
        url: myAjax.ajaxurl,
        data: {
            "action": "test_function"
        }
    });
});

I want to display an admin_notice error message on the custom admin page of my plugin - but I want it to only be displayed from a jQuery event.

All of my jQuery is working. I can send data, see alerts, receive data. But I cannot get the error message to work from the jQuery event.

This displays the error message on every screen in the dashboard.

add_action('admin_notices', 'my_error_notice');

function my_error_notice () {
    echo '<div class="error"><p>This is my error message.</p></div>';
}

This displays the error message on my admin page only.

add_action('admin_notices', 'my_error_notice');

function my_error_notice () {
    global $my_admin_page;
    $screen = get_current_screen();
    if ( $screen->id == $my_admin_page ) {
            echo '<div class="error"><p>This is my error message.</p></div>';
        } else {
      return;
        }
}

I want to only display the error message from a jQuery event.

add_action('wp_ajax_test_function', 'test_function');

function test_function() {
    add_action('admin_notices', 'my_error_notice');
}

function my_error_notice () {
    global $my_admin_page;
    $screen = get_current_screen();
    if ( $screen->id == $my_admin_page ) {
            echo '<div class="error"><p>This is my error message.</p></div>';
        } else {
      return;
        }
}

jQuery

jQuery(document).ready(function() {
jQuery("#my-button").click(function() {
    jQuery.ajax({
        type: 'POST',
        url: myAjax.ajaxurl,
        data: {
            "action": "test_function"
        }
    });
});

• jquery

Share Improve this question asked Dec 3, 2015 at 19:06 mosleymosley 7111 silver badge88 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 3

Thanks to Douglas.Sesar for pointing me in the right direction. Much appreciated! This is what I did...

First put the following id in the title heading of the plugin. I am adding the admin message html (via jQuery) directly after this heading.

<h1 id="my-admin-message">My Plugin Title</h1>

My jQuery function:

function fnDisplayAdminMessage(adminMessage, adminMessageColor) {
jQuery.ajax({
    type: 'POST',
    url: myAjax.ajaxurl,
    success: function(response) {
        jQuery('#my-admin-message').after('<div class="error notice is-dismissible"><p>' + adminMessage + '</p><button id="my-dismiss-admin-message" class="notice-dismiss" type="button"><span class="screen-reader-text">Dismiss this notice.</span></button></div>');
        jQuery("#my-dismiss-admin-message").click(function(event) {
            event.preventDefault();
            jQuery('.' + 'error').fadeTo(100, 0, function() {
                jQuery('.' + 'error').slideUp(100, function() {
                    jQuery('.' + 'error').remove();
                });
            });
        });
        switch (adminMessageColor) {
        case 'yellow':
            jQuery("div.error").css("border-left", "4px solid #ffba00");
            break;
        case 'red':
            jQuery("div.error").css("border-left", "4px solid #dd3d36");
            break;
        default:
            jQuery("div.error").css("border-left", "4px solid #7ad03a");
        }
    }
});
}

And my call:

fnDisplayAdminMessage('There was an error.', 'red');

I made it so I am always using the 'error' admin notice, and just changing the color.

Lastly, a function to remove the message:

function fnRemoveAdminMessage() {
// check if there is an admin message displayed, if so then remove it
if (jQuery("div.error").length) {
    jQuery("div.error").fadeTo(100, 0, function() {
        jQuery("div.error").slideUp(100, function() {
            jQuery("div.error").remove();
        });
    });
}
}

I hope someone else finds this useful.

You can add the error message HTML in the success function of your AJAX call:

jQuery(document).ready(function() {
jQuery("#my-button").click(function() {
    jQuery.ajax({
        type: 'POST',
        url: myAjax.ajaxurl,
        data: {
            "action": "test_function"
        },
        success: function(response){
                jQuery('#wpbody-content').prepend('<div class="error"><p>'+response.error_message+'</p></div>');
        }
    });
});

I have come up to another simple working solution to throw a dismissable notice in wordpress admin from jquery javascript with ajax. Hope this helps someone.

jQuery(document).ready(function() {
jQuery("#my-button").click(function() {
    jQuery('.my_notice').remove(); // remove previous notices
    jQuery.ajax({
        type: 'POST',
        url: myAjax.ajaxurl,
        data: {"action": "test_function"},
        success: function(response){
                var msg= '';
                if(response.error_message=='')
                     msg= '<div class="notice notice-success is-dismissible my_notice"><p><strong>SUCCESS: </strong>This is my success message.</p><button type="button" class="notice-dismiss" onclick="javascript: return px_dissmiss_notice(this);"><span class="screen-reader-text">Dismiss this notice.</span></button></div>';
                else
                     msg= '<div class="notice notice-error is-dismissible my_notice"><p><strong>ERROR: </strong>'+response.error_message+'.</p><button type="button" class="notice-dismiss" onclick="javascript: return px_dissmiss_notice(this);"><span class="screen-reader-text">Dismiss this notice.</span></button></div>';
                jQuery('.wp-header-end').after(msg);
        },
        error: function(xhr){
                jQuery('.wp-header-end').after('<div class="notice notice-error is-dismissible my_notice"><p><strong>ERROR: </strong>'+ xhr.status +' '+ xhr.statusText+'.</p><button type="button" class="notice-dismiss" onclick="javascript: return px_dissmiss_notice(this);"><span class="screen-reader-text">Dismiss this notice.</span></button></div>');
        },
    });
});

function px_dissmiss_notice(dobj)
{
    jQuery(dobj).parent().slideUp("normal", function() {jQuery(this).remove();});
    return false;
}

NOTE: Remember to put <hr class="wp-header-end"> below the title.

Thats all.

This is Work For me!

if( 'before' == response ) {

                $( '.rcpl-form-content' ).css( 'visibility', 'hidden' );
                $( '.rcpl-success-message' ).show();
            } else {

                let jsonEncode = JSON.parse( response );
                if( jsonEncode.status == 'false' ) {

                    $( '.rcpl-success-message' ).addClass( 'notice notice-error' );
                    $( '.rcpl-success-message' ).html( '<div class="rcpl-error-wrap">'+jsonEncode.message+' <span class="dashicons dashicons-no-alt rcpl-close-icon"></span> </div>' );

                } else {
                    location.reload( true );
                }
            }

本文标签： Display adminnotice error message form jQuery event