jQuery 확인 대화 상자에서 동작을 수행하는 버튼을 얻는 방법은 무엇입니까?

jQuery 대화 상자가 있습니다. 이미지를 클릭하면 대화 상자가 열리고 삭제할 것인지 확인해야합니다. 예 또는 아니오jQuery 확인 대화 상자에서 동작을 수행하는 버튼을 얻는 방법은 무엇입니까?

나는 세 개의 파일이 작업을 수행 :

주요 파일의 index.php :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Aircrafts</title> 
    <link rel="stylesheet" type="text/css" href="../../../lib/css/style.css"> 
    <link rel="stylesheet" href="../../../lib/css/flick/jquery.ui.all.css"> 
    <script src="../../../lib/js/jquery.js"></script> 
    <script src="../../../lib/js/ui/jquery.ui.button.js"></script> 
    <script src="../../../lib/js/ui/jquery.ui.core.js"></script> 
    <script src="../../../lib/js/ui/jquery.ui.widget.js"></script> 
    <script src="../../../lib/js/ui/jquery.ui.mouse.js"></script> 
    <script src="../../../lib/js/ui/jquery.ui.button.js"></script> 
    <script src="../../../lib/js/ui/jquery.ui.draggable.js"></script> 
    <script src="../../../lib/js/ui/jquery.ui.position.js"></script> 
    <script src="../../../lib/js/ui/jquery.ui.resizable.js"></script> 
    <script src="../../../lib/js/ui/jquery.ui.dialog.js"></script> 


<script> 
$(function() { 
    $("#loadingdialog").dialog({ 
     autoOpen: false, 
     width: 300, 
     height: 65 
    }); 

    $("#loadingdialog").dialog('widget').find(".ui-dialog-titlebar").hide(); 
    $("#loadingdialog").dialog('widget').find(".ui-resizable-se").hide(); 


    $("#confirmdialog").dialog({ 
     autoOpen: false 
    }); 

    $("#confirmdialog").dialog('widget').find(".ui-resizable-se").hide(); 


}); 

    if (window.XMLHttpRequest) 
      { 
      ajax=new XMLHttpRequest(); 
      } 
     else 
      { 
      ajax=new ActiveXObject("Microsoft.XMLHTTP"); 
      } 

    function confirmdelete(str){ 

    var loading = $("#loadingdialog").dialog('open'); 
    var confirm = $("#confirmdialog"); 
     confirm.load("./confirm_dialog.php?icao="+str, function(){ 
     loading.dialog('close'); 
     confirm.dialog('open'); 
     $('#yes').blur(); 
     }); 
    } 

    function remove(str){ 

    var loading = $("#loadingdialog").dialog('open'); 
     confirm.load("./delete_aircarft.php?icao="+str, function(){ 
     refreshTable(function(){loading.dialog('close');}); 
     refreshTable(function(){$('#result').fadeIn(); document.getElementById('result').innerHTML=ajax.responseText;}); 
     setTimeout(function() { $('#result').fadeOut() }, 5000); 

     }); 
    } 

    function close(){ 

    $("#confirmdialog").dialog('close'); 

    } 
</script> 
</head> 
<body> 

<div id="result"></div></br> 

<div id="loadingdialog"><center><p><img src="../../../lib/images/loading.gif"></center></p></div> 

<div id="confirmdialog"></div> 

<img src="../../../lib/images/cross.png" onclick="confirmdelete('B737')"> 

</body> 
</html>

confirm_dialog.php :

<script> 
    $("#yes") 
     .button() 
     .click(function(event) { 
    }); 

    $("#no") 
     .button() 
     .click(function(event) { 
    }); 
</script> 

<h2><font face="century Gothic">Are you sure?</font><h2><hr size="1"> 

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 
<tr><td><input id="yes" type="submit" value="Yes" onclick="remove('<?php echo $_GET["icao"]; ?>')"></td>&nbsp&nbsp&nbsp<td><input id="no" type="submit" value="No" onclick="close()"/></td></tr>

그리고 delete_aircraft.php (이 파일은 획득 한 ICAO를 보여줄 뿐이며, 앞으로는 삭제를 준비 할 것이지만 문제가되지는 않습니다.)

<?php echo $_GET["icao"]; ?>

문제는 대화 상자가 열리면 예 또는 아니요를 클릭 할 수 있지만 예 또는 아니요를 클릭하면 아무런 작업도 수행되지 않습니다.

출처

2013-01-18 user1972864

'# yes'와'# no'에 대해 추가 한 빈 클릭 핸들러에 작업을 넣으십시오. – bfavaretto

그래도 문제는 아닙니다! – user1972864

@ user1972864 아무런 문제가 없다는 것이 문제였습니다. 당신은 아무것도 구현하지 않았습니다. 그래서 정상적인 행동입니다. – Tchoupi

왜 대화 상자의 내장에있는 버튼을 사용하여?

$("#confirmdialog").dialog({ 
    autoOpen: false, 
    buttons: { 
    "Yes": function() { 
     // YOUR ACTION HERE // 
     $(this).dialog("close"); 
    }, 
    "No": function() { 
     $(this).dialog("close"); 
    } 
    } 
});

편집 : 외부 PHP 파일을로드 할 필요 : 버튼과 필요한 변수 대화 상자를로드 할 remove 기능을 업데이트합니다. 또한 대화 상자를 만들 때 애니메이션을 설정하십시오. 이러한 모든 추가 핸들러는 필요하지 않습니다.

$("#confirmdialog").dialog({ 
    autoOpen: false, 
    show: "fade", // Fade In 
    hide: "fade" // Fade Out 
}); 


function remove(str){ 

    // Set the button action. str is available here 
    $("#confirmdialog").dialog("option", "buttons", { 
    "Yes": function() { 
     // YOUR ACTION HERE // 
     // str has the value of your "icao" variable 
     $(this).dialog("close"); 
    }, 
    "No": function() { 
     $(this).dialog("close"); 
    } 
    }); 

    // Open the dialog 
    $("#confirmdialog").dialog("open"); 
}

출처

2013-01-18 19:41:21

버튼으로 ICAO를 보내야하기 때문에. 그리고 최종 문서의 ICAO는 PHP로 작성되었습니다! – user1972864

알았어. 이 경우''로 바꾸면됩니다. –

대화 상자를 열 때 값이있는 것 같아서 PHP에 넘겨 줄 필요가 없다고 생각했습니다 ('str' 참조) : confirm.load ("./ delete_aircarft.php? icao = "+ str' –

당신이 거기에 아무것도 넣어하지 않았기 때문이다

$("#yes") 
     .button() 
     .click(function(event) { 
    // do something 
    }); 

$("#no") 
     .button() 
     .click(function(event) { 
    // do something 
    });

출처

2013-01-18 19:37:48 SeanWM

좋아, 여기에 기능을 넣지 만 일하지 마라 !! – user1972864

정확히는 문제가 아닙니다. 물론, 아무것도 끝나지 않고있다. 그러나 DOM이 빌드되기 전에 스크립트가 실행 중이며 노드에 이벤트가 바인딩되어 있지 않을 수도 있습니다. –

나는 문제가 핸들러가 생성 될 때 Yes와 No 버튼이 존재하지 않을 수도 있다고 생각한다. 스크립트는 HTML 아래로 이동하거나 '

jQuery 확인 대화 상자에서 동작을 수행하는 버튼을 얻는 방법은 무엇입니까?

답변

관련 문제