General developer forum

Using JQuery in a block.

 
Picture of Dave Emsley
Using JQuery in a block.
Particularly helpful Moodlers

OK I've tried to follow the development documentation but I'm struggling.

I'm in development mode and have $CFG->cachejs = false; in my config.php

I have a block with the necessary folder structure myblock/amd/src in which is myfile.js

myfile.js contains: 

// JavaScript Document
// Put this file in path/to/plugin/amd/src
// You can call it anything you like
 
define(['jquery'], function($) {
 
    return {
        init: function() {
            // Put whatever you like here. $ is available
            // to you as normal.
            $(".close").click(function(e) {
                alert("Clicked!!");
            });
        }           
    };
});

The block itself works fine and puts the expected content onto the page.

my block_myblock.php file contains:

    public function get_content() {
        global $PAGE;
        $PAGE->requires->js_call_amd('block_myblock/myfile', 'init');
        if ($this->content !== null) {
          return $this->content;
        }
        $this->content         =  new stdClass;
        $this->content->text   = '<div id="donation-blurb">
        <div class="close">Close</div>';
        $this->content->footer = '';   
        return $this->content;
    }

However I get nothing.  Am I calling js_call_amd in the correct way?

Cheers

Dave




 
Average of ratings: -
Picture of Amy Stewart
Re: Using JQuery in a block.
 

You need to minimize the file using grunt.  https://docs.moodle.org/dev/Grunt

 
Average of ratings: Useful (1)
Picture of Mark Johnson
Re: Using JQuery in a block.
Core developersParticularly helpful MoodlersPlugin developers

Hi Amy,

While this is correct by default, if you have $CFG->cachejs = false; set (as Dave mentions in his post), Moodle will use the un-minified version from your amd/src folder.

 
Average of ratings: Useful (1)
Picture of Dave Emsley
Re: Using JQuery in a block.
Particularly helpful Moodlers

Amy,

The docuemntation says I can use the jscache=false to ensure src versions of scripts are run and I don't have to grunt them I found that this disables many other scripts too - including jquery!

SO it seems to me that even during development I have to minify with grunt to enable the code to run.

Thanks


Dave

 
Average of ratings: Useful (1)
Picture of Mark Johnson
Re: Using JQuery in a block.
Core developersParticularly helpful MoodlersPlugin developers

Hi Dave,

Can you verify (by looking in your browser's developer tools) whether myfile.js is being loaded at all?  If so, can you put a debugger breakpoint inside the init() function and see if it's being executed?

 
Average of ratings: -
Picture of Dave Emsley
Re: Using JQuery in a block.
Particularly helpful Moodlers

Hi Mark,
No I don't believe it is being loaded at all.


Cheers

Dave

 
Average of ratings: -
Picture of Mark Sharp
Re: Using JQuery in a block.
Core developersParticularly helpful MoodlersPlugin developers

I think you may be calling the requires->js_call_amd too late.

You should be able to put it in a function called get_required_javascript() in your block_myblock.php file.

In the block block_settings, you'll find this code:

function get_required_javascript() {
        global $PAGE;
        $adminnode = $PAGE->settingsnav->find('siteadministration', navigation_node::TYPE_SITE_ADMIN);
        parent::get_required_javascript();
        $arguments = array(
            'instanceid' => $this->instance->id,
            'adminnodeid' => $adminnode ? $adminnode->id : null
        );
        $this->page->requires->js_call_amd('block_settings/settingsblock', 'init', $arguments);
    }

And here's the doc for block_base:

/**
     * Allows the block to load any JS it requires into the page.
     *
     * By default this function simply permits the user to dock the block if it is dockable.
     */
    function get_required_javascript() {
        if ($this->instance_can_be_docked() && !$this->hide_header()) {
            user_preference_allow_ajax_update('docked_block_instance_'.$this->instance->id, PARAM_INT);
        }
    }

So I think that'll sort you out.

 
Average of ratings: Useful (1)
Picture of Dave Emsley
Re: Using JQuery in a block.
Particularly helpful Moodlers

Hi Mark,
Thanks for that.  Still doesn't seem to want to work though.  When I look at the code for the page I can see:

require(["block_my_block/my_script"], function(amd) { amd.init(); });;
require(["tool_usertours/usertours"], function(amd) { amd.init("2", false, 34); });;
require(["block_my_block/my_script"], function(amd) { amd.init("45", "expandable_branch_71_siteadministration"); });;
... and a lot more.
Does this mean the script IS being loaded as it doesn't seem to be functioning and other scripts seem to have their full contents within the page code.

Cheers

Dave

 
Average of ratings: -