Manipulating Data with YUI 3 | Moodle JavaScript Cookbook

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Moodle JavaScript Cookbook

4.7 (3)

Moodle JavaScript Cookbook

4.7 (3)

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.

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

Combining Moodle and JavaScript

Combining Moodle and JavaScript

Introduction

Creating a new Moodle PHP page

Loading a JavaScript file

Loading a JavaScript file in

Generating a JavaScript function call from PHP

Passing variables from PHP to JavaScript

Ensuring compliance with XHTML Strict

Retrieving language strings from Moodle

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

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

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

Working with Data Tables

Working with Data Tables

Introduction

Initializing a YUI DataSource

Displaying data

Basic column sorting

Adding paging

Enabling scrolling

Enabling editing

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

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

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

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...

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Moodle JavaScript Cookbook

Search

Your notes and bookmarks