Диалог jQuery не работает с формой HTML

Question

У меня есть простая учетная запись пользователя mgmt, которая позволяет администратору удалять учетные записи пользователей.

Я хочу, чтобы диалоговое окно jQuery UI появилось и остановилось, когда пользователь admin нажимает кнопку «удалить», запрашивая подтверждение.

JQuery код:

function getDeleteConfirmation(){ 
    $("#dialog:ui-dialog").dialog("destroy"); 
    $("#dialog-confirm-delete").dialog({ 
     modal: true, 
     buttons: { 
      "Delete": function() { 
         return true; 
         $(this).dialog("close");   
      }, 
      Cancel: function() { 
         return false; 
         $(this).dialog("close"); 
      } 
     } 

    });} 

PHP код:

print "<form action='admin_index.php' method=post>"; 
print "<input value=".$user_list[$i]."><input type=submit onclick='return getDeleteConfirmation()' value=delete>"; 
print "</form>"; 

Проблема заключается в том, что диалоговое окно JQuery сделал всплывающее окно, но вместо остановки и ожидания для пользователя, чтобы реагировать, он вскоре исчез. Страница перенаправлена, и учетная запись пользователя удалена.

Затем я попытался изменить код, как показано ниже;

function getDeleteConfirmation(){ 
    $("#dialog:ui-dialog").dialog("destroy"); 
    $("#dialog-confirm-delete").dialog({ 
     modal: true, 
     buttons: { 
       "Delete": function() { 
        window.location = 'admin_index.php'; 
        $(this).dialog("close"); 
      }, 
       Cancel: function() { 
        $(this).dialog("close"); 
      } 
     } 
    }); 

}

и избавиться от формы тегов в HTML, оставить только входные теги

print "<input value=".$user_list[$i]."><input type=submit onclick='return getDeleteConfirmation()' value=delete>"; 

диалоговое окно JQuery UI теперь может привал, но ли я нажимаю на «Удалить» или «отменить», соответствующая учетная запись пользователя не удаляется. Кажется, что это вызвано тем, что переменная php не прошла.

Я просто хотел бы знать, как сделать все это правильно.

Надеюсь, что у меня возникла проблема, и любая помощь приветствуется!

Answer 1

Ваша проблема в том, что getDeleteConfirmation вернется, прежде чем диалог сможет что-либо сделать. Все происходит следующим образом:

1. Нажмите кнопку отправки.
2. getDeleteConfirmation называется.
3. Диалог создан.
4. getDeleteConfirmation возвращается.
5. С getDeleteConfirmation не вернулся false, запускается стандартное поведение кнопки отправки.
6. Форма отправлена.

return false в getDeleteConfirmation, чтобы прекратить подачу. Затем вам нужно нажать кнопку «Удалить», чтобы отправить форму. Прежде всего, необходимо сказать getDeleteConfirmation, какую форму использовать, и вы можете сделать это купить придав ему кнопку:

<input type="submit" onclick="return getDeleteConfirmation(this)"> 

Тогда некоторые корректировки getDeleteConfirmation:

function getDeleteConfirmation(button) { 
    $("#dialog-confirm-delete").dialog({ 
     modal: true, 
     buttons: { 
      "Delete": function() { 
       $(this).dialog("close"); 
       $(button).closest('form').submit(); // <--- Trigger the submit. 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     } 

    }); 
    return false; // <--- Stop the submit. 
} 

Demo (с нефункционирующих форму, чтобы вы «Я получаю сообщение об ошибке при его отправке): http://jsfiddle.net/ambiguous/kGSCk/

Answer 2

Я думаю, что пользовательский интерфейс jQuery является излишним для чего-то такого простого. Вы думали положить это на щелчок вашей ссылке:

if (confirm("Are you sure you want to contiune with this request?")) { 
    //Do stuff 
} 

Edit: Или

Вы можете сделать это таким образом. Короче говоря, мы создаем 2 коробки. Один со ссылкой, а второй - всплывающее окно. Внутри всплывающего окна мы помещаем ссылки. Один из них - это ссылка на путь удаления, а другой - скрытие нового всплывающего окна. Simples. Вы хотите, чтобы стиль всплывающего окна, чтобы сделать его сексуально и красиво :)

CSS:

.deleteSexyBox { 
    display: none; 
} 

HTML:

//This box is just the simple link 
    <div class="delete">Delete</div> 
// deleteSexyBox style this up to be sexy however you want. i suggest position: fixed to keep it in the middle of the screen 
<div class="deleteSexyBox"> 
    <a href="linkToWhereEverYouDoTheDeleting">Delete me pleaaaseeee</a> 
    <div>Cancel</div> 
</div> 

Стиль удаления однако вы хотите. Теперь для JS

$('.delete').click(function(){ 
    $('.deleteSexyBox').fadeIn(); 
}); 
$('.deleteSexyBox div').click(function(){ 
    $('.deleteSexyBox').fadeOut(); 
}); 

В JS селекторы нужно больше работать, если есть более чем один, который я предполагаю, что там будет;) Я не уверен, если это поможет. Так что холла мне, если его не

Answer 3

Невозможно, чтобы JavaScript мог ждать чего-то. Либо вы можете использовать подтверждение, либо вам придется отправить страницу другим способом. Вы можете отменить событие клика, вернув false в getDeleteConfirmation и вызовите submit() в форме в диалоговом окне.

ИЛИ вы можете использовать Ajax для отправки формы на сервер.

Также ваш код диалога имеет недостижимый код. Это невозможно для кода после выполнения операторов возврата.