{"id":182,"date":"2017-09-12T11:51:23","date_gmt":"2017-09-12T09:51:23","guid":{"rendered":"http:\/\/geekinto.com\/?p=182"},"modified":"2017-09-12T12:51:19","modified_gmt":"2017-09-12T10:51:19","slug":"oracle-apex-how-to-show-an-alert-successerror-message-by-javascript","status":"publish","type":"post","link":"https:\/\/howoracleapex.com\/?p=182","title":{"rendered":"Oracle APEX | How to show an Alert Success\/Error Message by JavaScript?"},"content":{"rendered":"

It’s simple just follow next\u00a0Steps …<\/strong><\/p>\n

METHOD #1<\/strong><\/em><\/p>\n

    \n
  1. Put next JavaScript code into Page Or Application level.\n
    function showAlert(Type,Msg){\r\n    var findSpan = $('#APEX_SUCCESS_MESSAGE').length;\r\n    if (findSpan == 1){\r\n        $('#APEX_SUCCESS_MESSAGE').remove();\r\n\r\n        \/\/ Re-Run\r\n        showAlert(Type,Msg);\r\n    } else{\r\n            \/\/ Adding HTML code!\r\n            $('#t_Body_content').prepend(\r\n                '<span id=\"APEX_SUCCESS_MESSAGE\" class=\"apex-page-success\"><div class=\"t-Body-alert\">'\r\n                + '<div class=\"t-Alert t-Alert--defaultIcons t-Alert--success t-Alert--horizontal t-Alert--page t-Alert--colorBG\" '\r\n                + 'id=\"t_Alert_Success\" role=\"alert\" style=\"display: none;\"><div class=\"t-Alert-wrap\"><div class=\"t-Alert-icon\">'\r\n                + '<span style=\"color: white; font-size: 25px;\" class=\"fa fa-check fa-xl fa-anim-flash\"><\/span><\/div>'\r\n                + '<div class=\"t-Alert-content\"><div class=\"t-Alert-header\"><h2 class=\"t-Alert-title\">'\r\n                + Msg\r\n                + '<\/h2><\/div><\/div><div class=\"t-Alert-buttons\"><button class=\"t-Button t-Button--noUI t-Button--icon t-Button--closeAlert\" '\r\n                + 'type=\"button\" title=\"Close Notification\"><span class=\"t-Icon icon-close\"><\/span><\/button><\/div><\/div><\/div><\/div><\/span>');\r\n\r\n                $('#t_Alert_Success > div > div.t-Alert-buttons > button[title=\"Close Notification\"]')\r\n                    .on('click',function(){\r\n                    $('#APEX_SUCCESS_MESSAGE').remove();\r\n                });\r\n\r\n            if(Type=='s'){\r\n                $.when(\r\n                    \/\/ Auto close success message\r\n                    $('#t_Alert_Success').show(),\r\n                    $('#t_Alert_Success').fadeIn(300).delay(2000).fadeOut(400)\r\n                ).then(\r\n                        function(){\r\n                            $('#APEX_SUCCESS_MESSAGE').remove();\r\n                        });\r\n\r\n            }else if(Type=='e'){\r\n                    \/\/ Set error style ...\r\n                    $('#t_Alert_Success').attr('style','background-color: #e95b54;');\r\n                    $('#t_Alert_Success div div.t-Alert-icon span').removeClass('fa-check');\r\n                    $('#t_Alert_Success div div.t-Alert-icon span').addClass('fa-close');\r\n                    $('#t_Alert_Success').show();\r\n            }       \r\n    }\r\n}<\/pre>\n
     <\/li>\n
  2. When you want to show alert message call showAlert JS function by…# In SUCCESS message case write …\n
    showAlert('s','Done, Thank you!');<\/pre>\n
    # In ERROR message case write …<\/p>\n
    showAlert('e','Error, Please check again!');<\/pre>\n
     <\/p>\n
    [embedyt] https:\/\/www.youtube.com\/watch?v=rT37SS5AhvU[\/embedyt]<\/li>\n<\/ol>\n
     <\/p>\n
     <\/p>\n
    METHOD #2<\/strong><\/em><\/p>\n
    by APEX JavaScript APIs<\/p>\n
    apex.message.hidePageSuccess<\/a><\/strong><\/p>\n
    apex.message.hidePageSuccess<\/a><\/strong><\/p>\n
    apex.message.showErrors<\/a><\/strong><\/p>\n
    Ref:\u00a0<\/strong>https:\/\/docs.oracle.com\/database\/apex-5.1\/AEAPI\/apex-message-namespace.htm#AEAPI-GUID-D15040D1-6B1A-4267-8DF7-B645ED1FDA46<\/a><\/p>\n
    Regards,<\/p>\n","protected":false},"excerpt":{"rendered":"
    It’s simple just follow next\u00a0Steps … METHOD #1 Put next JavaScript code into Page Or Application level. function showAlert(Type,Msg){ var findSpan = $(‘#APEX_SUCCESS_MESSAGE’).length; if (findSpan == 1){ $(‘#APEX_SUCCESS_MESSAGE’).remove(); \/\/ Re-Run showAlert(Type,Msg); } else{ \/\/...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,15,13,12,2],"tags":[],"class_list":["post-182","post","type-post","status-publish","format-standard","hentry","category-apex","category-css","category-jquary","category-jscript","category-oracle"],"_links":{"self":[{"href":"https:\/\/howoracleapex.com\/index.php?rest_route=\/wp\/v2\/posts\/182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howoracleapex.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howoracleapex.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howoracleapex.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howoracleapex.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=182"}],"version-history":[{"count":7,"href":"https:\/\/howoracleapex.com\/index.php?rest_route=\/wp\/v2\/posts\/182\/revisions"}],"predecessor-version":[{"id":189,"href":"https:\/\/howoracleapex.com\/index.php?rest_route=\/wp\/v2\/posts\/182\/revisions\/189"}],"wp:attachment":[{"href":"https:\/\/howoracleapex.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howoracleapex.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howoracleapex.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}