HTML and CSS Reference
In-Depth Information
handlers;
postSuccess
for handling the comment being successfully stored and
postError
to
handle any failures.
function
postComment
(
data
) {
$
.
ajax
({
type
:
'POST'
,
url
:
'post_comment.php'
,
data
:
data
,
headers
: {
'X-Requested-With'
:
'XMLHttpRequest'
},
success
:
postSuccess
,
error
:
postError
});
}
function
postSuccess
(
data
,
textStatus
,
jqXHR
) {
// add comment to UI
}
function
postError
(
jqXHR
,
textStatus
,
errorThrown
) {
// display error
}
DYNAMICALLY UPDATING THE USER INTERFACE WITH THE COMMENT
At this point the comment data is being sent to the server and saved, but the AJAX response
isn't providing any meaningful response. Also, the comments section isn't being updated to
show the newly submitted comment so the user would have to refresh the page to see it. Let's
start by writing the code to update the UI and test that functionality.
If you are thinking "Hang on a minute! We don't have all the data we need from the Web
server to display the comment" then you are correct. However, this doesn't stop us writing the
code to update the UI and also testing that it works. Here's how:
function
postSuccess
(
data
,
textStatus
,
jqXHR
) {
$
(
'#commentform'
).
get
(
0
).
reset
();
