[javascript] jQuery UI 대화 상자에 데이터 전달

Program / 글쓴이

나는 ASP.Net MVC사이트를 개발 중이며 다음 과 ActionLink같이 특정 행에 대한 예약을 취소 하기 위해 테이블에 데이터베이스 쿼리의 일부 예약을 나열 BookingId합니다.

내 예약

<table cellspacing="3">
    <thead>
        <tr style="font-weight: bold;">
            <td>Date</td>
            <td>Time</td>
            <td>Seats</td>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tr>
        <td style="width: 120px;">2008-12-27</td>
        <td style="width: 120px;">13:00 - 14:00</td>
        <td style="width: 100px;">2</td>
        <td style="width: 60px;"><a href="/Booking.aspx/Cancel/15">cancel</a></td>
        <td style="width: 80px;"><a href="/Booking.aspx/Change/15">change</a></td>
    </tr>
    <tr>
        <td style="width: 120px;">2008-12-27</td>
        <td style="width: 120px;">15:00 - 16:00</td>
        <td style="width: 100px;">3</td>
        <td style="width: 60px;"><a href="/Booking.aspx/Cancel/10">cancel</a></td>
        <td style="width: 80px;"><a href="/Booking.aspx/Change/10">change</a></td>
    </tr>
</table>

좋은 점은을 사용 jQuery Dialog하여 사용자가 예약을 취소 할 것인지 묻는 메시지를 팝업 할 수 있다면 좋습니다 . 나는 이것을 작동 시키려고 노력했지만 매개 변수를 받아들이는 jQuery 함수를 만드는 방법에 계속 붙어서

<a href="https://stackoverflow.com/Booking.aspx/Cancel/10">cancel</a>

와

<a href="#" onclick="ShowDialog(10)">cancel</a>.

ShowDialog함수는 대화 상자를 열고 사용자가 클릭 예 다음은 HREF를 게시 할 예정입니다 경우 있도록 또한 대화에 있었던 파라미터 (10)를 통과 할 것입니다 :/Booking.aspx/Change/10

다음과 같은 스크립트로 jQuery 대화 상자를 만들었습니다.

$(function() {
    $("#dialog").dialog({
        autoOpen: false,
        buttons: {
            "Yes": function() {
                alert("a Post to :/Booking.aspx/Cancel/10 would be so nice here instead of the alert");},
            "No": function() {$(this).dialog("close");}
        },
        modal: true,
        overlay: {
            opacity: 0.5,
            background: "black"
        }
    });
});

그리고 대화 자체 :

   <div id="dialog" title="Cancel booking">Are you sure you want to cancel your booking?</div>

그래서 마지막으로 내 질문에 : 어떻게 이것을 달성 할 수 있습니까? 아니면 더 나은 방법이 있습니까?

답변

다음과 같이 할 수 있습니다.

  • <a>수업으로 표시하고 “취소”라고 말하세요.

  • class = “cancel”로 모든 요소에 대해 작업하여 대화 상자를 설정하십시오.

    $('a.cancel').click(function() {
  var a = this;
  $('#myDialog').dialog({
    buttons: {
      "Yes": function() {
         window.location = a.href;
      }
    }
  });
  return false;
});

(다른 옵션 포함)

여기서 핵심 사항은 다음과 같습니다.

  • 가능한 한 눈에 띄지 않게 만드십시오.
  • URL 만 있으면 이미 href에 있습니다.

그러나 취소 작업에는 부작용이있어 GET 의미 체계를 준수하지 않기 때문에 GET 대신 POST로 만드는 것이 좋습니다 .

답변

jQuery는 데이터를 저장하는 방법을 제공하므로 더미 속성을 사용하거나 문제에 대한 해결 방법을 찾을 필요가 없습니다.

클릭 이벤트 바인딩 :

$('a[href*=/Booking.aspx/Change]').bind('click', function(e) {
    e.preventDefault();
    $("#dialog-confirm")
        .data('link', this)  // The important part .data() method
        .dialog('open');
});

그리고 대화 :

$("#dialog-confirm").dialog({
    autoOpen: false,
    resizable: false,
    height:200,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        },
        'Delete': function() {
            $(this).dialog('close');
            var path = $(this).data('link').href; // Get the stored result
            $(location).attr('href', path);
        }
    }
});

답변

jQuery로 수행하는 작업의 관점에서, 내 이해는 당신이 가지고있는 것처럼 함수를 연결할 수 있고 내부 함수는 외부 변수의 변수에 액세스 할 수 있다는 것입니다. 따라서 ShowDialog (x) 함수에는 이러한 다른 함수가 포함되어 있으므로 x 변수를 다시 사용할 수 있으며 외부 함수의 매개 변수에 대한 참조로 간주됩니다.

