Kendo UI Starting Point

Kendo UI starter fiddle for test cases.

by TJ VanToll

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="https://rawgithub.com/tjvantoll/Restaurant-Survey/master/Restaurant%20App/scripts/everlive.all.min.js"></script>
<form class="well">
    <fieldset>
        <legend>Survey</legend>
        <div>
            <label for="location">
                Which location did you visit?
            </label>
            <select name="location" id="location">
                <option>North</option>
                <option>South</option>
                <option>East</option>
                <option>West</option>
            </select>          
        </div>
        <div>
            <label for="appetizer">
                Did you order an appetizer?
            </label>
            <select id="appetizer" name="appetizer">
                <option>No</option>
                <option>Yes</option>
            </select>
        </div>
        <div>
            <label for="rating">
                Please rate your overall experience.
            </label>
            <input type="range" min="1" max="5" value="3" id="rating" name="rating"/>
        </div>
        <div>
            <button class="k-button">Submit</button>
        </div>
    </fieldset>
</form>

CSS

form {
    margin: 1em;
}
label {
    display: block;
}
fieldset > div {
    padding: 0.5em 0;
}
.k-button {
    font-size: 1.1em;
    width: 100%;
}
.k-dropdown {
    width: 100%;
}

JavaScript

new Everlive({ apiKey: "eVKxNui85A6TopjR" });

$( "select" ).kendoDropDownList();
$( "[type=range]" ).kendoSlider();

$( "form" ).on( "submit", function( event ) {
    event.preventDefault();
    
    var data = {
        location: $( this.location ).val().toLowerCase(),
        appetizer: $(this.appetizer ).val() == "yes",
        rating: $( this.rating ).val()
    };
    Everlive.$.data( "Ratings" ).create( data,
        function( data ){
            $( "form" ).html( "<p>Thank you. Your survey was successfully processed.</p>" );
        },
        function(error){
            alert( "Unfortunately an error occurred processing your survey. Please try again later." );
        }                         
    );
});