Как создать динамическое всплывающее окно с различным содержанием - PullRequest
Новая
       17

Как создать динамическое всплывающее окно с различным содержанием

1 голос
/ 16 марта 2012

Я создаю Grid, где каждая строка отличается. Последний тд каждой строки 

  <a href="view_all" > View All</a>

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

 <?php
$sr_no = 1;

foreach($this->paginator as $record){
    if($sr_no % 2 == 0)
        $style = 'class="even-row"';
      else
        $style = 'class="odd-row"';
        ?>  
                    <tr <?php echo $style;?>>
                            <td class="sorting_1"> <input type="checkbox" /> </td>
                            <td><?php echo $record['contact_first_name'];?></td>
                            <td><?php echo $record['contact_mobile_no'];?></td>
                            <td><?php echo $record['contact_home_no'];?></td>
                            <td><?php echo $record['contact_office_no'];?></td>
                            <td><?php echo $record['contact_email'];?></td>
                            <td><a id="view_all" href="" > View All</a></td>
                    </tr>
                   <?php $sr_no ++; }?>

в моем скрипте Java я хочу применить это на каждом 

$(document).ready(function() {
   $("#view_all").click(function(){
      //i want dialouge but all the contents of that row
        // $("#view_all").dialog();
   });
 });

Ответы [ 2 ]

2 голосов
/ 16 марта 2012

Во-первых, вы не сможете использовать view_all в качестве имени, если есть несколько строк. Вы можете сделать это именем класса, но идентификатор должен быть уникальным на странице. Поэтому я рекомендую что-то вроде этого: 

<a href="" class="view_all"> View All</a>

Затем вы можете привязать класс, вытащить детали из строки и вставить его в диалоговое окно, а затем отобразить его так: 

// bind to the link's click event
$('.view_all').click(function(){

  // find the row
  var $tr = $(this).closest('tr');

  // grab the information (I don't know of another way other than use
  // column position. However, if you add classes or some other details
  // to the rows as their being output, this would be easier.
  var contact_first_name = $tr.children('td:eq(1)').text(),
      contact_mobile_no = $tr.children('td:eq(2)').text(),
      contact_home_no = $tr.children('td:eq(3)').text(),
      contact_office_no = $tr.children('td:eq(4)').text(),
      contact_email = $tr.children('td:eq(5)').text();

  // build the dialog
  var $dialog = $('<div>',{title:'Details'}).dialog({
    autoOpen: false
    // ...more dialog options...
  });

  // add details to dialog:
  $('<p>').text('First Name: ' + contact_first_name).appendTo($dialog);
  $('<p>').text('Mobile #: ' + contact_mobile_no).appendTo($dialog);
  /* ... */

  // show the dialog
  $dialog.dialog('open');
});

Рабочую демонстрацию можно найти здесь: http://jsfiddle.net/ZJVcm/1/

0 голосов
/ 16 марта 2012

Если приведенный выше код работает отлично, просто замените эту строку 

$('.view_all').click(function(){

с 

$('.view_all').on('click',function(){

и ваша проблема решена

...