jquery Модальный диалог с редактированием / удалением строк таблицы - PullRequest
Новая
       26

jquery Модальный диалог с редактированием / удалением строк таблицы

2 голосов
/ 01 марта 2011

Вот моя цель: иметь таблицу данных с кнопками редактирования / удаления. Кнопки редактирования открывают модальное диалоговое окно с формой, предварительно заполненной сведениями для соответствующей строки. У меня были проблемы с тем, чтобы заставить работать ajax, чтобы заполнить форму на лету, поэтому я просто открываю страницу редактирования внутри модального поля и передаю идентификатор. Это прекрасно работает ... для первой кнопки редактирования. На последующих кнопках редактирования ничего не происходит. Я в недоумении. Я не являюсь экспертом по javascript или jquery, но гуглюсь и не нашел ничего, что могло бы справиться с моей ситуацией (или что я мог бы успешно адаптировать). Я почти уверен, что это касается .each и / или .sibilngs, но я не уверен, как это реализовать. Вот весь код, кроме стилей и некоторого PHP для проверки пользователей: 

<link type="text/css" href="js/css/start/jquery-ui-1.8.9.custom.css" rel="stylesheet" />    
<!--<script type="text/javascript" src="js/js/jquery-1.4.4.min.js"></script>-->
<script type="text/javascript" src="js/jquery-1.5.1rc1.js"></script>
<script type="text/javascript" src="js/js/jquery-ui-1.8.9.custom.min.js"></script>

<script type="text/javascript">
//table highlights & such
$(document).ready(function() {
$(".striped tr").mouseover(function() {
$(this).addClass("highlight");
});
$(".striped tr").mouseout(function() {
$(this).removeClass("highlight");
});
$(".striped tr").toggle(function() {
$(this).addClass("selected");
}, function () {
$(this).removeClass("selected");
});
$(".striped tr:nth-child(odd)").addClass("odd");
});

$(function(){
    $('#edit_number').dialog({  autoOpen: false,width: 400,height: 500, modal:true, open: function() {
        var editqs = 'process.php?action=edit_num_form&id=' + $(this).data('num_id') + '&rep_id=<?php echo $rep_id ?>';
        $("#edit_number").load(editqs);
        }
    });

$('.edit_number_link').live('click', function() {
    var id = $(this).closest('tr').data('id');
    $("#edit_number").data('num_id', id).dialog('open');
    return false;
});


});

</script>
</head>

<body>
<table style="border: 1px solid #000;" border=1 cellpadding=0 cellspacing=0 class="striped">
  <thead>
    <tr style="background-color: #ccc;">
        <th align=left width=100>Name</th>
        <th align=left width=100>External</th>
        <th align=left width=100>Internal</th>
        <th align=left width=50>Options</th>
        <th align=left width=50>Hours</th>
        <th align=left width=150>Notes</th>
        <th colspan=2>&nbsp;</th>
    </tr>
  </thead>
<?php
//db connection stuff    
while($row = mysql_fetch_array($result))
  {
    $name = $row['name'];
    $external = $row['external'];
    $internal = $row['internal'];
    if ($internal == "")
      $internal = "&nbsp;";
    $options = $row['options'];
    if ($options == "")
      $options = "&nbsp;";
    $hours = $row['hours'];
    if ($hours == "")
      $hours = "&nbsp;";
    $comments = $row['comments'];
    if ($comments == "")
      $comments = "&nbsp;";
    $id = $row['id'];

  echo "<tr data-id=".$id."><td>" . $name . "</td>";
  echo "<td>" . build_link($external,$rep_id, "ext", $userfound) . "</td>";
  echo "<td>" . $internal . "</td>";
  echo "<td>" . $options . "</td>";
  echo "<td>" . $hours . "</td>";
  echo "<td>" . $comments . "</td>";
  //echo "<td><a href='process.php?action=edit_num_form&id=" . $id . "&rep_id=".$rep_id."' title='Edit'><img src='edit.png' alt='Edit' border='0'></a></td>";
  echo "<td><a href='#' title='Edit' class='edit_number_link'><img src='edit.png' alt='Edit' border='0'></a></td>";
  echo "<td><a href='process.php?action=delete_num&id=" . $id . "&rep_id=".$rep_id."' title='Delete'><img src='delete.png' alt='Delete' border='0'></a></td>";
  //echo "<td><a href='?action=delete' class='delete'>Delete</a></td>";
  echo "</tr>";
  }
echo "</table>";
mysql_close($con);
?>

<div id="edit_number" title="Edit Number">
</div>
</body>

</html>

Так что в идеале я могу получить свои данные с каждой кнопки редактирования, чтобы загрузить форму в реальном режиме (не на внешней странице), но, как минимум, нужны дополнительные экземпляры для работы.

Любая помощь будет оценена. Спасибо!

Ответы [ 2 ]

0 голосов
/ 01 марта 2011

Поскольку я не вижу весь кодовый набор ... Находится ли #edit_number_link внутри #edit_number?Если это так, вам нужно использовать метод live () jQuery, чтобы связать событие, поскольку DOM обновляется после начальной загрузки страницы.

Кроме того, вам не нужно attr('data-id') в качестве jQuery сейчассопоставит эти атрибуты с методом .data().Вам нужно .data('id'), чтобы получить это значение.

Другое дело, что вы используете ID, когда вам следует использовать класс.Предполагается, что идентификаторы являются уникальными и используются только один раз.Вы должны изменить #edit_number_link на класс .edit_number_link.Я не уверен, какой контейнер #edit_number, но я предполагаю, что есть только один. 

$('.edit_number_link').bind('click', function() {
    var id = $(this).closest('tr').data('id');
    $("#edit_number").data('num_id', id).dialog('close').dialog('open');
    return false;
});

ОБНОВЛЕНИЕ После просмотра кода и его проверки на jsfiddle яобнаружил, что происходит то, что когда вы нажимаете на другие ссылки редактирования, диалоговое окно уже открыто и не запускает его открытый обратный вызов.Для этого нужно обновить код, чтобы диалоговое окно было закрыто перед его открытием.Мой код выше обновлен и теперь включает .dialog('close').Кроме того, я изменил live обратно на bind, так как в этом случае он не нужен.

0 голосов
/ 01 марта 2011

Поскольку у вас есть тот же идентификатор "edit_number_link", вы должны попробовать: 

$("#edit_number_link").each(function() {
    $(this).click(function(){
          var id = $(this).closest('tr').attr('data-id');
           $("#edit_number").data('num_id', id).dialog('open');
        return false;
    });
});

Или что-то в этом роде.

...