복붙노트

[JQUERY] ASP.NET 버튼 게시 jQuery를 UI와 대화

JQUERY

ASP.NET 버튼 게시 jQuery를 UI와 대화

해결법


  1. 1.당신은 잘못된 개체를 받고, 해결책 가까이에 있습니다. 그것은 다음과 같이해야합니다 :

    당신은 잘못된 개체를 받고, 해결책 가까이에 있습니다. 그것은 다음과 같이해야합니다 :

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

  2. 2.

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

    이 코드를 사용하여, 인터넷 익스플로러 7, 파이어 폭스 3, 구글 크롬을 내 문제를 해결하고 모든 브라우저에서 일했다. 나는이 멋진 프레임 워크의 ... 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>
    

  3. 3.FWIW 양식 : 첫 번째 기술은 나를 위해 작동하지 않았다.

    FWIW 양식 : 첫 번째 기술은 나를 위해 작동하지 않았다.

    그러나, 블로그 문서의 기술했다 :

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

    특히, 대화 선언이 추가 :

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

  4. 4.jQuery를 UI v1.10에의 추가 설정이 있다는 것을 알고 있어야합니다. 은 ASP.NET이 폼에 다시 추가 요소에 사용하고 해결 해결하기 위해 추가 된 appendTo 설정은있다.

    jQuery를 UI v1.10에의 추가 설정이 있다는 것을 알고 있어야합니다. 은 ASP.NET이 폼에 다시 추가 요소에 사용하고 해결 해결하기 위해 추가 된 appendTo 설정은있다.

    시험:

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

  5. 5.켄의 대답은 위에서 나를 위해 트릭을했다. 허용 대답의 문제는 당신이 페이지에 하나의 모달이있는 경우에만 작동합니다. 여러 조동사가있는 경우없는 사실 후, 대화 상자를 초기화하는 동안, 당신은 "열기"PARAM에서 인라인을 수행해야합니다.

    켄의 대답은 위에서 나를 위해 트릭을했다. 허용 대답의 문제는 당신이 페이지에 하나의 모달이있는 경우에만 작동합니다. 여러 조동사가있는 경우없는 사실 후, 대화 상자를 초기화하는 동안, 당신은 "열기"PARAM에서 인라인을 수행해야합니다.

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

    첫 번째 허용 대답은 여러 조동사 당신을 알려줍니다 무엇을 할 경우, 당신은 제대로, 모든 이들의 발사 포스트 백 작업 페이지에서 마지막으로 모달를 얻을 수 있습니다.


  6. 6.JQuery와 DOM을 사용하여 양식 태그의 대화 외부 이동하기 때문에 주로 그것입니다. 양식 태그 내부에 그것을 다시 이동하고 그것을 잘 작동합니다. 당신은 파이어 폭스의 요소를 검사하여이를 확인할 수 있습니다.

    JQuery와 DOM을 사용하여 양식 태그의 대화 외부 이동하기 때문에 주로 그것입니다. 양식 태그 내부에 그것을 다시 이동하고 그것을 잘 작동합니다. 당신은 파이어 폭스의 요소를 검사하여이를 확인할 수 있습니다.


  7. 7.나는 간단한 jQuery 플러그인을 작성, 그래서 나는 내 프로젝트의 모든 대화에 대해이 문제를 해결하려면하고 싶지 않았다. 이 플러그인은 단순히 새로운 대화 상자를 열고 ASP.NET 양식에서 그들을 배치입니다 :

    나는 간단한 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!
    

    명확하게하기 위해이 플러그인은 당신이 그것을 호출 할 때 대화 상자를 표시 할 준비가 가정합니다.


  8. 8.에 "appendTo"옵션이 jQuery를 UI 1.10.0에 도입되었습니다 나는이 오래된 질문이지만, 새롭고 간단한 해결책이 같은 문제를 가지고 누구나 알고

    에 "appendTo"옵션이 jQuery를 UI 1.10.0에 도입되었습니다 나는이 오래된 질문이지만, 새롭고 간단한 해결책이 같은 문제를 가지고 누구나 알고

    http://api.jqueryui.com/dialog/#option-appendTo

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

  9. 9.환상적인! 이것은 ASP 내 문제를 해결 : 버튼 이벤트가 jQuery를 모달 안에 발사하지. 노트는 다음과 jQuery를 UI 모달을 사용하여 화재에 버튼 이벤트를 허용하십시오 :

    환상적인! 이것은 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"))
    

  10. 10.당신이 대화 상자를 만든 후 난 그냥 다음 줄을 추가 :

    당신이 대화 상자를 만든 후 난 그냥 다음 줄을 추가 :

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

  11. 11.이것은 나를 위해 깨끗한 솔루션이었습니다

    이것은 나를 위해 깨끗한 솔루션이었습니다

    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 내부의 모든 내용이 데이터베이스에 삽입 할 수있을 것입니다. 당신에 맞게 대화 변수를 변경하는 것을 잊지 마십시오.


  12. 12.ASP.NET은 당신의 ASP.NET 버튼에 = "false"를 UseSubmitBehavior를 사용하여 :

    ASP.NET은 당신의 ASP.NET 버튼에 = "false"를 UseSubmitBehavior를 사용하여 :

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

    참조 : Button.UseSubmitBehavior 재산권


  13. 13.투표의 가장 많은 로버트 맥클레인에서이 솔루션은 99 % 맞습니다. 그러나 유일한 또한 누군가가 내가 그랬던 것처럼 당신이 부모에 추가하는 것을 잊지 마세요,이 jQuery를 대화 상자를 열어야 할 때마다,있다,해야 할 수도 있습니다. 아래처럼 :

    투표의 가장 많은 로버트 맥클레인에서이 솔루션은 99 % 맞습니다. 그러나 유일한 또한 누군가가 내가 그랬던 것처럼 당신이 부모에 추가하는 것을 잊지 마세요,이 jQuery를 대화 상자를 열어야 할 때마다,있다,해야 할 수도 있습니다. 아래처럼 :

    . VAR DLG = $ ( '#의 questionPopup은'() '개방') 대화; . dlg.parent () appendTo ($ ( "양식 : 첫번째"));


  14. 14.사실 옵션 : 모달을 사용하는 동안이 작업을하기 위해 줄을 사용합니다.

    사실 옵션 : 모달을 사용하는 동안이 작업을하기 위해 줄을 사용합니다.

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

  15. 15... $ ( '# 대화') 부모 () appendTo ($ ( "양식 : 첫 번째는")) 솔루션은 IE 9에서 잘 작동하지만 IE 8이 대화 상자가 나타납니다 직접 사라질 수 있습니다. 이 대화 상자가 표시되지 않을 것으로 보인다 있도록 몇 가지 경고를 배치하지 않으면이를 볼 수 없습니다. 나는 두 버전 모두 버전 8 및 9 작품이다 유일한 솔루션에서 작동하는 솔루션을 찾는 일 아침 지출 :

    .. $ ( '# 대화') 부모 () appendTo ($ ( "양식 : 첫 번째는")) 솔루션은 IE 9에서 잘 작동하지만 IE 8이 대화 상자가 나타납니다 직접 사라질 수 있습니다. 이 대화 상자가 표시되지 않을 것으로 보인다 있도록 몇 가지 경고를 배치하지 않으면이를 볼 수 없습니다. 나는 두 버전 모두 버전 8 및 9 작품이다 유일한 솔루션에서 작동하는 솔루션을 찾는 일 아침 지출 :

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

    이 같은 문제로 어려움을 겪고 다른 사람을 도움이되기를 바랍니다


  16. 16.대화 올바른 방법으로 이동하지만, 당신은 단지 대화 상자를 여는 버튼에 수행해야합니다. 여기에 jQuery를 UI 샘플에서 몇 가지 추가 코드는 다음과 같습니다

    대화 올바른 방법으로 이동하지만, 당신은 단지 대화 상자를 여는 버튼에 수행해야합니다. 여기에 jQuery를 UI 샘플에서 몇 가지 추가 코드는 다음과 같습니다

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

    대화 상자 내에서 버튼을, 그리고 그것을 잘 실행됩니다 : 당신의 ASP를 추가합니다.

    참고 : 당신이 "사용자를 생성"버튼을 클릭 한 후 다시 게시를 방지하기 위해 <버튼>에 <입력 유형 = 버튼>을 변경해야합니다.


  17. 17.정확한 솔루션입니다;

    정확한 솔루션입니다;

    $("#dialogDiv").dialog({ other options...,
        open: function (type, data) {
            $(this).parent().appendTo("form");
        }
    });
    
  18. from https://stackoverflow.com/questions/757232/jquery-ui-dialog-with-asp-net-button-postback by cc-by-sa and MIT license