[jquery] Jquery UI 대화 상자에서 “확인”대화 상자를 구현하는 방법은 무엇입니까?

Program / 글쓴이

JQuery UI 대화 상자를 사용하여 못생긴 javascript:alert()상자 를 바꾸려고합니다 . 내 시나리오에는 항목 목록이 있으며 각 항목 옆에 각 항목에 대해 “삭제”버튼이 있습니다. psuedo html 설정은 다음과 같습니다.

<ul>
    <li>ITEM <a href="url/to/remove"> <span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
</ul>

<div id="confirmDialog">Are you sure?</div>

JQ 부분에서는 문서 준비가 완료되면 먼저 div를 필요한 버튼이있는 모달 대화 상자로 설정하고 제거하기 전에 해당 “a”가 확인을 시작하도록 설정합니다.

$("ul li a").click(function() {
  // Show the dialog    
  return false; // to prevent the browser actually following the links!
}

자, 여기 문제가 있습니다. 초기화 시간 동안 대화 상자는 누가 (항목) 그것을 실행할지 알지 못하며 항목 ID (!)도 알 수 없습니다. 사용자가 여전히 YES를 선택한 경우 링크를 따라 제거하기 위해 확인 버튼의 동작을 어떻게 설정할 수 있습니까?

답변

방금 같은 문제를 해결해야했습니다. 이 기능을 사용하려면 확인 기능을 사용하려는 링크 dialog에 대해 click이벤트 처리기 에서 부분적으로 초기화해야합니다 (두 개 이상의 링크에 사용하려는 경우). 확인 단추 클릭을 위해 링크의 대상 URL을 이벤트 핸들러에 삽입해야하기 때문입니다. CSS 클래스를 사용하여 확인 동작이 필요한 링크를 나타냅니다.

다음은 예제에 적합하도록 추상화 된 솔루션입니다. 

<div id="dialog" title="Confirmation Required">
  Are you sure about this?
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true
    });
  });

  $(".confirmLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");

    $("#dialog").dialog({
      buttons : {
        "Confirm" : function() {
          window.location.href = targetUrl;
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#dialog").dialog("open");
  });
</script>

<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>

CSS 클래스 ( confirmLink내 예제에서)로 링크를 생성 할 수 있다면 이것이 효과가 있다고 생각합니다 .

여기 에 코드 가있는 jsfiddle 이 있습니다.

전체 공개를 위해이 특정 문제에 대해 몇 분을 보냈으며이 질문에 대해 비슷한 대답을 했으며 당시에는 대답이 없었습니다.

답변

클릭 이벤트에서 대화 상자가 인스턴스화 된 후 옵션을 설정하는 방식으로 Paul의 대답이 제대로 작동하지 않는다는 것을 알았습니다. 작동하는 코드는 다음과 같습니다. 나는 폴의 예에 맞도록 그것을 조정하지 않았지만 일부 요소의 관점에서 고양이 수염의 차이는 다른 이름입니다. 당신은 그것을 해결할 수 있어야합니다. 클릭 이벤트의 버튼에 대한 대화 상자 옵션 설정에 수정이 있습니다.

$(document).ready(function() {

    $("#dialog").dialog({
        modal: true,
        bgiframe: true,
        width: 500,
        height: 200,
        autoOpen: false
    });


    $(".lb").click(function(e) {

        e.preventDefault();
        var theHREF = $(this).attr("href");

        $("#dialog").dialog('option', 'buttons', {
            "Confirm" : function() {
                window.location.href = theHREF;
            },
            "Cancel" : function() {
                $(this).dialog("close");
            }
        });

        $("#dialog").dialog("open");

    });

});

이 게시물이 원래 수정 사항을 게시하는 것이 더 좋을 것이라고 생각했던 올바른 게시물을 얻었으므로 다른 사람을 돕기를 바랍니다.

답변

jquery ui confirm 대화 상자에 대한 자체 함수를 만들었습니다. 여기 코드가 있습니다

function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
  $('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({
    draggable: false,
    modal: true,
    resizable: false,
    width: 'auto',
    title: dialogTitle || 'Confirm',
    minHeight: 75,
    buttons: {
      OK: function () {
        if (typeof (okFunc) == 'function') {
          setTimeout(okFunc, 50);
        }
        $(this).dialog('destroy');
      },
      Cancel: function () {
        if (typeof (cancelFunc) == 'function') {
          setTimeout(cancelFunc, 50);
        }
        $(this).dialog('destroy');
      }
    }
  });
}

