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

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

저는 발전하고 있습니다.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="/Booking.aspx/Cancel/10">cancel</a>

와 함께

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

ShowDialog함수는 대화상자를 열고 매개변수 10을 대화상자에 전달하여 사용자가 yes를 클릭하면 href를 게시합니다./Booking.aspx/Change/10

다음과 같은 스크립트로 jQuery Dialog를 만들었습니다.

$(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>

마지막으로 제 질문에 대해 말씀드리겠습니다.어떻게 하면 이것을 해낼 수 있을까요?아니면 더 좋은 방법이 있을까요?

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);
        }
    }
});

이렇게 할 수 있습니다.

• 표시를 보다<a>수업과 함께 "cancel"라고 말합니다.

• 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를 사용하는 경우, 제가 이해하는 바로는 함수를 기존과 같이 연결할 수 있고 내부 함수는 외부 변수에서 변수에 접근할 수 있습니다.ShowDialog(x) 함수에 이러한 다른 함수가 포함되어 있습니까? x 변수를 다시 사용할 수 있으며 외부 함수의 매개 변수에 대한 참조로 사용됩니다.

에 합니다 mausch 하는 것을 로 고려해야 . 당신은 정말로 이러한 행동에 POST를 사용하는 것을 고려해야 합니다. 그것은 추가될 것입니다.<form>각 요소에 태그를 지정하지만 자동화된 스크립트나 도구가 Cancel 이벤트를 트리거할 가능성은 훨씬 낮습니다.Change(변경) 작업은 편집 양식만 열기 때문에 그대로 유지될 수 있습니다.

당신의 제안을 시도해보았는데, 그게 좀 효과가 있다는 걸 알게 됐어요

1. 대화 상자 분할은 항상 일반 텍스트로 작성됩니다.
2. $.post 버전에서는 실제로 컨트롤러가 호출되어 예약을 취소하는 방식으로 작동하지만 대화 상자는 열려 있고 페이지가 새로 고쳐지지 않습니다.get version 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;
});

});

단서가 있습니까?

아 그리고 이제 내 Action 링크는 다음과 같습니다.

<%= 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"); }
        },

테이블 행을 제거하는 코드는 쓰기에 재미가 없기 때문에 자세한 내용은 알려드리겠지만 기본적으로 게시한 후 대화상자에 무엇을 해야 하는지 알려주셔야 합니다.현명한 대화일 수도 있지만 어떤 방향성이 필요합니다.

몇 시간 동안의 시도 끝에 마침내 이 작업 예시를 만들었습니다. 새로운 행을 사용하여 AJAX POST에서 작동하는 작업은 테이블에 즉시 추가됩니다(제 실제 문제였습니다).

그 마법은 이와 연관이 있습니다.

<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')); } }
        });
    }

대화상자 알림화면 100에서 "스포스타"를 클릭하면

좋아, 디브 태그의 첫 번째 문제는 충분히 쉬웠어요.방금 추가했습니다.style="display:none;"대화상자를 보여주기 전에 대화상자 스크립트에 이 내용을 추가했습니다.

$("#dialog").css("display", "inherit");

하지만 포스트 버전의 경우 아직 운이 없습니다.

대화 상자를 완전히 제어하려면 기본 단추 옵션을 사용하지 않고 #대화 상자에 단추를 직접 추가하는 것이 좋습니다.필요할 때 Click. call atttr("data")와 같은 링크의 더미 속성에 데이터를 넣을 수도 있습니다.

제가 사용한 Boris Guery에서 영감을 얻은 솔루션은 다음과 같습니다.링크:

<a href="#" class = "remove {id:15} " id = "mylink1" >This is my clickable link</a>

액션을 여기에 바인딩합니다.

$('.remove').live({
        click:function(){
            var data = $('#'+this.id).metadata();
            var id = data.id;
            var name = data.name;
            $('#dialog-delete')
                .data('id', id)
                .dialog('open');    
            return false;
        }
    });

그런 다음 id 필드에 액세스합니다(이 경우 값은 15:

$('#dialog-delete').dialog({
    autoOpen: false,
    position:'top',
    width: 345,
    resizable: false,
    draggable: false,
    modal: true,
    buttons: {            
        Cancel: function() {

            $(this).dialog('close');
        },
        'Confirm delete': function() {
            var id = $(this).data('id');
            $.ajax({
                url:"http://example.com/system_admin/admin/delete/"+id,
                type:'POST',
                dataType: "json",
                data:{is_ajax:1},
                success:function(msg){

                }
            })
        }
    }
});

이게 도움이 되었으면 좋겠습니다.

$("#dialog-yesno").dialog({
    autoOpen: false,
    resizable: false,
    closeOnEscape: false,
    height:180,
    width:350,
    modal: true,
    show: "blind",
    open: function() {
        $(document).unbind('keydown.dialog-overlay');
        },
    buttons: {
        "Delete": function() {
            $(this).dialog("close");
            var dir = $(this).data('link').href;
            var arr=dir.split("-");
            delete(arr[1]);
        },
    "Cancel": function() {
        $(this).dialog("close");
        }
    }
});



<a href="product-002371" onclick="$( '#dialog-yesno' ).data('link', this).dialog( 'open' ); return false;">Delete</a>

언급URL : https://stackoverflow.com/questions/394491/passing-data-to-a-jquery-ui-dialog