admin settings.php and onChange event

admin settings.php and onChange event

by Sebas Kosterman -
Number of replies: 2

Situation: an admin settings.php page with a dropbox with country names and iso codes. There is also a text field which holds coordinates. These coordinates represent position data for a given country based on this api:

https://maps.googleapis.com/maps/api/geocode/json?address=" + country code;

The return set of this api contains geolocation data.

What I would like to happen: 

After selection of a country (onChange event) the url should be called and the geoLocation field should be filled in.

I have no clue as to how to attach an change Event to a drop down list within the admin settings.php page.

Average of ratings: -
In reply to Sebas Kosterman

Re: admin settings.php and onChange event

by Darko Miletić -
Picture of Core developers Picture of Plugin developers

It can be done. You need to create a custom admin setting control based off of an existing one whichever you plan to use. For example text input:

class my_extra_control extends admin_setting_configtext {
  public function output_html($data, $query='') {
     // Load javascript here
     global $PAGE;
     $PAGE->requires->yui_module('moodle-[mymodule]-[jsmodulename]',
                                    'M.[mymodule].[jsmodulename].init',
                                    array('ctrlid' => $this->getid()),
                                    null,
                                    true);
      return parent::output_html($data, $query);
  }
}

Write an appropriate YUI module for your plugin and hook the event there. Something like this: 

M.[mymodule] = M.[mymodule] || {};

M.[mymodule].[jsmodulename] = {
    init: function(param) {
        Y.one('#'+param.ctrlid).on('change', function (e) {
               // Do something here.
        });
    }
}

Here is the documentation for writing such modules. http://docs.moodle.org/dev/YUI/Modules


Average of ratings: Useful (1)
In reply to Darko Miletić

Re: admin settings.php and onChange event

by Sebas Kosterman -

Thank you for your answer. It gave me a direction. I've created an jQuery solution to the problem, without writing an override. 

Embedding the code: 

$PAGE->requires->js('/blocks/[blockname]/js/selectchange.js');

After page load, the code will look for select form items with a certain class. And attach the onChange event. Using the class name I create a target name for the textfield to display results.




Average of ratings: -