jQuery Custom Events

by nickywaites

HTML

<fieldset>
    <legend>Personnel Details</legend>
    <p>
        <label for='name'>Name</label>
        <input id='name' type='text' />
    </p>
    <p>
        <label for='results'>Results</label>    
        <input id='results' type='text' />
    </p>
    <p class='submit'> 
        <input id="btnSubmit" type="submit" value="Submit"/>
    </p>
</fieldset>    

<br style='clear:both' />

<fieldset>
    <legend>Personnel Results</legend>
    <p>
        <label for='name'>Name</label>
        <label id='lblName' > </label>
    </p>
    <p>
        <label for='results'>Results</label>    
        <label id='lblResults' ></label>
    </p>
</fieldset>

CSS

label
{
    width: 4em;
    float: left;
    text-align: right;
    margin-right: 0.5em;
    display: block;
}

.submit input
{
    margin-left: 4.5em;
}                 
input
{
    
    border: 1px solid black;
}

.submit input
{
    color: #FFF;
    background: #CC0000;
    border: 2px outset #eee;
}                 
fieldset
{
    border: 1px solid black;
    width: 20em;
}

legend
{
    color: #FFF;
    background: #CC0000;
    padding: 2px 6px
}

JavaScript

function displayPersonResults() {
    $('#lblName').text(this.Person.Name);
    $('#lblResults').text(this.Person.Results);
}

var xhr = {};

xhr.application = $(function() {

    $(xhr).bind('personUpdated', displayPersonResults);

    $('#btnSubmit').click(function() {

        //Simulate an ajax response 
        //The JSON is echo'd back 
        var p = {
            Person: {
                Name: $('#name').val(),
                Results: $('#results').val()
            }
        };

        //JSON.stringify built in function to IE7+ browsers
        //Converts JavaScript Object Literals into JSON
        $.post('/echo/json/', {
            "json": JSON.stringify(p)
        }, function(result) {
            xhr.Person = result.Person;
            $(xhr).trigger('personUpdated');
        });

    });

});