Question

I have some data from database coming out in a loop. Each of these records have a button (hyperlink actually) called “Redeem”. A user can click on this button to confirm his selection. If he clicks yes, then another dialog will show up asking him to click on the “Print” button or cancel printing. If he clicks “Print”, then the variables/data belonging to this record, should be sent over to a div with ID: “printing_div”. These variables will be used to query the database, retrieve certain results and then echo the result so that the user can print this data.

For illustration, consider below:

Record 1 ----- <a href="#" id="r1">Redeem</a>
Record 2 ----- <a href="#" id="r2">Redeem</a>
Record 3 ----- <a href="#" id="r3">Redeem</a>
.
...

Say if user clicks on the Redeem button belonging to the 2nd Record, then:
1. A dialog box pops up asking him to confirm if he wants to Redeem. Clickable buttons are “Yes” and “No”. If No is pressed, the dialog box disappears. If Yes is clicked, then it launches another dialog box which says: Are you sure you want to print now? Clickable buttons are “Print Now” and “Cancel Print”. If “Cancel Print” is clicked, the recent dialog box is closed. If “Print Now” is clicked, then the id of that hyperlink that was clicked (i.e ‘r2’) should be passed as a value to a div with ID ‘printing_div’. This r2 will be used to query database such as:

$query = "SELECT FROM table WHERE col = 'r2' ";
$row = mysql_fetch_array($query);

echo $row[0].$row[1];

The above echo’ed data will be printed.

So in my case, I am unable to pass the id (i.e r2) to the printing_div, so that I can query the database. How can I do this?

All help is appreciated. Thank you.

Answer 1

So given your links, like so:

<div id="redemption">
   <a href="#" id="r1">Redeem</a>
   <a href="#" id="r2">Redeem</a>
   <a href="#" id="r3">Redeem</a>
</div>

And a div you mentioned for printing:

<div id="printing_div"></div>

You can do like jfriend00 mentioned above:

$("#redemption a").click(function() {
   var id = this.id;

   // Assign the id to a custom attribute called data-id
   $("#printing_div").attr("data-id", id);

   return false;
});

And then of course you can retrieve the new attribute in any AJAX call you send back to the server by:

var id = $("#printing_div").attr("data-id");

Hope that helps.