根据选择元素的 onchange 事件添加新的 moodle UI 元素答案

【问题标题】：Adding new moodle UI elements according to the onchange event of a select element根据选择元素的 onchange 事件添加新的 moodle UI 元素
【发布时间】：2019-11-14 22:26:25
【问题描述】：

我是 moodle 的新手，我总是在客户端编程。我想也许因为这个原因我错过了一些东西。我需要根据用户在组合中选择的内容，为用户提供多样化的 UI 元素。所以我正在考虑根据策略（设计模式）编写元素。从 mod_form.php 中的一个对象，我试图执行这样的事情：

$this -> _form  -> addElement('select', 'displayStrategy', get_string('displayStrategy', 'xForum'), $displayStrategy, array('onchange' => 'javascript: function loadStrategy(selVal){

$.ajax({
 type: "POST",
 url: "../mod/xForum/action/displayStrategy.php",
 data: { class: selVal }
}).done(function( msg ) { 
 console.log("Strategy was executed");
});
}; loadStrategy(this.value);') );

正在执行，在控制台打印日志，但是 displayStrategy.php 中的内容从未执行，在当前视图中添加了“加载”效果，最后一个问题是我还需要调用一个函数在编写 UI 的同一个对象中（在 mod_form.php 中执行所有 $this -> _form -> addElement(...) 的那个）

你能帮帮我吗？如何根据策略执行这些方法？

非常感谢！

【问题讨论】：

标签： javascript php moodle moodle-api

【解决方案1】：

我的回答与安德烈斯·拉莫斯的回答类似

首先，在你的 PHP 文件中添加一个单独的 js 文件来编写你的 JS 函数。

require_js("./class-section.js");

在这个文件下面写，encodeURI也用于发送空间。

function fetchSectionsfromclassName() {
        var class= $('#id_user_create_grade').val();
        $('#id_user_create_section').load('getter.php?className=' + encodeURI(class));
}

现在上面的函数需要一个 getter.php 文件所以创建一个新的 gettter.php 文件，您将从 className 获取部分。我在数据库中有一个表 lo_sections，它有两列“类”和“部分”。在 getter.php 中写这个

<?php
require_once("../config.php");
global $DB;

// Get the parameter
$className = $_GET['className'];
if($className) {
    $sections =  $DB->get_records('lo_sections', array('class' => $className));
    foreach ($sections as $key => $value) {
        echo "<option value=".$value->section.">" .$value->section . "</option>";
    }
}

在你想要添加两个下拉列表的 PHP 文件中写下这个这里第一个下拉列表是类，第二个是（A，B，C）之类的部分

$attributes =  array('onchange' => 'javascript:fetchSectionsfromclassName()');
$defaultOption = array("NA" => "NA");
$mform->addElement('select', "user_create_class", 'class', $this->options, $attributes);
$mform->addElement('select', 'user_create_section', 'Section', $defaultOption);

【讨论】：

【解决方案2】：

我做了以下事情来实现这一点：

将您的脚本放在一个单独的文档中并在您的 file_form.php 中调用它：

// Get data dynamically based on the selection from the dropdown
$PAGE->requires->js(new moodle_url('/blocks/mymodulename/js/myscript.js'));

文件 myscript.js 具有“.change”函数来识别何时更改了“select”，并具有“.load”来从文件 getter.php 中获取数据，并从更改的 select 中传递参数。还要注意在 departmentid 和 studentid 之前的前缀 #id_，如果您检查元素，这就是实际调用的方式。

window.onload = init;

function init() {

    // When a select is changed, look for the students based on the department id
    // and display on the dropdown students select
    $('#id_departmentid').change(function() {
        $('#id_studentid').load('getter.php?departmentid=' + $('#id_departmentid').val());                                
    });

}

在 getter.php 文件中，捕获通过 $_GET 方法发送的参数，进行查询并回显结果。所以文件 getter.php 看起来像这样：

<?php 
require_once("../../config.php");
global $DB;

// Get the parameter
$departmentid = optional_param('departmentid',  0,  PARAM_INT);

// If departmentid exists
if($departmentid) {

    // Do your query 
    $query = 'SELECT * FROM {table_without_prefix} WHERE departmentid = ' . $departmentid;
    $student_arr = $DB->get_records_sql($query, null,  $limitfrom=0,  $limitnum=0);

    // echo your results, loop the array of objects and echo each one
    echo "<option value='0'>All Students</option>";
    foreach ($student_arr as $student) {
        echo "<option value=".$student->id.">" . $student->fullname . "</option>";  
    }

}
?>

最后，您的 file_form.php 将有 2 个选择，一个带有选项，另一个带有您需要显示结果的位置。

$mform->addElement('select', 'departmentid', "Select Department", $department_array);
$student_array = array("All Students");
$mform->addElement('select', 'studentid', "Select Student", $student_array);

另外，请务必添加以下函数，以便您在使用 $form->get_data(); 时可以正确读取数据；

function get_data(){
    global $DB;

    $data = parent::get_data();

    if (!empty($data)) {
        $mform =& $this->_form;

        // Add the studentid properly to the $data object.
        if(!empty($mform->_submitValues['studentid'])) {
            $data->studentid = $mform->_submitValues['studentid'];
        }

    }

    return $data;
}

这是结果的快速视频：http://screencast.com/t/KDtiWzDN

希望对你有帮助！

【讨论】：