根据select元素的onchange事件添加新的moodle UI元素

时间:2016-05-24 15:44:59

标签: javascript php moodle moodle-api

我是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中的内容永远不会执行,而且#34; loading"效果被添加到当前视图,最后一个问题是我还需要在写入UI的同一对象中调用一个函数(mod_form.php中的一个函数执行所有$ this - > _form - > addElement( ...))

你可以帮我一把吗?如何根据策略执行这些方法?

非常感谢!

2 个答案:

答案 0 :(得分:3)

我的答案类似于安德烈斯·拉莫斯(Andres Ramos)的答案

首先,在您的PHP文件中添加一个单独的js文件以编写JS函数。

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

在下面的文件中,也要编写编码URI来发送空间。

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,其中有两列“ 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文件中,编写以下代码 这里的第一个下拉菜单是针对班级的,第二个下拉列表是针对(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);

答案 1 :(得分:0)

我做了以下事情来实现这个目标:

  1. 将您的脚本放在单独的文档中,并在file_form.php中调用它:

    // Get data dynamically based on the selection from the dropdown
    $PAGE->requires->js(new moodle_url('/blocks/mymodulename/js/myscript.js'));
    
  2. 文件myscript.js具有“.change”功能,用于识别何时更改“select”和“.load”以从文件中获取数据getter.php从更改的选择中传递参数。还要注意在离开和学习之前的前缀#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());                                
        });
    
    }
    
  3. 在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>";  
        }
    
    }
    ?>
    
  4. 最后你的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);
    
  5. 另外,请务必添加以下功能,以便在使用 $ form-&gt; 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;
    }
    
    1. 以下是结果的快速视频:http://screencast.com/t/KDtiWzDN
    2. 我希望它有所帮助!