Page Contents
To create a Moodle plugin with PHP and AJAX that allows the selected value in the first select box to affect the second select box, follow these steps. For example, we will create a plugin that enables users to select a course and then display a list of students enrolled in that course in the second select box.
Step 1: Create a directory for your plugin
Create a directory inside the moodle/local/ directory with your plugin’s name. For example, let’s call it “customselect.”
Step 2: Create a PHP file to handle AJAX
Inside your plugin directory, create a PHP file to handle AJAX requests. For example, name the file ajax.php and include the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
require_once(' .. / .. / config.php'); require_once($CFG->libdir.'/ajaxlib.php'); $courseid = optional_param('courseid', 0, PARAM_INT); // Validate and retrieve student data based on the selected course if ($courseid) { // Perform database query as needed // For example, to fetch a list of students in the course // $students = get_students_by_course($courseid); // Store student data in an array $student_data = array( 1 => 'Student 1', 2 => 'Student 2', 3 => 'Student 3', ); // Output data as JSON echo json_encode($student_data); } else { echo json_encode(array()); } |
Step 3: Create a PHP file for the HTML view
In your plugin directory, create a PHP file to display the HTML view for the Moodle page. For example, name the file index.php and include the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<?php require_once('.. / .. / config.php'); require_login(); // Get a list of all courses $courses = get_courses(); // HTML for the first select box (Courses) $select_course = html_writer::select($courses, 'courseid', '', array('' => get_string('choosecourse', 'local_customselect'))); // HTML for the second select box (Students) $select_student = html_writer::select(array(), 'studentid', '', array('' => get_string('choosestudent', 'local_customselect'))); // Display the page echo $OUTPUT->header(); echo $OUTPUT->heading(get_string('pluginname', 'local_customselect')); echo '<form>'; echo '<label for="courseid">'.get_string('choosecourse', 'local_customselect').'</label>'; echo $select_course; echo '<br>'; echo '<label for="studentid">'.get_string('choosestudent', 'local_customselect').'</label>'; echo $select_student; echo '</form>'; // JavaScript to handle AJAX echo ' <script type="text/javascript"> document.getElementById("id_courseid").addEventListener("change", function() { var courseid = this.value; var xhr = new XMLHttpRequest(); xhr.open("GET", "ajax.php?courseid=" + courseid, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var students = JSON.parse(xhr.responseText); var studentSelect = document.getElementById("id_studentid"); studentSelect.innerHTML = ""; for (var id in students) { var option = document.createElement("option"); option.value = id; option.text = students[id]; studentSelect.appendChild(option); } } }; xhr.send(); }); </script>'; echo $OUTPUT->footer(); |
Step 4: Create a language file
.php and name it, for example, local_customselect.php. Include the following code:|
1 2 3 4 5 6 7 8 |
<?php $string['pluginname'] = 'Custom Select Plugin'; $string['choosecourse'] = 'Choose Course'; $string['choosestudent'] = 'Choose Student'; |
Step 5: Activate the plugin
Activate your plugin through the Moodle administration page.
After following these steps, you will have a Moodle plugin that allows users to select a course in the first select box and then displays a list of students enrolled in that course in the second select box using AJAX. Be sure to replace the database queries and business logic according to your needs.
