显示ADMIN_NOTICE错误消息表单jQuery事件

时间：2015-12-03 作者：mosley

我想在插件的自定义管理页面上显示一条admin\\u通知错误消息，但我只想从jQuery事件中显示它。

我所有的jQuery都在工作。我可以发送数据、查看警报、接收数据。但是我无法从jQuery事件中获得要工作的错误消息。

这将在仪表板的每个屏幕上显示错误消息。

add_action(\'admin_notices\', \'my_error_notice\');

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

这将仅在“我的管理”页面上显示错误消息。

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事件的错误消息。

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

3 个回复

SO网友:mosley

多亏了道格拉斯。塞萨尔为我指出了正确的方向。非常感谢！这就是我所做的。。。

首先将以下id放在插件的标题中。我直接在这个标题后面添加管理消息html（通过jQuery）。

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

我的jQuery函数：

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

我的电话：

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

我做到了，所以我总是使用“错误”管理通知，只是更改颜色。

最后，删除消息的函数：

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();
        });
    });
}
}

我希望其他人会觉得这很有用。

SO网友:Douglas.Sesar

您可以在AJAX调用的成功函数中添加错误消息HTML：

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

SO网友:sariDon

我想出了另一个简单的工作解决方案，从jquery javascript和ajax在wordpress admin中抛出一个可撤销的通知。希望这对别人有帮助。

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:记住把<hr class="wp-header-end"> 标题下方。

仅此而已。

小码农CODE

显示ADMIN_NOTICE错误消息表单jQuery事件

相关推荐

删除jQuery后在页脚加载jQuery迁移吗？