Book Image

Moodle JavaScript Cookbook

Book Image

Moodle JavaScript Cookbook

Overview of this book

Moodle is the best e-learning solution on the block and is revolutionizing courses on the Web. Using JavaScript in Moodle is very useful to administrators and dynamic developers as it uses built-in libraries to provide the modern and dynamic experience that is expected by web users today.The Moodle JavaScript Cookbook will take you through the basics of combining Moodle with JavaScript and its various libraries and explain how JavaScript can be used along with Moodle. It will explain how to integrate Yahoo! User Interface Library (YUI) with Moodle. YUI will be the main focus of the book, and is the key to implementing modern, dynamic feature-rich interfaces to help your users get a more satisfying and productive Moodle experience. It will enable you to add effects, make forms more responsive, use AJAX and animation, all to create a richer user experience. You will be able to work through a range of YUI features, such as pulling in and displaying information from other websites, enhancing existing UI elements to make users' lives easier, and even how to add animation to your pages for a nice finishing touch.

Related Content you might be interested in

Current Title:

Small book image
Moodle JavaScript Cookbook
Apr, 2011 | 180 pages
No titles found
Table of Contents (15 chapters)
Moodle JavaScript Cookbook
Moodle JavaScript Cookbook
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Combining Moodle and JavaScript
Combining Moodle and JavaScript
Introduction
Creating a new Moodle PHP page
Loading a JavaScript file
Loading a JavaScript file in <head>
Generating a JavaScript function call from PHP
Passing variables from PHP to JavaScript
Ensuring compliance with XHTML Strict
Retrieving language strings from Moodle
2
Moodle and Yahoo! User Interface Library (YUI)
Moodle and Yahoo! User Interface Library (YUI)
Introduction
Initializing the YUI 3 library
Loading additional YUI modules
Loading YUI 2 modules from YUI 3
Attaching basic event handlers
Attaching advanced DOM event handlers
Implementing event delegation
Debugging with the YUI console
3
Moodle Forms Validation
Moodle Forms Validation
Introduction
Adding a required field
Adding a field with a maximum length
Adding a field with a minimum length
Adding a field length within in a specified range
Adding a valid e-mail address field
Adding custom validation with a Regular Expression
Adding a field that accepts only alphabetic characters
Adding a field that accepts only alphanumeric characters
Adding a field that accepts only numeric characters
Rejecting punctuation characters
Rejecting input without a leading zero
Comparing with another field
Adding a custom JavaScript validation function callback
4
Manipulating Data with YUI 3
Manipulating Data with YUI 3
Introduction
Using IO to request a URI
Using IO's alternative transport method for requesting external URIs
Using PHP as a proxy to load data from an external domain
Parsing XML with DataSource
Parsing JSON with DataSource
5
Working with Data Tables
Working with Data Tables
Introduction
Initializing a YUI DataSource
Displaying data
Basic column sorting
Adding paging
Enabling scrolling
Enabling editing
6
Enhancing Page Elements
Enhancing Page Elements
Introduction
Adding a text box with auto-complete
Adding a combo box with auto-complete
Displaying auto-updating data
Enabling resizable elements
Adding custom tooltips
Adding custom button controls
7
Advanced Layout Techniques
Advanced Layout Techniques
Introduction
Adding a fly-out navigation menu
Adding a drop-down navigation menu
Displaying a tree-view navigation menu
8
Animating Components
Animating Components
Introduction
Fading in an element
Fading out an element
Scrolling an element
Resizing an element
Animating with easing
Moving an element along a straight path
Moving an element along a curved path
Changing an element's color
Sequencing multiple animations
9
Integrating External Libraries
Integrating External Libraries
Introduction
Adding the jQuery framework
Adding the MooTools framework
Adding the Dojo framework
Adding the Prototype framework
Adding the script.aculo.us add-on to Prototype
Adding image enlargement with Lightbox 2

Parsing JSON with DataSource

In this recipe, we will use DataSource in conjunction with the JSONSchema plug-in to retrieve and parse a data file in the JSON format.

Getting ready

We will use three files in this example:

  • data.json: A data file in JSON format with the following contents:

    {
"list":[
{"name":"Item One"},
{"name":"Item Two"},
{"name":"Item Three"},
{"name":"Item Four"},
{"name":"Item Five"},
{"name":"Item Six"},
{"name":"Item Seven"},
{"name":"Item Eight"},
{"name":"Item Nine"},
{"name":"Item Ten"}
]
}

  • datasource_json.php: A PHP page with an input button for initiating the request and a textarea to display the results: 

    <?php
require_once(dirname(__FILE__) . '/../config.php');
$PAGE->set_url('/cook/datasource_json.php');
$PAGE->requires->js('/cook/datasource_json.js');
echo $OUTPUT->header();
?>
<form>
<textarea id="contents" rows="10"></textarea>
<br />
<input id="go" type="button" value="Get JSON">
</form>
<?
echo $OUTPUT...
Previous Section
End of Chapter 4
Next Chapter