根据 select 元素的 onchange 事件添加新的 moodle UI 元素
Adding new moodle UI elements according to the onchange event of a select element
我是 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中的内容从未执行,在当前视图中添加了"loading"效果,最后一个问题是我还需要在编写 UI 的同一对象中调用一个函数(mod_form.php 中执行所有 $this -> _form -> addElement(...))
你能帮帮我吗?如何根据策略执行这些方法?
非常感谢!
为了实现这一点,我做了以下工作:
将您的脚本放在一个单独的文档中并在您的 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”函数可以从文件 [=49] 中获取数据=] 从更改的 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 个 select,一个带有选项,另一个带有您需要显示结果的位置。
$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
希望对您有所帮助!
我的回答与 Andres Ramos 的回答相似
首先,在您的 PHP 文件中添加一个单独的 js 文件来编写您的 JS 函数。
require_js("./class-section.js");
在这个文件下面写下,encodeURI 也用于发送 space。
function fetchSectionsfromclassName() {
var class= $('#id_user_create_grade').val();
$('#id_user_create_section').load('getter.php?className=' + encodeURI(class));
}
现在上面的函数需要一个 getter.php 文件所以创建一个新的 gettter.php 文件,您将从 className 中获取部分。我在数据库中有一个 table lo_sections,它有两列 'class' 和 'section'。
在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 文件中写下这个
这里第一个下拉列表是 class,第二个是像 (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);
我是 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中的内容从未执行,在当前视图中添加了"loading"效果,最后一个问题是我还需要在编写 UI 的同一对象中调用一个函数(mod_form.php 中执行所有 $this -> _form -> addElement(...))
你能帮帮我吗?如何根据策略执行这些方法?
非常感谢!
为了实现这一点,我做了以下工作:
将您的脚本放在一个单独的文档中并在您的 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”函数可以从文件 [=49] 中获取数据=] 从更改的 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 个 select,一个带有选项,另一个带有您需要显示结果的位置。
$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
希望对您有所帮助!
我的回答与 Andres Ramos 的回答相似
首先,在您的 PHP 文件中添加一个单独的 js 文件来编写您的 JS 函数。
require_js("./class-section.js");
在这个文件下面写下,encodeURI 也用于发送 space。
function fetchSectionsfromclassName() {
var class= $('#id_user_create_grade').val();
$('#id_user_create_section').load('getter.php?className=' + encodeURI(class));
}
现在上面的函数需要一个 getter.php 文件所以创建一个新的 gettter.php 文件,您将从 className 中获取部分。我在数据库中有一个 table lo_sections,它有两列 'class' 和 'section'。 在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 文件中写下这个 这里第一个下拉列表是 class,第二个是像 (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);