mausch의 의견에 동의합니다. 이러한 작업에 POST를 사용하여 <form>각 요소 주위 에 태그 를 추가 하지만 취소 이벤트를 트리거하는 자동화 된 스크립트 또는 도구의 가능성을 크게 줄여야합니다. 변경 작업은 그대로 유지 될 수 있습니다 (아마도 편집 양식을 열기 만 함).

답변

나는 이제 당신의 제안을 시도했고 그것이 다소 효과가 있음을 발견했습니다.

  1. 대화 div는 항상 일반 텍스트로 작성됩니다.
  2. $ .post 버전에서는 컨트롤러가 호출되고 실제로 예약을 취소한다는 점에서 실제로 작동하지만 대화 상자는 열린 상태로 유지되고 페이지는 새로 고쳐지지 않습니다. get 버전 window.location = h.ref가 훌륭하게 작동합니다.

아래에서 내 “새”스크립트를 선택하십시오.

$('a.cancel').click(function() {
        var a = this;
        $("#dialog").dialog({
            autoOpen: false,
            buttons: {
                "Ja": function() {
                    $.post(a.href);
                },
                "Nej": function() { $(this).dialog("close"); }
            },
            modal: true,
            overlay: {
                opacity: 0.5,

            background: "black"
        }
    });
    $("#dialog").dialog('open');
    return false;
});

});

단서가 있습니까?

오, 내 작업 링크는 이제 다음과 같습니다.

<%= Html.ActionLink("Cancel", "Cancel", new { id = v.BookingId }, new  { @class = "cancel" })%>

답변

코드를 보면 창을 닫고 페이지를 업데이트하는 기능을 추가해야합니다. “예”함수에서 다음과 같이 작성해야합니다.

        buttons: {
            "Ja": function() {
                $.post(a.href);
                $(a). // code to remove the table row
                $("#dialog").dialog("close");
            },
            "Nej": function() { $(this).dialog("close"); }
        },

테이블 행을 제거하는 코드는 작성하는 것이 재미 있지 않으므로 핵심 세부 사항을 처리 할 수 ​​있지만 기본적으로 게시 한 후 대화 상자에 무엇을해야하는지 알려야합니다. 스마트 한 대화 일 수 있지만 방향이 필요합니다.

답변

몇 시간의 try / catch 후 마침내이 작업 예제와 함께 왔으며 새 행이있는 AJAX POST 작업이 TABLE에 즉시 추가됩니다 (실제 문제였습니다).

그쪽으로 마술이 링크와 함께 제공되었습니다.

<a href="#" onclick="removecompany(this);return false;" id="remove_13">remove</a>
<a href="#" onclick="removecompany(this);return false;" id="remove_14">remove</a>
<a href="#" onclick="removecompany(this);return false;" id="remove_15">remove</a>

이것은 AJAX POST 및 Jquery Dialog를 사용한 최종 작업입니다. 

  <script type= "text/javascript">/*<![CDATA[*/
    var $k = jQuery.noConflict();  //this is for NO-CONFLICT with scriptaculous
     function removecompany(link){
        companyid = link.id.replace('remove_', '');
    $k("#removedialog").dialog({
                bgiframe: true,
                resizable: false,
                height:140,
                autoOpen:false,
                modal: true,
                overlay: {
                    backgroundColor: '#000',
                    opacity: 0.5
                },
                buttons: {
                    'Are you sure ?': function() {
                        $k(this).dialog('close');
                        alert(companyid);
                        $k.ajax({
                              type: "post",
                              url: "../ra/removecompany.php",
                              dataType: "json",
                              data: {
                                    'companyid' : companyid
                                    },
                              success: function(data) {
                                    //alert(data);
                                    if(data.success)
                                    {
                                        //alert('success'); 
                                        $k('#companynew'+companyid).remove();
                                    }
                          }
                        }); // End ajax method
                    },
                    Cancel: function() {
                        $k(this).dialog('close');
                    }
                }
            });
            $k("#removedialog").dialog('open');
            //return false;
     }
    /*]]>*/</script>
    <div id="removedialog" title="Remove a Company?">
        <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
        This company will be permanently deleted and cannot be recovered. Are you sure?</p>
    </div>

답변

이것은 나를 위해 일합니다.

<a href="#" onclick="sposta(100)">SPOSTA</a>

function sposta(id) {
        $("#sposta").data("id",id).dialog({
            autoOpen: true,
            modal: true,
            buttons: { "Sposta": function () { alert($(this).data('id')); } }
        });
    }

대화 상자 경고 표시에서 “Sposta”를 클릭하면 100