Многократный диалог подтверждения работает только один раз - PullRequest
Новая
       14

Многократный диалог подтверждения работает только один раз

1 голос
/ 08 февраля 2012

У меня есть эта страница php, где я делаю поиск, который возвращает данные из базы данных. Данные отображаются в виде HTML-таблицы, и в каждом из элементов есть возможность удалить элемент. Когда я нажимаю на эту кнопку удаления, она должна открыть диалоговое окно (я использую jquery ui), в котором мне нужно выбрать, хочу ли я отменить или подтвердить операцию. Все работало нормально, потом я заметил, что диалог работает только в первом элементе таблицы. Когда я нажимаю на другие, они просто завершают операцию удаления без подтверждения. Вот код, я был бы рад, если бы кто-то мог помочь мне в этом:

action.js 

   (...)
   var buttonClicked = false;

   $(function(){           
      $('#delete').click(function(event){
          if(!buttonClicked){
              event.preventDefault();
              $('#dialogConfirm').dialog('open');                  
          }              
      });           
      $('#dialogConfirm').dialog({
         autoOpen: false,
         modal: true,
         width: 250,
         height: 225,
         buttons: {
             "No": function() {    
                 buttonClicked = false;
                 $(this).dialog('close'); },
             "Yes": function() {    
                 buttonClicked = true;
                 $(this).dialog('close');
                 document.forms['formdelete'].submit();}
         }             
      });          
   });
   (...)

mypage.php (соответствующая часть функции, которая генерирует таблицу) 

(...)
function listResults($query, $num, $type) {    
if($tipo == "product") {
    if($num > 1) {
        echo "<hr>";
        echo "<h3>$num occurrences were found:</h3>";
        echo "<div id='dialogConfirm' title='Warning!'><p>Are you sure you want to delete it?</p></div>";

    echo "<table id='table1'>";
    echo "<tr><td><b>Product</b></td> <td><b>Label</b></td></tr>";
    while($row = mysql_fetch_assoc($query)) {   
    echo "<tr id='icons'><td>" . $row['product'] . "</td><td>" . $row['label'] . "</td>
         <td><form action='#' method='POST'><button class='ui-state-default ui-corner-all' title='View'><span class='ui-icon ui-icon-image'></span></form></td>
         <td><form action='editProduct.php' method='POST'><input type='hidden' name='id' value='".$row['id']."' /><button class='ui-state-default ui-corner-all' title='Edit'><span class='ui-icon ui-icon-pencil'></span></form></td> 
         <td><form action='delete.php' method='POST' id='formdelete'><input type='hidden' name='produto' value='".$row['id']."' /><button class='ui-state-default ui-corner-all' id='delete' title='Delete'><span class='ui-icon ui-icon-trash'></span></form></td></tr>";
    }
    echo "</table>";         
    }
    else {
        if($num == 0) {
            echo "<h1>No occurrence was found.</h1>";            
        }
        else {
            echo "<h1>$num occurrence was found:</h1>";
            while($array = mysql_fetch_assoc($query)) {
            echo "<li>" . $array['product'] . "</li>" . $array['label'] . "<br><br>"; 
            }
        }
    } 
    (...)

сгенерированный html: 

<div id='dialogConfirm' title='Warning!'><p>Are you sure you want to delete it?</p>    </div>

<table id='table1'>
<tr>
    <td><b>Product</b></td> 
    <td><b>Label</b></td>
</tr>

<tr id='icons'><td>IBP</td><td>Dixtal</td>
<td><form action='#' method='POST'>
    <button class='ui-state-default ui-corner-all' title='View'><span class='ui-icon ui-icon-image'></span></button>
</form></td>

<td><form action='editProduct.php' method='POST'>
    <input type='hidden' name='id' value='7' /><button class='ui-state-default ui-corner-all' title='Edit'><span class='ui-icon ui-icon-pencil'></span></button>
</form></td> 

<td><form action='#' method='POST' id='formdelete'>
    <input type='hidden' name='product' value='7' /><button class='ui-state-default ui-corner-all' id='delete' title='Delete'><span class='ui-icon ui-icon-trash'></span></button>
</form></td>

</tr>

//and then this line of the table is repeated all over again, with different values on each iteration

</table>

EDIT Задача решена. Я изменил идентификатор delete на класс и удалил флаг buttonClicked из js. 

 $(function(){             
      $('.delete').click(function(event){
          event.preventDefault();
          $('#dialogConfirm').dialog('open');       
      });                     

      $('#dialogConfirm').dialog({
         autoOpen: false,
         modal: true,
         width: 250,
         height: 225,
         buttons: {
             "Não": function() { 
                 $(this).dialog('close');},
             "Sim": function() {                       
                 $(this).dialog('close');                                         
                 document.forms['formdelete'].submit();
             }
         }            
      });          
   });

1 Ответ

0 голосов
/ 09 февраля 2012

Измените свой код на это: 

$('#delete').click(function(event){
    event.preventDefault(); //take event.preventDefault() out of if statement
    if(!buttonClicked){
        $('#dialogConfirm').dialog('open');                  
     }              
 });

Это не мешает поведению по умолчанию во второй раз, потому что он не выполняет оператор if после того, как переменная buttonClicked изменена на true.Форма просто отправляется без dialog.

. dialog не открывается снова, потому что, когда флаг buttonClicked равен true, когда Yes нажата в dialog.

Трудно сказать из кода, какова цель флага buttonClicked.

...