Scalable code and much refined to aletrs custom messages based on the errors returned from the server or even static way....JSON

Revision: 57600

at June 2, 2012 22:38 by mavrikicecool

Initial Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Json</title>
    <style>
        html, body
        {
            margin: 0;
            padding: 0px;
            font-family: Arial, Helvetica, sans-serif;
            height: 100%;
            width: 100%;
            background: #99C8E8;
        }
        
        h1
        {
            font-size: 24px;
            padding: 0;
            margin: 0 0 8px 0;
        }
        
        #logo
        {
            width: 550px;
            margin: 50px auto 20px auto;
            text-align: center;
            padding-left: 112px;
        }
        
        #ErrorMessage
        {
            width: 100%;
            min-width: 650px;
            height: 100%;
        }
        
        #ErrorMessageContent
        {
           
            width: 550px;
            margin: 0 auto;
            font-size: 22px;
            border: #FFF 1px solid;
            color: #FFF;
            padding: 30px 50px 30px 50px;
        }
        
        #ErrorMessage h1
        {
            text-align: center;
        }
        .spanner
        {
            border:1px;
            display:block;
            background:#9CCBEF;
            padding:10px; 
        }
        .hmessage
        {
            color:#424542;
            font-size:18px;
            font-weight:bold;
            text-align:left;
            padding-right:300px;
        }
        .message_box
        {
            border:1px solid;
            padding:8px;
        }
        .pmessage
        {
            text-align:left;
            color:#717171;
            font-size:16px;
        } 
        #ErrorMessage p
        {
            padding: 0;
            margin: 0;
            line-height: 18px;
            font-size:12px;
            text-align: left;
            padding-top:5px;
        }
        
        #ErrorMessage p a, #ErrorMessage p a:link
        {
            display: block;
            color: #c5dae8;
            text-decoration: none;
        }
        
        #ErrorMessage p a:hover
        {
            color: #99C8E8;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    

</head>
<body>
    <div id="logo">
        <img src="images/yourimg.png" border="0" />
    </div>
    <div id="ErrorMessage">
        <div id="ErrorMessageContent">
           <div class="message_box">
           <div class="spanner"> 
                <font class="hmessage">Welcome to the site</font>
            
                <p class="pmessage">
                    We are currently performing planned maintenance.</p>
                <p>
                    &nbsp;</p>
            </div>
            </div>
           
        </div>
    </div>
</body>
</html>
<script type="text/javascript">


    var errorSettings = {

        getURLParameter: function (name) {

            var str = decodeURIComponent((RegExp('[?|&]' + name + '=' + '(.+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null;
            return str;
        },

        errorcode: function () { return errorSettings.getURLParameter("errorReason") },

        language: function () { return errorSettings.getURLParameter("lang") },

        hmessageDivId: {
            "0": "Access Denied",
            "1": "Access Denied",
            "2": "Access Denied",
            "3": "Access Denied",
            "4": "Access Denied",
            "5": "Access Denied",
            "6": "Access Denied",
            "7": "Access Denied",
            "8": "Access Denied",
            "9": "Access Denied"
        },

        messages: {
            "0": "Your user permissions do not authorize you to access this page.",
            "1": "The user name and password combination you entered does not correspond to a registered user.",
            "2": "The password you have entered is invalid.",
            "3": "Your account has been locked. Please contact your System Administrator.",
            "4": "Your account has been deleted. For further details, please contact your System Administrator.",
            "5": "Your account has expired. Please contact your System Administrator.",
            "6": "Invalid assertion.",
            "7": "Please provide a user name and a password.",
            "8": "You cannot access this product since you belong to no group. Please contact your System Administrator.",
            "9": "Invalid answer to secret question.",
            "10": "Your account has been deactivated. Please contact your System Administrator to reactivate it.",
            "11": "Your password is expired"
        },

        errorDivId: ".pmessage",
        
        hmessid: ".hmessage"
    };

    
    $(document).ready(function (e) {

        if (errorSettings.errorcode() != null) {
            // alert(errorSettings.messages[errorSettings.errorcode] + " :: " + errorSettings.language);
            $(errorSettings.hmessid).html(  errorSettings.hmessageDivId[errorSettings.errorcode()] )
            $(errorSettings.errorDivId).html('<p><font class="sublabel">' + errorSettings.messages[errorSettings.errorcode()] + '</font></p>')

        }

    });
       
</script>

Initial URL

Initial Description

It doesn't work directly make the url virtual and run it on any of the major links.....remove the images

Initial Title

Scalable code and much refined to aletrs custom messages based on the errors returned from the server or even static way....JSON

Initial Tags

Initial Language

JavaScript

Choose a language for easy browsing: