ASP를 사용하는 jQuery UI 대화상자.NET 버튼 포스트백

ASP를 사용하는 jQuery UI 대화상자.NET 버튼 포스트백

ASP에서 제대로 작동하는 jQuery UI 대화 상자가 있습니다.NET 페이지:

jQuery(function() {
    jQuery("#dialog").dialog({
        draggable: true,
        resizable: true,
        show: 'Transfer',
        hide: 'Transfer',
        width: 320,
        autoOpen: false,
        minHeight: 10,
        minwidth: 10
    });
});

jQuery(document).ready(function() {
    jQuery("#button_id").click(function(e) {
        jQuery('#dialog').dialog('option', 'position', [e.pageX + 10, e.pageY + 10]);
        jQuery('#dialog').dialog('open');
    });
});

나의 div:

<div id="dialog" style="text-align: left;display: none;">
    <asp:Button ID="btnButton" runat="server" Text="Button" onclick="btnButton_Click" />
</div>

그러나 btnButton_Click은 호출되지 않습니다.어떻게 하면 해결할 수 있을까요?

상세 정보:div를 폼으로 이동하기 위해 이 코드를 추가했습니다.

jQuery("#dialog").parent().appendTo(jQuery("form:first"));

하지만 아직 성공하지 못했는데...

솔루션에 가까워지고 있습니다.잘못된 오브젝트를 얻을 뿐입니다.다음과 같이 해야 합니다.

jQuery(function() {
    var dlg = jQuery("#dialog").dialog({
                         draggable: true,
                         resizable: true,
                         show: 'Transfer',
                         hide: 'Transfer',
                         width: 320,
                         autoOpen: false,
                         minHeight: 10,
                         minwidth: 10
                     });
    dlg.parent().appendTo(jQuery("form:first"));
});

$('#divname').parent().appendTo($("form:first"));

이 코드를 사용하면 모든 브라우저, Internet Explorer 7, Firefox 3, Google Chrome에서 문제가 해결되었습니다.난 jQuery가 좋아지기 시작했어...멋진 프레임워크입니다.

제가 찾던 부분 렌더링도 테스트했습니다.좋아!

<script type="text/javascript">
    function openModalDiv(divname) {
        $('#' + divname).dialog({ autoOpen: false, bgiframe: true, modal: true });
        $('#' + divname).dialog('open');
        $('#' + divname).parent().appendTo($("form:first"));
    }

    function closeModalDiv(divname) {
        $('#' + divname).dialog('close');
    }
</script>
...
...
<input id="Button1" type="button" value="Open 1" onclick="javascript:openModalDiv('Div1');" />
...
...
<div id="Div1" title="Basic dialog" >
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <ContentTemplate>
          postback test<br />
          <asp:Button ID="but_OK" runat="server" Text="Send request" /><br />
          <asp:TextBox ID="tb_send" runat="server"></asp:TextBox><br />
          <asp:Label ID="lbl_result" runat="server" Text="prova" BackColor="#ff0000></asp:Label>
        </ContentTemplate>
    <asp:UpdatePanel>
    <input id="Button2" type="button" value="cancel" onclick="javascript:closeModalDiv('Div1');" />
</div>

FWIW, 폼:첫 번째 기법이 통하지 않았습니다.

그러나 이 블로그 기사의 기법은 다음과 같습니다.

http://blog.roonga.com.au/2009/07/using-jquery-ui-dialog-with-aspnet-and.html

구체적으로는, 이것을 다이얼로그 선언에 추가합니다.

  open: function(type,data) {
    $(this).parent().appendTo("form");
  }

jQuery UI v1.10에는 추가 설정이 있습니다.ASP에 대처하기 위해 추가된 appendTo 설정이 있습니다.폼에 요소를 다시 추가하기 위해 사용하는 NET 해결 방법.

시험:

$("#dialog").dialog({
     autoOpen: false,
     height: 280,
     width: 440,
     modal: true,
     **appendTo**:"form"
});

위의 켄의 대답은 나에게 효과가 있었다.허용되는 답변의 문제는 페이지에 하나의 모달만 있는 경우에만 작동한다는 것입니다.여러 개의 모달(modal)이 있는 경우 대화 상자를 초기화하는 동안 "open" 매개 변수에서 인라인으로 수행해야 합니다.

open: function(type,data) { $(this).parent().appendTo("form"); }

처음 수락된 답변에 따라 여러 개의 모달로 실행하면 페이지의 마지막 모달만 정상적으로 재생됩니다.모든 모달은 정상적으로 재생되지 않습니다.

주로 jQuery가 DOM을 사용하여 대화 상자를 양식 태그 밖으로 이동하기 때문입니다.폼태그 안쪽으로 되돌리면 정상적으로 동작합니다.Firefox에서 요소를 검사하면 이를 확인할 수 있습니다.

프로젝트의 모든 대화 상자에 대해 이 문제를 해결할 필요가 없었기 때문에 간단한 jQuery 플러그인을 만들었습니다.이 플러그인은 새 대화 상자를 열고 ASP 내에 배치하기 위한 것입니다.NET 폼:

