1

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"
        }
    });
});
1

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>');
        }
    });
});
  • OK, this method will display the message, but it is the correct way to do it. I believe I am losing some of the admin_notice functionality. For instance dismissable notices dont work when I click on the X to close the notice. How can I call the add_action admin_notices hook from a jQuery event? – mosley Dec 4 '15 at 21:18
  • Admin notices are nothing more than some HTML. You can add your own click event to dismiss the message with a little jQuery. - codex.wordpress.org/Plugin_API/Action_Reference/admin_notices – Douglas.Sesar Dec 5 '15 at 4:59
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.