Modular JS: How to run a non-global function

Question

This is my code (simple):

<script type="text/javascript">

// Set Schedule 
(function() {
var schedule = {

    report: [], 
    template: $('#report_schedule').html(),

    init: function() {
        this.cacheDom();
        this.bindEvents();
        console.log("banana");
    }, 
    cacheDom: function() {
        this.$setScheduleBtn = $('#setScheduleBtn'); 
        this.$reportSchedule = $('#reportSchedule');
    }, 
    bindEvents: function(){
        console.log("potato");
        this.$setScheduleBtn.on('click', showReportScheduler.bind(this));
    }, 
    showReportScheduler: function(){
        this.$reportSchedule.toggle();
    },



    schedule.init();
};

})();
</script>

    <span class="btn" id="setScheduleBtn">Set Schedule</span>
    <div id="reportSchedule" name="reportSchedule" style="display: none;">

I am running this and see no results on the click event. I tried using a console.log("banana"); in my init function just to make sure this script is running. no bananas in my browsers console. What am I not understanding?

p.s: this is my first time trying modular js by myself.

Edit:

Thank you Titus for your help. this is my final code:

    <span class="btn" id="setScheduleBtn">Set Schedule</span>
    <div id="reportSchedule" name="reportSchedule" style="display: none;">
        ......  
    </div>

<script type="text/javascript">
/******************/
/** Set Schedule **/ 
/******************/
(function() {

    var schedule = {

        report: [], 
        template: $('#report_schedule').html(),

        // Init functions
        init: function() {
            this.cacheDom();
            this.bindEvents();
        }, 
        // Cache elements from DOM
        cacheDom: function() {
            this.$setScheduleBtn = $('#setScheduleBtn'); 
            this.$reportSchedule = $('#reportSchedule');
        }, 
        // Set events
        bindEvents: function() {
            this.$setScheduleBtn.on( 'click', this.showReportScheduler.bind(this) );
        }, 
        // Display on click
        showReportScheduler: function() {
            this.$reportSchedule.show("slow");
        }

    };
    schedule.init();

})();
</script>

score 3 · Accepted Answer · answered Jan 07 '18 at 11:36

3

The schedule.init(); statement is inside the object literal. You need to move it outside the object literal but keep it inside the function:

(function() {
    var schedule = { // object literal start
         ......
    };// object literal end

    schedule.init();

}/* function end */)();

answered Jan 07 '18 at 11:36

Titus

22,031
1
23
33

thank you very much! But for sum reason my click event isn't launching. any idea why? `ReferenceError: showReportScheduler is not defined` – Imnotapotato Jan 07 '18 at 11:48
@RickSanchez You'll have to use `this.showReportScheduler.bind(this)` – Titus Jan 07 '18 at 11:50
@RickSanchez Also, you may have to wait until the DOM is ready. You can do that by wrapping your code in `$(function(){})` instead of `(function{})()`. – Titus Jan 07 '18 at 11:51
I have used bind but still get the same result (I actually do want this to run right after my html loads and not to wait until the whole page is loaded). – Imnotapotato Jan 07 '18 at 11:59
@RickSanchez The problem is not with `bind` it is with `this.` at the beginning, it should be `this.showReportScheduler....` instead of just `showReportScheduler`. As it is now, your code will run before the HTML elements below the ` – Titus Jan 07 '18 at 12:02
That is right! haven't notcied it's before my html elements. I now get an error for `TypeError: this.$setScheduleBtn.on is not a function`. im very confused right now since it shouldn't be a function :S – Imnotapotato Jan 07 '18 at 12:13
@RickSanchez Is the jQuery library loaded before this code is executed ? – Titus Jan 07 '18 at 12:16
@RickSanchez In that case, I'm not sure what is going on. – Titus Jan 07 '18 at 12:19
lol. i'll paste my current whole code in the main post for you to see. – Imnotapotato Jan 07 '18 at 12:21
@RickSanchez Everything seems to work as expected in this fiddle https://jsfiddle.net/t6hprf4x/ – Titus Jan 07 '18 at 12:22
yup, exact same code. I'll open a new post for this tnx – Imnotapotato Jan 07 '18 at 12:28
Im using a veeeery old jQuery `jQuery JavaScript Library v1.3.2` could this be it? – Imnotapotato Jan 07 '18 at 12:41
1

@RickSanchez Yes, that is the problem, that version doesn't have the `on` function. Here is a fiddle that uses that version and produces the same error https://jsfiddle.net/gmpw3qyf/ – Titus Jan 07 '18 at 12:43

Modular JS: How to run a non-global function

1 Answers1