jQuery 대화 상자가 HTML 양식과 작동하지 않습니다.

Question

관리자가 사용자 계정을 삭제할 수있는 간단한 사용자 계정 관리 페이지가 있습니다.

admin 사용자가 확인을 묻는 "삭제"버튼을 클릭하면 jQuery UI 대화 상자가 팝업되고 중지되도록하고 싶습니다.

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으로 입력해야합니다. 그런 다음 양식을 제출하려면 삭제 버튼이 필요합니다. 당신 때문에 양식을 비 작동과 (

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. 
} 

데모 : getDeleteConfirmation에 그리고 일부 조정

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

: 먼저 사용하고 당신이 그것에게 버튼을주고 구입 할 수있는 형태로 getDeleteConfirmation 말할 필요 제출할 때 오류가 발생합니다.) http://jsfiddle.net/ambiguous/kGSCk/

Answer 2

jQuery UI는 너무 단순하기 때문에 과도하다고 생각합니다. 당신은 당신의 링크의 클릭에 이러는 생각 :

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

편집 : 또는

당신은 이런 식으로 할 수 있습니다. 즉, 우리는 2 개의 상자를 만듭니다. 하나는 링크가 있고 다른 하나는 팝업 상자입니다. 팝업 상자 안에는 링크가 있습니다. 하나는 삭제 경로에 대한 링크이고 다른 하나는 새 팝업 창을 숨 깁니다. 심플 스. 당신은 섹시하고 아름다운 :)을 확인하기 위해 팝업 상자 스타일을 할 것

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 선택기가 더 많은 작업이 필요합니다 JS

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

에 대한) 난이 도움이 될 것입니다 있는지 확실하지 않습니다. 그래서 그럴 수 없다면

Answer 3

JavaScript가 발생하기를 기다리는 것이 불가능합니다. 확인을 사용하거나 다른 방식으로 페이지를 제출해야합니다. getDeleteConfirmation에서 false를 반환하고 대화 상자의 양식에 submit()을 호출하여 클릭 이벤트를 취소 할 수 있습니다.

또는 Ajax를 사용하여 양식을 서버에 게시 할 수 있습니다.

또한 대화 코드에 연결할 수없는 코드가 있습니다. 리턴 문 다음의 코드는 실행 불가능합니다.