CODEWITHSUNDEEP
jqueryhtmlparameter-passing
Devner
Devner

Reputation: 7245

jQuery - Pass variables/data to a div based upon the button that was clicked

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.

Upvotes: 0

Views: 11532

Answers (3)

Logan Bailey
Logan Bailey

Reputation: 7127

There are a couple different ways to pass along variables. In your example you're passing along one variable from point a to point b while going through 2 dialogs. I simplified your dialog's by using two divs in one dialog and hiding and showing the divs according to the clicks in the dialog. I then used jQuery's data function to store the value in a specific spot on the dom. I've often seen hidden form fields with a specific id used as well.

The main idea is you "generally" can't pass it as a function to a click handler, but you can store it in the dom and recall it when you need it.

Here is Jquery Script

$('#dialog-box').dialog({
  close: function(){
    $('#confirm-redeemable').show();
    $('#confirm-print').hide();
  }
/*Custom settings here*/});
$('.redeemable').live('click', function(e){
  e.preventDefault();
  $('#dialog-box').dialog('open');
  $('#dialog-box').data('documentId', $(this).attr('id'));
});

$('#dialog-box a.yes').live('click', function(e){
  e.preventDefault();
  $('#confirm-redeemable').hide();
  $('#confirm-print').show();
});

$('#dialog-box a.no, #dialog-box a.print-no').live('click', function(e){
  e.preventDefault();
  $('#dialog-box').dialog('close');
});

$('#dialog-box a.print-yes').live('click', function(e){
  // Your solution
  $('#printing_div').text($('#dialog-box').data('documentId'));

  // Or
  $.get('url.php', {id: $('#dialog-box').data('documentId')}, function(response){
    console.log(reponse);
  });
});

Here is HTML

Record 2 ----- <a href="#" id="r2" class="redeemable">Redeem</a>

<div id="dialog-box">
  <div id="confirm-redeemable">
    <p>Are you sure you want to redeem this?</p>
    <a href="#" class="yes">Yes</a>
    <a href="#" class="no">No</a>
  </div>

  <div id="confirm-print" style="display: none;">
    <p>Do you want to print this?</p>
    <a href="#" class="print-yes">Yes</a>
    <a href="#" class="print-no">No</a>
  </div>
</div>

Upvotes: 1

Adam Presley
Adam Presley

Reputation: 549

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.

Upvotes: 2

jfriend00
jfriend00

Reputation: 707326

If you have a link like this:

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

and you have a click handler in jQuery for it like this:

$("#redemption a").click(function() {
    // you can get the link object that was clicked via the "this" variable
    var clickedID = this.id;

    // do your other logic here using clickedID

    // show that click was already processed 
    // so the link doesn't do anything further with it
    return(false);
});

Upvotes: 0

Related Questions