Question

I’m trying to locate an id from a div to detemine the correct css class to use when entering a form.

An example of the html that will generate:

<div id="output">ERROR</div>
<div id="msg">Password did not match.</div>

Now I got this to work with a plug-in I made, though the difference there is that it used an iframe, which is not the case here, so I know the code will need adjusting.

$.post("login.php", $('#login').serialize(), function(html){
                //see what message to display.
                var results = $(html).contents().find("#output").text();
                if (results == "success") {
                    FormResults("Success", $(html).contents().find("#message").text());
                }else if(results == "warning") {
                    FormResults("Notice", $(html).contents().find("#message").text());
                } else {
                    FormResults("Error", $(html).contents().find("#message").text());
                }
            }); //END $.ajax(

I hope I have provided enough code. If not, let me know. Also if you have a better way, I’m interested in any idea you have.

The concept is, php will generate two divs, one for the type of message, the other being the actual message. The first div will tell jquery what css to assign to the validation plugin I’m using as well as message to display.

Answer 1

I don’t quite understand the logic of the code, but I do understand what you want to achieve.

In my opinion a better approach would be to have a wrapper for the whole message (including the type of message) and via a special class name set color or wathever CSS rule you want. Just like Plone status message works (see the “Warning” message on top)

Working example here:

http://jsfiddle.net/marcosfromero/8gbPg/

HTML:

<dl class="portalMessage error"><dt>Error</dt>
    <dd>This product has not had a release in over 1 year and may no longer be maintained. </dd>
</dl>

CSS:

Main css should be applied to dl.portalMessage, .portalMessage .dt and .portalMessage .dd selectors and specific colors for error, success or whatever code you need.

dl.portalMessage {
    font-size: 12px;
    background-color: #FFFFE3;
    border: 1px solid #996;
    margin-bottom: 1em;
}

dl.portalMessage dt {
    background-color: #996;
    font-weight: bold;
    float: left;
    margin: 0 0.5em 0 0;
    padding: 0.5em 0.75em;
    color: white;
    line-height: 1.25em;
}

dl.portalMessage dd {
    padding: 0.5em 0.5em;
    margin: 0;
    line-height: 1.25em;
}

dl.error {
    border-color: red;   
}

dl.error dt {
    background: red;   
}

dl.error dd {
    background-color: #FD7;
}

dl.success{
    border-color: navy;   
}

dl.success dt {
 background: navy;   
}

dl.success dd {
    background-color: #eee;
}