(function($) {
    /**
     * This is a simple jQuery plugin that works with the jQuery UI
     * dialog. This plugin makes the jQuery UI dialog append to the
     * first form on the page (i.e. the asp.net form) so that
     * forms in the dialog will post back to the server.
     *
     * This plugin is merely used to open dialogs. Use the normal
     * $.fn.dialog() function to close dialogs programatically.
     */
    $.fn.aspdialog = function() {
        if (typeof $.fn.dialog !== "function")
            return;

        var dlg = {};

        if ( (arguments.length == 0)
                || (arguments[0] instanceof String) ) {
            // If we just want to open it without any options
            // we do it this way.
            dlg = this.dialog({ "autoOpen": false });
            dlg.parent().appendTo('form:first');
            dlg.dialog('open');
        }
        else {
            var options = arguments[0];
            options.autoOpen = false;
            options.bgiframe = true;

            dlg = this.dialog(options);
            dlg.parent().appendTo('form:first');
            dlg.dialog('open');
        }
    };
})(jQuery);</code></pre>

따라서 플러그인을 사용하려면 먼저 jQuery UI를 로드한 다음 플러그인을 로드합니다.그런 다음 다음과 같은 작업을 수행할 수 있습니다.

$('#myDialog1').aspdialog(); // Simple
$('#myDialog2').aspdialog('open'); // The same thing
$('#myDialog3').aspdialog({title: "My Dialog", width: 320, height: 240}); // With options!

이 플러그인은, 다이얼로그를 호출했을 때에 표시할 준비가 끝난 것을 전제로 되어 있습니다.

오래된 질문인 것은 알지만, 같은 문제를 안고 계신 분들을 위해 보다 새롭고 간단한 해결책이 있습니다.jQuery UI 1.10.0에 "appendTo" 옵션이 도입되었습니다.

http://api.jqueryui.com/dialog/ # option - append To

$("#dialog").dialog({
    appendTo: "form"
    ....
});

훌륭하다!이것으로 ASP의 문제가 해결되었습니다.jQuery 모달 내에서 버튼 이벤트가 발생하지 않습니다.jQuery UI 모드를 다음과 같이 사용하면 버튼 이벤트가 발생할 수 있습니다.

// Dialog Link
$('#dialog_link').click(function () {
    $('#dialog').dialog('open');
    $('#dialog').parent().appendTo($("form:first"))
    return false;
});

다음 행이 이 작업을 수행하기 위한 핵심입니다!

$('#dialog').parent().appendTo($("form:first"))

대화 상자를 만든 후 다음 행을 추가했습니다.

$(".ui-dialog").prependTo("form");

이것이 나에게 가장 명확한 해결책이었다.

var dlg2 = $('#dialog2').dialog({
        position: "center",
        autoOpen: false,
        width: 600,
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });

dlg2.parent().appendTo('form:first');
$('#dialog_link2').click(function(){
    dlg2.dialog('open');

의 모든 dlg2를 데이터베이스에 삽입할 수 있습니다. 꼭 바꿔주세요.dialog변수와 일치합니다.

ASP.은 NET을 사용합니다.UseSubmitBehavior="false"ASP の asp asp asp asp asp asp 。NET 튼 :

<asp:Button ID="btnButton" runat="server"  Text="Button" onclick="btnButton_Click" UseSubmitBehavior="false" />       

레퍼런스:단추UseSubmitBehavior 속성

가장 많은 표를 얻은 Robert McLean의 해결책은 99% 정확합니다.단, 다른 사용자가 필요로 하는 유일한 추가는 이 jQuery 대화 상자를 열어야 할 때마다 이를 부모에 추가하는 것을 잊지 마세요.다음과 같습니다.

var dlg = $('#questionPopup').dialog( 'open'); dlg.parent().appendTo($("form:first"));

modal:true 옵션을 사용하여 이 작업을 수행할 수 있습니다.

open: function (type, data) { 
    $('.ui-widget-overlay').appendTo("form"); $(this).parent().appendTo("form"); 
  },

$('#dialog').parent().appendTo($("form:first"))IE 9번입니다.그러나 IE 8에서는 대화 상자가 직접 나타나거나 사라집니다.일부 경고를 보내지 않으면 이 대화 상자가 나타나지 않습니다.어느 날 아침 두 버전에서 모두 사용할 수 있는 솔루션을 찾았는데, 버전 8과 버전 9에서 모두 사용할 수 있는 유일한 솔루션은 다음과 같습니다.

$(".ui-dialog").prependTo("form");

이것이 같은 문제로 어려움을 겪고 있는 다른 사람들에게 도움이 되기를 바랍니다.

대화 상자를 올바른 방향으로 이동하지만 대화 상자를 여는 버튼에서만 이동해야 합니다.다음은 jQuery UI 샘플의 몇 가지 추가 코드입니다.

$('#create-user').click(function() {
    $("#dialog").parent().appendTo($("form:first"))
    $('#dialog').dialog('open');
})

를를 add add add add add 를 추가하다asp:button이치노

주의: "create user" 버튼을 클릭한 후 포스트백을 방지하기 위해 <버튼>을 <input type=버튼>으로 변경해야 합니다.

정확한 해결책은 다음과 같습니다.

$("#dialogDiv").dialog({ other options...,
    open: function (type, data) {
        $(this).parent().appendTo("form");
    }
});

언급URL : https://stackoverflow.com/questions/757232/jquery-ui-dialog-with-asp-net-button-postback