이제 코드에서 이것을 사용하려면 다음을 작성하십시오.

myConfirm('Do you want to delete this record ?', function () {
    alert('You clicked OK');
  }, function () {
    alert('You clicked Cancel');
  },
  'Confirm Delete'
);

계속해.

답변

방금 시도한 간단하고 짧은 솔루션

  $('.confirm').click(function() {
    $(this).removeClass('confirm');
    $(this).text("Sure?");
    $(this).unbind();
    return false;
  });

그런 다음 링크에 class = “confirm”을 추가하면 작동합니다!

답변

이것이 나의 해결책이다. 나는 그것이 누군가를 돕기를 바란다. 그것은 복사 붙여 넣지 않고 즉석에서 작성되었으므로 실수를 저를 용서하십시오.

$("#btn").on("click", function(ev){
    ev.preventDefault();

    dialog.dialog("open");

    dialog.find(".btnConfirm").on("click", function(){
        // trigger click under different namespace so 
        // click handler will not be triggered but native
        // functionality is preserved
        $("#btn").trigger("click.confirmed");
    }
    dialog.find(".btnCancel").on("click", function(){
        dialog.dialog("close");
    }
});

개인적으로 나는이 솔루션을 선호합니다 🙂

편집 : 죄송합니다 .. 나는 그것을 더 자세히 설명해야합니다. 내 의견으로는 우아한 솔루션이기 때문에 나는 그것을 좋아한다. 사용자가 먼저 확인해야하는 버튼을 클릭하면 이벤트가 그대로 취소됩니다. 확인 버튼을 클릭하면 솔루션은 링크 클릭을 시뮬레이션하지 않고 확인 대화 상자가 없으면 트리거 된 원래 버튼에서 동일한 기본 jquery 이벤트 (클릭)를 트리거하는 것입니다. 확인 대화 상자가 다시 표시되지 않도록 다른 이벤트 네임 스페이스 (이 경우 ‘확인 됨’)가 유일한 차이점입니다. 그러면 Jquery 기본 메커니즘이 대신하여 예상대로 작업을 수행 할 수 있습니다. 또 다른 장점은 버튼과 하이퍼 링크에 사용될 수 있다는 것입니다. 내가 충분히 명확했으면 좋겠다

답변

나는 이것이 오래된 질문이라는 것을 알고 있지만 MVC4에서 HTML5 데이터 속성 을 사용하는 솔루션은 다음과 같습니다.

<div id="dialog" title="Confirmation Required" data-url="@Url.Action("UndoAllPendingChanges", "Home")">
  Are you sure about this?
</div>

JS 코드 :

$("#dialog").dialog({
    modal: true,
    autoOpen: false,
    buttons: {
        "Confirm": function () {
            window.location.href = $(this).data('url');
        },
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

$("#TheIdOfMyButton").click(function (e) {
    e.preventDefault();
    $("#dialog").dialog("open");
});

답변

이럴까요?

$("ul li a").click(function(e) {
  e.preventDefault();
  $('#confirmDialog').show();

  var delete_path = $(this).attr('href');

  $('#confirmDialog a.ok').unbind('click'); //  just in case the cancel link 
                                            //  is not the  only way you can
                                            //  close your dialog
  $('#confirmDialog a.ok').click(function(e) {
     e.preventDefault();
     window.location.href = delete_path;
  });

});

$('#confirmDialog a.cancel').click(function(e) {
   e.preventDefault();
   $('#confirmDialog').hide();
   $('#confirmDialog a.ok').unbind('click');
});