5.3. Customize myxblock.js#
This section describes how to modify the JavaScript file of the XBlock you
created, myxblock.js
, to provide the functionality in the Thumbs XBlock
example in the XBlock SDK.
In myxblock.js
, you will define code that manages user interaction
with the XBlock. The code is added to a fragment.
5.3.1. The Default XBlock JavaScript File#
When you create a new XBlock, the default
JavaScript file is created automatically, with skeletal functionality defined.
In the xblock_development/myxblock/myxblock/static/js/source
directory, see
the file myxblock.js
.
function MyXBlock(runtime, element) {
function updateCount(result) {
$('.count', element).text(result.count);
}
var handlerUrl = runtime.handlerUrl(element, 'increment_count');
$('p', element).click(function(eventObject) {
$.ajax({
type: "POST",
url: handlerUrl,
data: JSON.stringify({"hello": "world"}),
success: updateCount
});
});
$(function ($) {
/* Here's where you'd do things on page load. */
});
}
The file contains JavaScript code to increment the count
field that was
added by default to the XBlock. Delete this code.
5.3.2. Add JavaScript Code#
JavaScript code implements the browser-side functionality you need for your XBlock. The Thumbs XBlock uses clicks on the up and down vote buttons to call the handler to record votes.
Follow the guidelines below to implement JavaScript code.
Add the function
MyXBlock
to initialize the XBlock.The
MyXBlock
function maps to the constructor in the XBlock Python file and provides access to its methods and fields.Add the URL to the vote handler to the
MyXBlock
function.var handlerUrl = runtime.handlerUrl(element, 'vote');
Add
Post
commands in theMyXBlock
function to increase the up and down votes in the XBlock.Note
Do not change the main function name,
MyXBlock
.
5.3.3. Check JavaScript Against the Thumbs XBlock#
After you have defined the JavaScript code, check your work against the code in
the Thumbs XBlock, in the file xblock_development/xblock-sdk/sample_xblocks/thumbs/static/js/source/thumbs.js
.
function ThumbsAside(runtime, element, block_element, init_args) {
return new ThumbsBlock(runtime, element, init_args);
}
function ThumbsBlock(runtime, element, init_args) {
function updateVotes(votes) {
$('.upvote .count', element).text(votes.up);
$('.downvote .count', element).text(votes.down);
}
var handlerUrl = runtime.handlerUrl(element, 'vote');
$('.upvote', element).click(function(eventObject) {
$.ajax({
type: "POST",
url: handlerUrl,
data: JSON.stringify({voteType: 'up'}),
success: updateVotes
});
});
$('.downvote', element).click(function(eventObject) {
$.ajax({
type: "POST",
url: handlerUrl,
data: JSON.stringify({voteType: 'down'}),
success: updateVotes
});
});
return {};
};
If necessary, make corrections to the code in your XBlock so that it matches the code in the Thumbs XBlock.
5.3.4. Next Step#
After you complete your customizations to the JavaScript file, you continue on and customize the XBlock CSS file.