General developer forum

 
 
Picture of Christian Thompson
JavaScript Question
 

Hi Everyone,

I am the Moodle Admin for an online university and we are using a JavaScript bookmarklet which I programmed to change the settings for each of our course actvities and resources to ensure that the settings are consistent across courses.

For example, I am using the following code to allow access to an activity at the start of a particular unit.

    document.getElementsByName("availablefrom[day]")[0].value=defaultStartDay;
    document.getElementsByName("availablefrom[month]")[0].value=defaultStartMonth;
    document.getElementsByName("availablefrom[year]")[0].value=defaultStartYear;
    document.getElementsByName("availablefrom[hour]")[0].value=defaultStartHour;
    document.getElementsByName("availablefrom[minute]")[0].value=defaultStartMinute;
document.getElementsByName("availablefrom[enabled]")[0].checked=true;

The first five lines set the start date, month, year, hour and minute.  The last line of the code sets the checkbox to checked; however, it does not trigger whatever function is normally triggered when clicking on the checkbox manually.  This function enables the "availablefrom[]" drop-downs (from their disabled state).  If this function is not called, the dropdown information is not sent properly.

Can anyone tell me how to trigger this event, or call the function?  I have looked at the code, but it is a bit beyond me.

Thank you in advance...with more thanks to follow!  It will be, I assure you, greatly appreciated!

Take care.

Christian

 
Average of ratings: -
Picture of Christian Thompson
Re: JavaScript Question
 

Naturally, pretty much as soon as I submitted my post, I realized how to do it - using the click() method.  I hope somebody else finds this useful.  Take it easy and keep on Moodling!

//Check an unchecked checkbox
isChecked=document.getElementsByName("availablefrom[enabled]")[0].checked;
if(!isChecked){
    document.getElementsByName("availablefrom[enabled]")[0].click();
}

 
Average of ratings: -
Picture of Christian Thompson
Re: JavaScript Question
 

OK.  Now, I am having the same problem with the dropdown menu for completion tracking.  For checkboxes, I can use the click() method as outlined in my previous response to myself; however, this does not work for dropdown menus.  I tried using change(), which doesn't actually exist...but it seemed like a good idea at the time! smile

The screenshot below illustrates the issue.

Thoughts?

JavaScript Issue

 
Average of ratings: -
Picture of edu g
Re: JavaScript Question
 

hi christian,

have you considered extending YUI and creating a module in your block or theme? it's quite simmilar to jQuery and it eases your way through selecting elements in the DOM tree and linking events to callbacks

In any case, maybe you are looking for the event onChange() http://www.w3schools.com/jsref/dom_obj_event.asp

your previous solution "simulates" (performs) a click on that box. it is not listening to any event (like onClick, onChange, etc), which is what you want to do after clicking there. a guy wanted to do something similar here http://stackoverflow.com/questions/5122748/javascript-click-event-is-not-trigging-on-a-tag

that is:

1- click (or simulate a click in your box)

2- because you are listening to the event onChange, it'll trigger the event .

3- run the code in the callback function

 
Average of ratings:Useful (1)
Picture of Andrew Nicols
Re: JavaScript Question
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

Hi Christian,

Firstly, as edu g suggests, I'd really advise looking at using a YUI module to do this. YUI is really powerful and will make a lot of the things you're trying to do here much easier.

For this specific issue, again edu g is spot on, you need the change event, not the click.

With regards to a more YUI approach:

The code you're fighting with is the disabledIf checks in lib/form/form.js. It's an area of code which is being actively worked on in master at present (see MDL-35674) because it's a touch on the slow side on larger forms. It's the bit which handles the dependency on the value of that dropdown.

There are a couple of ways that you could approach this:

  • simulate the change event on the dropdown; or
  • call the function that the change event would have called.

From what I recall, simulating events can be problematic and unreliable, but in this case you are probably fine - just check with various browsers + OS combinations to make sure perhaps. See the documentation for Node.simulate in the YUI API: http://yuilibrary.com/yui/docs/api/classes/Node.html#method_simulate

You'd probably call something like (activitycompletiontrackingstate is clearly wrong but you get the picture).

Y.one('#activitycompletiontrackingstate').simulate('change');

 

The alternative approach of calling the function which actually handles the dependency checking would mean a tighter reliance upon the dependencymanager code and, as I say, we are actively working on this in core. To do this option you'd need to know the ID of the form in question and call:

M.form.dependencyManagers[formid].checkDependencies(null);

 

In my opinion, I'd probably try and go for the event simulation with it's benefits of lighter coupling and less reliance upon the state of core Moodle.

Good luck,

Andrew

 
Average of ratings: -