ansaurus

Question

Calling jQuery method from onClick attribute in HTML

Answer 1

+1 A:

I don't think there's any reason to add this function to JQuery's namespace. Why not just define the method by itself:

function showMessage(msg) {
   alert(msg);
};

<input type="button" value="ahaha" onclick="showMessage('msg');" />

UPDATE: With a small change to how your method is defined I can get it to work:

<html>
<head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
 <script language="javascript">
    // define the function within the global scope
    $.fn.MessageBox = function(msg) {
        alert(msg);
    };

    // or, if you want to encapsulate variables within the plugin
    (function($) {
        $.fn.MessageBoxScoped = function(msg) {
            alert(msg);
        };
    })(jQuery); //<-- make sure you pass jQuery into the $ parameter
 </script>
</head>
<body>
 <div class="Title">Welcome!</div>
 <input type="button" value="ahaha" id="test" onClick="$(this).MessageBox('msg');" />
</body>
</html>

Dexter 2010-04-20 03:40:06

This is an example function, to demonstrate the problem.

Russell 2010-04-20 03:44:46

OK.. I've updated with an example which works using your preferred method - both scoped or unscoped.

Dexter 2010-04-20 04:07:42

Thanks @Dexter, that worked fine :) Note version 1.4.2 works, while 1.3.2 wont work.

Russell 2010-04-20 04:31:10

Answer 2

+1 A:

$('#MyButtonID').click(function() {
  // Optional alert shows that the click fires this code.
  alert('Handler for .click() called.');
  // Call your jQuery function somewhere in here.
});

Robert Harvey 2010-04-20 03:41:22

This is not inline at all. If a user was to look at the button element, they would have no idea what events were doing what.

Russell 2010-04-20 03:43:32

I've never seen it done inline, but I suppose it's possible.

Robert Harvey 2010-04-20 03:44:12

Would you agree it would help make code more maintainable by having the method call in the element definition? For a large scale project there could be a large number of events being called, and that would be a lot of javascript code to flick through!

Russell 2010-04-20 03:46:05

I am not pretending to know what is right or wrong about jquery, I am still learning, perhaps I am misinterpreting some of the uses of jquery. :)

Russell 2010-04-20 03:47:39

I don't mind inline calls, but if I have a chance to put all the jQuery code in one place, then yes, I would much rather call it this way than have it inline, scattered all over the page.

Robert Harvey 2010-04-20 03:47:58

Anyway, the purpose of jQuery is to select html elements to patch code into. So trying to inline it may be putting the cart before the horse. Dexter has the right idea; if you want to inline the code, just use ordinary Javascript.

Robert Harvey 2010-04-20 03:53:41

`$('#ahaha')` please note that 'ahaha' is a value and not an id....

Reigel 2010-04-20 03:54:46

Answer 3

A:

you forgot to add this in your function : change to this :

<input type="button" value="ahaha"  onclick="$(this).MessageBox('msg');" />

Puaka 2010-04-20 03:45:07

This still doesn't work. :(

Russell 2010-04-20 03:50:25

This doesn't work.. at least in my tests

Dexter 2010-04-20 03:50:45

Answer 4

+1 A:

this works....

<script language="javascript">
    (function($) {
     $.fn.MessageBox = function(msg) {
       return this.each(function(){
         alert(msg);
       })
     };
    })(jQuery); 
</script>

.

   <body>
      <div class="Title">Welcome!</div>
     <input type="button" value="ahaha"  onclick="$(this).MessageBox('msg');" />
    </body>

edit

you are using a failsafe jQuery code using the $ alias... it should be written like:

(function($) {
  // plugin code here, use $ as much as you like
})(jQuery);

or

jQuery(function($) {
   // your code using $ alias here
 });

note that it has a 'jQuery' word in each of it....

Reigel 2010-04-20 04:03:38

Hi @Reigel, thanks. This is what I am looking for :)

Russell 2010-04-20 04:08:03

Is this a common/popular way to handle this kind of global function exposure?

Russell 2010-04-20 04:08:26

please see edit

Reigel 2010-04-20 04:13:36

Answer 5

+2 A:

Don't do this!

Stay away from putting the events inline with the elements! If you don't, you're missing the point of JQuery (or one of the biggest ones at least).

The reason why it's easy to define click() handlers one way and not the other is that the other way is simply not desirable. Since you're just learning JQuery, stick to the convention. Now is not the time in your learning curve for JQuery to decide that everyone else is doing it wrong and you have a better way!

Dave Markle 2010-04-20 04:17:44

Hi @Dave, I am not saying everyone else is doing it wrong. I am wondering how jquery can "simplify javascript" if instead of adding events inline to add events to a list of javascript function calls in a separate js file? How would a developer know which events are beign fired by which elements? I appreciate your answer and would really like to use (and work with, not against) Jquery. :)

Russell 2010-04-20 05:15:20

There are a couple of ways to do this. You don't have to have a separate JS file. If you want, you can just stick your script in a <script> block at the top of your file. The recommended way of doing this is to give each element an ID, say <input id="foo"> and then wire up your events with $("#foo").click(...); at the top of your page. If you're using ASP.NET 3 or earlier and you can't give elements an ID, give your elements a very specific class name and select them that way. If your IDs are clearly named, it will be easy for a reader to understand.

Dave Markle 2010-04-20 11:08:17

ansaurus

tags:

views:

answers:

Calling jQuery method from onClick attribute in HTML

related questions