MVC 4 Unable to call javascript function from another js file

Question

I am trying call the loadTimesheet function in object weeklytimesheet from another js file.

I get a Object doesn't support property or method 'loadTimesheet' error.

EDIT: My intellisense in VS2012 is not working either if that has any bearing on it.

mylester.index.js

$(document).ready(function () {

    $("#newtimesheet").click(function () {
        weeklytimesheet.loadTimesheet();
    });
});

mylester.weeklytimesheet.js

var weeklytimesheet = new function () {
    load = function () {
        var wkending =  getWeekEnding();
        var proId = $("#newtimesheet").attr("proid");
        $("#divtimesheet").load("/Timesheet/NewTimesheet", new { proId: proID, enddate: wkending });
        open();
    };

    open = function() {
        $("#clipboarddialog").dialog({
            autoOpen: true,
            height: 800,
            width: 860,
            modal: true,
            title: "Edit Timesheet",
            buttons: {
                "Save": function () {
                    editorForm.saveForm();
                    $(this).dialog("close")
                },
                Cancel: function () { $(this).dialog("close") }
            }
        });

    };

    getWeekEnding = function () {
        var wkending;
        $(".datepicker").datepicker();
        $("#datepickerdialog").dialog({
            autoOpen: true,
            close: function () {
                wkending = $("#weekending").val();
            },
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });
        return wkending;
    }

    return
    {
        loadTimesheet: load
    };
}();

And I suppose the files are included in the right order? Is the file being loaded correctly (check your dev tools) — Johan
– Johan, Commented Oct 15, 2014 at 4:25
Because the second piece of javascript is assigning to a variable, the variable must be in scope (declared and set) prior to where your first piece of javascript is called. — ps2goat
– ps2goat, Commented Oct 15, 2014 at 4:30

Valentin Waeselynck · Accepted Answer · 2014-10-15 04:30:25Z

1

The problem is that carriage return after the new, it tells the function to return undefined. fix it this way:

return {
  loadTimesheet: load
};

This machanism is known as semicolon insertion is one of the 'awful parts' of JavaScript that Douglas Crockford lists in his excellent book, JavaScript, The Good Parts.

Also, I suggest 2 improvements in your code :

1) don't use new. It's not meant for what you are doing here. If what you want is a local scope for declaring your helper functions, here's a trick : use a function expression that you that you call immediately:

  var weeklytimesheet = (function () {
    // do your local stuff ...
    return {
      loadTimesheet: load
    };
  } ()); // see? call the function immediately. That's how you make nontrivial expressions in JS.

2) Don't assign variables that you have not declared (load, open, getWeekEnding). You may have got this habit from Python, but in JavaScript it has a very bad effect : these variables are interpreted as properties of the global Object (window), which makes them not local at all and pollutes the global namespace. I think you don't want that; using function declarations (function open () {...}) solves this neatly.

So to sum up, here is how I would rewrite your code :

var weeklytimesheet = (function () {
  function load () {
    var wkending =  getWeekEnding();
    var proId = $("#newtimesheet").attr("proid");
    $("#divtimesheet").load("/Timesheet/NewTimesheet", new { proId: proID, enddate: wkending });
    open();
  }

  function open () {
    $("#clipboarddialog").dialog({
      autoOpen: true,
      height: 800,
      width: 860,
      modal: true,
      title: "Edit Timesheet",
      buttons: {
        "Save": function () {
          editorForm.saveForm();
          $(this).dialog("close")
        },
        Cancel: function () { $(this).dialog("close") }
      }
    });

  }

  function getWeekEnding () {
    var wkending;
    $(".datepicker").datepicker();
    $("#datepickerdialog").dialog({
      autoOpen: true,
      close: function () {
        wkending = $("#weekending").val();
      },
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
    return wkending;
  }

  return {
    loadTimesheet: load
  };

}());

edited Oct 15, 2014 at 4:30

answered Oct 15, 2014 at 4:19

Valentin Waeselynck

6,10130 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Malcolm Over a year ago

One other thing. I have jquery ui in the _references.js file. But the $("#divtimesheet").load this is giving same error as the other one. Any ideas?

Valentin Waeselynck Over a year ago

I'm not familiar with jQuery UI, but I see another problem in that line : new { proId: proID, enddate: wkending }. It makes no sense to use new with an object. And again, don't use new unless a library forces you to.

Collectives™ on Stack Overflow

MVC 4 Unable to call javascript function from another js file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related