jquery - How do i call the same function with different element id tags?

Question

I am a very new to jquery and am having trouble calling more than one instance of a function.

i have a function

 $('#open_dialog').click(function(){
     $("#dialog").dialog("open");
       return false;    
});

To call this function i have an href link with an id tag name of open_dialog. Obviously this works great if it is the only link on the page referencing the function (A one to one relationship). However, I want (A many to one relationship).

I have a table of 25 records and I require each of my records to have a link which will call the open_dialog function I know that all the ids cannot be called open_dialog as they have to be unique, therefore how do I access the function while passing the value of which one of my 25 records is instantiating the function.

By the way my records are dynamic therefore $('#open_dialog, open_dialog2,open_dialog3,...') is not practical.

Thank you for looking at my post

Answer 1

instead of using unique id's you can use a class on your items then just use

$('.classname').click(function()
{
     // 'this' would reference the anchor that was clicked
     $("#dialog").dialog("open");
       return false;    
});

also, you can add another attribute to the anchor, ie

<a href="#" class="classname" record="14">Record 14</a>

then inside your function you can have

var record = $(this).attr("record");

record would now contain 14.

Answer 2

you could use class instead of id's like:

$('.open_dialog').click(function(){ 
    $('#dialog').dialog("open");
    return false;
});

Answer 3

You would us a class selector instead of an id selector.

Apply the same class to each of your links... lets say 'openDialog'

<a class='openDialog' href='your link here'>Your text here</a>

In jQuery then you'd change what you have to this...

$('.openDialog').click(function(){
  $("#dialog").dialog("open");
  return false;    
});

I'm confused as to what you're referencing with the "#dialog" id though. You didn't really explain what that is above... or at least I didn't get it if you did.

If there was any value from the recordset you're pulling that you needed to pass into the onclick function you could set the id of each anchor tag (assuming these values are unique) to be the value you need to pass, then reference them within the code like so... (I've stored the id of the link in a variable named rec_no below...

$('.openDialog').click(function(){
  var rec_no = $(this).attr("id");

  $("#dialog").dialog("open");
  return false;    
});

Answer 4

Forget all of this class nonsense everyone else is talking about. Only use that if you absolutely have to (why add bloat to the markup if it is unnecessary?). Since you said your links are in a table, you can get all links within the table like this...

$("table a").click(function() { ... });

Or if your table has an ID on it...

$("#tableId a").click(function() { ... });

Get your record id inside the click event is easy too. Depends on which column it is in. This will alert the value of the first column in the table (within the click event)...

var id = $(this).parent().siblings("td:eq(0)").text();
alert(id);

Answer 5

I’m assuming the dialog function needs to know which record you’re referring to. You’ll need to output some sort of id for the record in your HTML. E.g.

<a class="open_dialog" id="record1"></a>

Then amend the dialog function to accept the record’s id as an argument, and pass it in like this:

$('.open_dialog').click(function(){
    $("#dialog").dialog("open", $(this).id);
    return false;
});

Is dialog one of your functions, or something built in to jQuery?