Develop Reference

Javascript Moodle

Hi I am fairly new to moodle. I have been trying to test if my Javascript runs but to no avail. Here is what I have:
In /videojs/amd/src I made a test.js file with a simple command
define(['jquery'], function() {
return {
init: function() {
// Put whatever you like here. $ is available
// to you as normal.
alert("It changed!!");
}
};
});
Then I grunt the file and everything succeed, and made minified. But when I go to the page it doesn't run. Now I read Moodle's Javascript Doc and I see it says
The idea here is that we will run the 'init' function from our (PHP) code to set things up. This is called from PHP like this...
Where do I call this PHP?

Somewhere in the page you are outputting, you need to add a call like this:
$PAGE->requires->js_call_amd('PLUGINTYPE_videojs/test', 'init);
It's not entirely clear from your example what sort of plugin you are creating, so whichever type you are creating (https://docs.moodle.org/dev/Plugin_types), you need to put it in the appropriate subdirectory for your site (e.g. /mod/videojs, /local/videojs, etc.), then add some sort of PHP script as the entry point for your plugin and call the js_call_amd function from there.

How can I import an external .js to my Java test with Selenium in Eclipse?

I want to import my function of JavaScript to my Java project in Eclipse and using it with Selenium, but I can't find the form to do this.
I try making .js file like this to Selenium could recognise this code:
Selenium.prototype.doProve = function() {
$("#proveDiv > div > div").each(function(i, obj)
{
$(i).click(function(){});
});
};
Well, as you can see I have 3 divs and what I want to do it's to access to the third div in which I have 2 divs more (this is the clue of the loop). In each div of the loop I want to make a click.
I tried to use this function in my Java project but I can't get any result so I tried to execute this function as a String and then executing the script like this:
String script = "$(\"#proveDiv > div > div" +
"\").each(function(i, obj){ " +
"$(i).click(function(){});})";
//Executing script
if (driver instanceof JavascriptExecutor) {
((JavascriptExecutor) driver).executeScript(script);
}
It works, but it's not very useful, because I want to make an external .js which contains all the JavaScript functions and call them from there, not in a String.
Any help would be appreciated. I saw some questions here, but any of them worked for me.
Thank you very much!

It works, but it's not very useful, because I want to make an external
.js which contains all the JavaScript functions and call them from
there, not in a String.
You can achieve this only by loading your external js file into the DOM
var addscript=window.document.createElement('script');addscript.type='text/javascript';addscript.src='http://localhost/somescript.js';document.getElementsByTagName('body')[0].appendChild(addscript);
Note : Most browsers do not allow you to load local resources so put your external js file in local webserver and then access it like http://localhost/somescript.js
After loading the js file into DOM now you can call the javascript functions in the external js file
Example
Lets say we have a external js file named somescript.js which contains the below function
//simple function which sets the value "test" to the search box
window.somefunc = function () {document.getElementsByName("s")[0].value='test';}
Webdriver code :
driver.get("http://www.jquery.com");
//Load the External js file into DOM
((JavascriptExecutor) driver)
.executeScript("var addscript=window.document.createElement('script');addscript.type='text/javascript';addscript.src='http://localhost/somescript.js';document.getElementsByTagName('body')[0].appendChild(addscript);");
//wait for the js to be loaded to the DOM
((JavascriptExecutor) driver)
.executeScript("return typeof(somefunc)").toString().equals("function");
//Now you call the JavaScript functions in the JS file
((JavascriptExecutor) driver)
.executeScript("somefunc();");
Note : Behind the scenes Selenium wraps your JavaScript code in an anonymous function. So your somefunc function is local to this anonymous function.And due to JavaScript's scoping rules, somefunc doesn't exist outside of that anonymous function. so we have made it a global function by assigning it to window.
EDIT :
And I don't really understand why you use the window statement. And I
was searching something like ((JavascriptExecutor)
driver).executeScript("here the .js"); But I don't know if it is
possible
This is how executeScript method executes the provided javascript
The script fragment provided will be executed as the body of an
anonymous function.
Example if we used the below code
((JavascriptExecutor) driver)
.executeScript("somefunc = function () {document.getElementsByName("s")[0].value='test';}");
((JavascriptExecutor) driver)
.executeScript("somefunc();");
(function() {
somefunc = function () {document.getElementsByName("s")[0].value='test';}
})();
(function() {
somefunc();
});
What do you mean where you say that you want to put the external .js
into the DOM?
By DOM i mean Document object model of the page constructed as a tree of Objects (in short your webpage).We use javascript to load the external js to the webpage and then call the functions in the js file and execute them(like in the above example).
In the code that you put in your edit. Both functions are the same?
I just gave an example by that what i meant was each script provided in execute script will be executed in the body of an anonymous function.In our case we haven't used executescript to create the somefunc function rather used it from the external js file in dom we only called it using the executescript method so you can do it with or without the window object
//simple function which sets the value "test" to the search box
somefunc = function () {document.getElementsByName("s")[0].value='test';}//this will also work
Hope this helps you.Kindly get back if you have any queries.

You could store the javascript in a file like a properties or xml file.
Sample File:
clickOnLoginButton=function bclick(){....};bclick();
Sample Code:
FileInputStream file;
Properties properties = new Properties();
// load the file handle for properties file
file = new FileInputStream(filename);
// load all the properties from this file
properties.load(file);
// we have loaded the properties, so close the file handle
file.close();
String mainExecutor = properties.getProperty(parameter);
WebDriver dr = initalizeWebDriver();
JavascriptExecutor js = (JavascriptExecutor) dr;
js.executeScript(mainExecutor);

Can I call a function in a script from a library script made by myself?

Here is my library code:
function simpleEdit(){
var cell = SpreadsheetApp.getActiveSheet().getActiveCell();
cell.setValue('Simple edit made by script');
// Calling a custom script function after doing edit
customfunc();
}
customfunc() is outside the library in other script but in same project.
Here is its code:
function customfunc() {
SpreadsheetApp.getActiveSheet().getRange('F2').setValue('Hi');
}
Script calling library function
function s()
{
Demog.simpleEdit();
}
Demog is the library identifier

Yes this works. If you have a library published with two script files in it. All the methods not marked as private will be accessible to script the is utilizing the library.
But to let you know getActiveSheet() or getActiveSpreadsheet() will not work in a library. Even if the script you published was contained in a spreadsheet. It will always return null.

Debugging Javascript functions in Firebug

I am trying to debug legacy scripts with Firebug. As per my knowledge (Which I got yesterday)
we use Step over (F10) to debug line by line and Step into (F11) to dig into JS function.
But when I use Step into on any JS function call, it takes control to next line. I want to see what is hidden inside the function. How can we do it ?
I kept break-point inside the function and then tried Step into then it takes control inside the function body. But it is tedious to find each function method and set break-point.
Is there any other way to do it ? or which is the right way ?
For example :
i2b2.ONT.ctrlr.FindBy = {
clickSearchName: function() {
// do some stuff
i2b2.ONT.ctrlr.FindBy.doNameSearch(search_info); // I tried Step into here
// some more stuff
}
doNameSearch: function(inSearchData) {
// If I set break-point here then only I can debug it
// or it directly takes control to `// some more stuff` in `clickSearchName:function`
}
}
PS: It also more external JS function calls.
Thanks,
Ajinkya.

"Step into" will step into the function if there is JS source for the function. If not (like for document.getElementById("foo"), it will step over it since it doesn't have anything that it understand to step into.
If you can point us to a working example where you are having the problem (either a jsFiddle reduction of the problem or a working web page) with instruction on where the relevant code is, we can probably help more.
Judging by your code example, I'm wondering what you're trying to step into. The line of code that starts with clickSearchName defines a function. It doesn't execute it. So, it won't go into that function until some later code actually calls clickSearchName. So, perhaps you're breaking on the definition of the function and trying to step into the function when it isn't being executed. That's just a guess though since we don't have a working example to try ourselves.

Add the line debugger; to your code at the place where you want to break into the debugger, it's a JavaScript keyword, which should do what you want. Just remember to take it out when you're done debugging your code.

What's the best way to execute something only when all my JavaScript is loaded using jQuery?

I'm developing a web page using jQuery, and I want it to execute some code only after ALL my JavaScript files are fully loaded. The head section of my HTML has the following script.
<script src="supervisor/lib/jquery-1.6.min.js" type="text/javascript"></script>
Inside jQuery file, I inserted the following code:
$.getScript('functions.js', function () {
// code here
});
The file functions.js has the following code:
$.getScript('mask.js');
$.getScript('validations.js');
$.getScript('lotsofscripts.js');
// and more...
I want the code here in the first $.getScript() to execute only after ALL the other JS are loaded, but this is not ocurring. What's the best way to achieve this?
PS: I'm using lots of $.getScript() because I find easier to separate them, but I want them to be inserted inside the same file.

You could always just increment a counter. That way your getScript calls remain asynchronous, as the last thing you want to do is change that. And frankly, any packaged solution you find to loading the scripts in parallel and then executing some function afterward will probably just be a shinier version of this:
var counter = 0;
var filesToLoad = ["mask.js", "validations.js", "lotsofscripts.js"];
var filesCount = filesToLoad.length;
// Increment counter each time a getScript completes
function incrementCounter() {
if (++counter === filesCount) {
// This code will execute after everything loads
}
}
// Iterate through the files and run getScript on them,
// with incrementCounter as the callback
for (var i = 0; i < filesCount; i++) {
$.getScript(filesToLoad[i], incrementCounter);
}
Here's a jsFiddle example.

Assuming you know the name of a function defined in a js script that needs to be tested for whether or not it has loaded...
I use Underscore.js isFunction() to figure this out ( http://documentcloud.github.com/underscore/#isFunction )
Example, if script.js contains a function myScriptFunction(), you can write a function that checks:
if (_.isFunction(myScriptFunction)) {
// script.js is loaded
// OK to move on to the next step
} else {
// script.js is not loaded
// check again later
}
I have tried binding to events to figure out if a js script file is loaded, but it doesn't seem to work across all the browsers.

I would suggest HeadJS to load your JS files. You can execute specific code upon completion of specific files or groups of files. Take a look, it's a great little project.

You might want to use jQuery.ajax() instead. You can set the async option to false (it's true by default when you use getScript