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?

onclick of $('#close').click() is also valid. But the latter one can separate Javascript from HTML code, which makes the structure easier to manage. — Raptor
– Raptor, Commented Jul 29, 2013 at 2:29
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 — TGH
– TGH, Commented Jul 29, 2013 at 2:32
@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
– Ohgodwhy, Commented Jul 29, 2013 at 2:32
are you asking this question because your HTML is generated in a loop and you're used to generating click handlers inside hide? — Ohgodwhy
– Ohgodwhy, Commented Jul 29, 2013 at 2:35
@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. — sharf
– sharf, Commented Jul 29, 2013 at 2:38

kyler · Accepted Answer · 2013-07-29 02:44:47Z

2

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);
});

answered Jul 29, 2013 at 2:44

kyler

6335 silver badges10 bronze badges

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

1 Comment

sharf Over a year ago

Thanks, this helps, but Jay got it first.

akbarbin · Accepted Answer · 2013-07-29 02:47:59Z

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);
}

answered Jul 29, 2013 at 2:47

akbarbin

5,1051 gold badge31 silver badges31 bronze badges

1 Comment

sharf Over a year ago

Thanks, this helps, but Jay got it first.

Lee Taylor · Accepted Answer · 2013-07-29 02:36:59Z

1

Is this what you're looking for?

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

function showMessage(id, message){
    $('#' + id).html(message);
}

edited Jul 29, 2013 at 2:36

Lee Taylor

7,99416 gold badges38 silver badges53 bronze badges

answered Jul 29, 2013 at 2:33

Jay

6,3044 gold badges22 silver badges23 bronze badges

3 Comments

sharf Over a year ago

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 Over a year ago

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 Over a year ago

Separation of concerns. Html defines how things are displayed, JavaScript defines how things "work".

deviloper · Accepted Answer · 2013-07-29 03:02:34Z

0

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
}

answered Jul 29, 2013 at 3:02

deviloper

7,25210 gold badges52 silver badges79 bronze badges

Collectives™ on Stack Overflow

Need help understanding jQuery functions

4 Answers 4

1 Comment

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related