jquery method in another file not found

Question

I have a file- "Site.js" with the following method:

function Init() {
  $(document).ready(function() {
    //some init actions here
  });
}
function jQuery.fn.DivToggle(div) {
  $(div).toggle('fast');
  //some other animation code here
}

in my Index.cshtml file (I'm using asp.net mvc), I have this:

<!DOCTYPE html>
<html>
  <head id="Head1" runat="server">
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Site.js")" type="text/javascript"></script>
  </head>
  <body>
    <script type="text/javascript">
      $(function () {
        Init();
      });
    </script>
  </body>
</html>

I get this error when I run the project: "Microsoft JScript runtime error: 'Init' is undefined"

Any idea what I'm doing wrong?

do you have all of the functions in Site.js wrapped in a $(function () { all functions here }); tag? if so, the init() function will be private an unable to call it from outside of Site.js — Johnny Craig
– Johnny Craig, Commented Apr 13, 2012 at 18:11
@DotNetter Removed document.ready, still see the same issue. — Aniket
– Aniket, Commented Apr 13, 2012 at 18:21
function jQuery.fn.DivToggle(){} <= you can't actually do that. It should be jQuery.fn.DivToggle=function(){} — gen_Eric
– gen_Eric, Commented Apr 13, 2012 at 18:30

gen_Eric · Accepted Answer · 2012-04-13 18:32:01Z

3

Init is not defined because there is a syntax error in Site.js.

function jQuery.fn.DivToggle(div) {
  $(div).toggle('fast');
  //some other animation code here
}

You can't actually do that. It should be:

jQuery.fn.DivToggle = function(div) {
  $(div).toggle('fast');
  //some other animation code here
};

P.S. $(function(){ is the same as $(document).ready(function(){. You don't need the $(document).ready(function(){ inside your Init function.

answered Apr 13, 2012 at 18:32

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

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

Comments

gen_Eric · Accepted Answer · 2012-04-13 20:21:04Z

I think the real problem is with your DivToggle() function. You should change that code to the following:

(function( $ ) {
  $.fn.DivToggle = function() {
     $(this).toggle('fast');
  };
})( jQuery );

Then you can call DivToggle by creating a selector and calling it. So if you want to run this on all of the div tags in your page do this:

$('div').DivToggle();

Here is some documentation on creating custom plugins: http://docs.jquery.com/Plugins/Authoring

You probably need to change the way you are calling Init() and document.ready(). Actually the Init() function isn't really doing anything right now. I think you can change your code to this and it would accomplish what you want:

<script type="text/javascript">

//create the DivToggle() function
(function( $ ) {
  $.fn.DivToggle = function() {
     $(this).toggle('fast');
  };
})( jQuery );

$(function () {
    //call DivToggle() on all <div> tags when the page loads
    $('div').DivToggle();
});

</script>

Andrew · Accepted Answer · 2012-04-13 18:40:42Z

0

Try namespacing your javascript:

 StackOverflow = {

      function Init(){

      }

      return {
        Init: Init
      };
 }();

Call your function with

$(function(){
     StackOverflow.Init();
});

answered Apr 13, 2012 at 18:40

Andrew

5,4601 gold badge31 silver badges49 bronze badges

4 Comments

gen_Eric Over a year ago

Why would this make a difference?

Andrew Over a year ago

@Rocket I think it is a good practice to namespace your JavaScript.

gen_Eric Over a year ago

Shouldn't it be StackOverflow = (function(){...}());?

gen_Eric Over a year ago

It may be a good idea, but I don't see how it relates to the question.

Collectives™ on Stack Overflow

jquery method in another file not found

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related