jQuery - передает переменные / данные в div, основываясь на нажатой кнопке - PullRequest
Новая
       19

jQuery - передает переменные / данные в div, основываясь на нажатой кнопке

0 голосов
/ 03 ноября 2011

У меня есть некоторые данные из базы данных в цикле. У каждой из этих записей есть кнопка (фактически гиперссылка), которая называется «Погасить». Пользователь может нажать на эту кнопку, чтобы подтвердить свой выбор. Если он нажмет «да», то появится другое диалоговое окно с просьбой нажать кнопку «Печать» или отменить печать. Если он нажимает «Печать», то переменные / данные, принадлежащие этой записи, должны быть отправлены в div с идентификатором: «printing_div». Эти переменные будут использоваться для запроса базы данных, получения определенных результатов и последующего вывода результата, чтобы пользователь мог распечатать эти данные.

Для иллюстрации рассмотрим ниже: 

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

Скажите, если пользователь нажимает кнопку «Погасить», принадлежащую 2-й записи, то: 1. Появляется диалоговое окно с просьбой подтвердить, хочет ли он выкупить. Нажимаемые кнопки - «Да» и «Нет». Если нет, диалоговое окно исчезает. Если нажать «Да», то откроется еще одно диалоговое окно с сообщением: Вы уверены, что хотите печатать сейчас? Нажимаемые кнопки - «Распечатать сейчас» и «Отменить печать». Если нажать «Отменить печать», недавнее диалоговое окно закрывается. Если щелкнуть «Распечатать сейчас», то идентификатор этой гиперссылки, по которой был выполнен щелчок (т. Е. «R2»), должен быть передан в качестве значения в div с идентификатором «printing_div». Этот r2 будет использоваться для запроса к базе данных, такой как: 

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

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

Вышеуказанные данные будут отражены.

Так что в моем случае, Я не могу передать идентификатор (т. Е. R2) в printing_div, чтобы я мог запросить базу данных. Как я могу это сделать?

Вся помощь приветствуется. Спасибо.

Ответы [ 3 ]

2 голосов
/ 03 ноября 2011

Итак, учитывая ваши ссылки, вот так: 

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

И div, который вы упомянули для печати: 

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

Вы можете сделать как jfriend00, упомянутый выше: 

$("#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;
});

И затем, конечно, вы можете получить новый атрибут в любом вызове AJAX, который вы отправляете обратно на сервер: 

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

Надеюсь, это поможет.

1 голос
/ 03 ноября 2011

Существует несколько различных способов передачи переменных. В вашем примере вы передаете одну переменную из точки a в точку b, проходя через 2 диалога. Я упростил ваши диалоги, используя два элемента div в одном диалоговом окне, скрывая и отображая элементы div в соответствии с щелчками в диалоговом окне. Затем я использовал функцию данных jQuery , чтобы сохранить значение в определенном месте в DOM. Я часто видел скрытые поля формы с определенным идентификатором.

Основная идея в том, что вы "вообще" не можете передать это как функцию обработчику кликов, но вы можете сохранить его в DOM и вызывать его, когда вам это нужно.

Вот скрипт Jquery 

$('#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);
  });
});

Вот 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>
0 голосов
/ 03 ноября 2011

Если у вас есть такая ссылка: 

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

и у вас есть обработчик кликов в jQuery для этого: 

$("#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);
});
...