HTML and CSS Reference
In-Depth Information
}
})
}
function GetChoices() {
$.ajax({
...
else {
storage.removeItem(key);
}
});
storage[“container”]=$(“#container”).html();
},
error: function (err) {
alert(err.status + " - " + err.statusText);
}
})
}
Notice the bold code. The
GetQuestions()
function fetches questions and then calls the
GetChoices()
function. Once
GetChoices()
completes successfully, the container
<div>
element is populated with
questions and their choices. The code stores the entire dynamically generated HTML markup in local
storage. This way, even if there is no network connectivity, the questions and choices are available to the
code. Beginning the next time through, if
GetQuestions()
can't access the database due to network
unavailability, the error function of the
$.ajax()
call (of
GetQuestions()
) retrieves the HTML markup
stored in the local storage and populates the container
<div>
element.
Checking for a Network Connection
Finally, the Survey application needs to store the answers in a database. It makes an Ajax call to the server
whenever the Submit Answers button is clicked. When the user clicks Submit Answers, the
SubmitData()
function is invoked; it calls the
SaveResults()
controller action method to save the survey data. This Ajax
call succeeds only if there is network connectivity.
It would be beneficial to inform the user about the availability of a network connection and
accordingly enable or disable the Submit Answers button. To do so, you need to periodically check
whether a network connection is available. Listing 8-14 shows how this can be accomplished.
Listing 8-14.
Enabling or Disabling the Submit Answers Button
$(document).ready(function () {
...
setTimeout(CheckOnline, 5000);
})
function CheckOnline() {
$.ajax({
type: "POST",
url: 'Home/IsOnline',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
