HTML and CSS Reference
In-Depth Information
if (!Modernizr.localstorage) {
alert("This browser doesn't support HTML5 Local Storage!");
$("#irstName").change(function () { storage["FirstName"] = $(this).val(); });
$("#lastName").change(function () { storage["LastName"] = $(this).val(); });
$("#email").change(function () { storage["Email"] = $(this).val(); });
A reference to the localStorage object is stored in a global variable— storage —for the sake of
convenience. The click event of the Submit Answers button is wired to the SubmitData() function. The
change event handlers of the firstName, , lastName , and email text boxes are also wired. These change event
handlers retrieve the text box value using the val() method and save it in localStorage . This way, as soon
as users begin typing in these text boxes, their values are automatically saved in localStorage . If a user is
revisiting the survey form and the firstName, , lastName , and email values are already stored, then these
pieces are retrieved from localStorage and filled in the text boxes.
The GetQuestions() function is then invoked to fetch survey questions. GetQuestions() is shown in
Listing 7-7.
Listing 7-7. GetQuestions() Client-Side Function
function GetQuestions() {
type: "POST",
url: "/Home/GetQuestions",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (results) {
for (var i = 0; i < results.length; i++) {
$("#container").append("<div data-questions-questionid='" +
results[i].QuestionID + "'>" +
results[i].QuestionText + "</div>");
error: function (err) {
alert(err.status + " - " + err.statusText);
The GetQuestions() function invokes the GetQuestions() action method using $.ajax() . The
GetQuestions() action method returns an array of question items. The success handler function iterates
through this array, and with each iteration, a <div> is dynamically added to the container. The
GetQuestions() action method is shown in Listing 7-8.
Search WWH ::

Custom Search