Need help understanding jQuery functions

Question

I've spent a few days going over the guides on the jQuery site in an attempt to learn it. I have a pretty good grasp on it, and javascript. However, I'm trying to put it to use and I'm a bit confused.

here's the situation: I want to have a function that accepts parameters, and when called, will use those parameters to set the inner html of a div.

In regular JS I would do something like:

function showMessage(type, title, message){
 div.innerHTML = "hello world!";
}

It would obviously use the parameters but for the sake of simplicity I didn't.

I know in jQuery, to do the same thing you would do:

$('#id').html('Hello world!');

However, to do that I'd need it in a document ready function. I've also experimented with

$('#close').click(function( event ) {
 do stuff;
} 

With the original JS function, I could simply do an

onClick="showMessage"

Is there a way to call functions like that in jQuery? or do I need to use .click listeners? I don't know a terrible lot about jQuery, and I don't know everything that my system will need to be able to do in the future, so I'd rather have a way to call the function when I need it. Also, how do I pass parameters to the jQuery function?

• Raptor: onclick of $('#close').click() is also valid. But the latter one can separate Javascript from HTML code, which makes the structure easier to manage.
• TGH: It's good to do stuff in document.ready, but the plain java script way of assigning hello world depends on the same "readiness" of the document to work, so jQuery doesn't make this any harder. Instead Jquery offers a convenient way to know when the doc is ready through document.ready. It's essentailly just waiting for the body tag to be present
• Ohgodwhy: @TGH but you can detect document.ready without jQuery. Instead, $(document).ready() turns it into a jQuery object, with or without jQuery, you can still do it.
• Ohgodwhy: are you asking this question because your HTML is generated in a loop and you're used to generating click handlers inside hide?
• sharf: @Ohgodwhy not necessarily. I have a message div, that has several classes to determine its look, so I want to pass the type and message to the function so that it can generate the appropriate message div. This may be done with a button click, a javascript form validation function, or via the return of ajax. I don't know what I will need yet, so I want a generic way to do this.

Answer 1

Use .click() or .on() listeners in order to call your functions for the sake of keeping javascript calls out of your html

Also, how do I pass parameters to the jQuery function?

you pass them into the function using an anonymous callback on your click event

function showMessage(param1, param2) {
 //do stuff with your params
}
jQuery('#id').click(function() {
 showMessage(param1, param2);
});

• sharf: Thanks, this helps, but Jay got it first.

Answer 2

The concept on creating function when using document ready:

$(document).ready(function(){
 //call function
 showMessage("alert", "hello", "message")
})
function showMessage(type, title, message){
 $('#id').html('type is :' +type+ ' title is :' +title+ 'message is'+ message);
}

• sharf: Thanks, this helps, but Jay got it first.

Answer 3

Is this what you're looking for?

$(document).ready(function () {
 $('#close').click(function() {
 showMessage('id', 'Hello world!');
 } 
});
function showMessage(id, message){
 $('#' + id).html(message);
}

• sharf: that might do it. I'd be able to call showMessage in the html correct? and also use the jquery for the #close button to do the same thing?
• Jay: Yes, but generally speaking doing something like onclick="showMessage('id', 'Hello World!');" is bad form. Wire up your events and the like through straight JavaScript.
• Jay: Separation of concerns. Html defines how things are displayed, JavaScript defines how things "work".

Answer 4

using a $(document).ready() function triggers the page and elements to listen to the defined events to occur and run functions accordingly. yet you can use JQuery facilities together with JavaScript style of scriptings.

following might help:

<input type=text onchange="getName(this.value,'link.php');" />

JS:

function getName(val, href){
 var link = href +'?name='+val;
 $('#result').load(link); // JQuery function
}