Передача переменных в диалоговое окно jQuery UI

Question

Я новичок в jQuery и испытываю трудности с передачей переменной в диалоговое окно jQuery UI. При нажатии "Да" браузер должен перенаправить на localAuthorityDelete и удалить соответствующую запись.

<script type="text/javascript">
   $(document).ready(function(){
       $('#deleteButton').click(function(){
           $('#deleteText').dialog({
            modal:true,
            resizable: false,
            buttons: {
                'Yes': function() {
                    window.location = "../php/localAuthorityDelete.php?laID="
                    $(this).dialog('close');
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            },                                 
            });   
       });
   });
</script>

У меня есть много кнопок удаления:

<input type="button" id="deleteButton" name="deleteButton" value="Delete">

Каждая кнопка удаления находится в таблице рядом с записью, которая должна быть удалена. Я делал это с:

<a href="localAuthorityDelete.php?laID=<?php echo $row_laID['laID'];?>">Delete</a>

Но нужно воспользоваться диалоговым окном jQuerys. Если бы кто-то мог мне помочь, я был бы очень признателен. Я попытался обернуть вышеупомянутый JS в функцию, которая принимает одну переменную, но она не запускается.

Спасибо за вашу помощь.

Майк

Answer 1

Похоже, у вас есть несколько deleteButtons, однако идентификатор элемента HTML должен быть уникальным. Поэтому измените способ рендеринга кнопки удаления следующим образом:

<input type="button" 
       id="delete-<?php echo $row_laID['laID'];?>" 
       class="deleteButton" 
       name="deleteButton" 
      value="Delete"
/>

Теперь вы можете получить идентификатор удаляемого элемента из идентификатора кнопки удаления. И обработчик кликов теперь должен быть привязан к.deleteButton вместо #deleteButton.

<script type="text/javascript">
     $(document).ready(function(){
         $('.deleteButton').click(function(){
            var id = this.id.replace(/[^0-9]/g, "");
            $('#deleteText').dialog({
                modal:true,
                resizable: false,
                buttons: {
                    'Yes': function() {
                        window.location = "../php/localAuthorityDelete.php?laID=" + id;
                        $(this).dialog('close');
                    },
                    Cancel: function() {
                        $(this).dialog('close');
                    }
                }
            });   
         });
     });
</script>