web-dev-qa-db-ja.com

Fancybox-ASP.NETボタンが機能しない

Firebugを使用して、Fancyboxウィンドウが作成されると、実際にはすべてのASP.NETコントロール（DIVタグに含まれている）を取得し、それらをFORMタグの外に配置することを決定しました。したがって、これがASP.NETボタンが何もしない理由だと思います-フォームの外に配置されます。

それで、完全に異なるモーダルダイアログを使用する以外に、これを防ぐ（またはASP.NETボタンを機能させる）方法について何か提案はありますか？

編集： OK、人々は提案された修正のいくつかが特定のバージョンで彼らのために働いていると報告しています。したがって、さまざまなFancyboxバージョンでこの問題を修正する方法については、必ずすべての回答を読むか、一番下までスクロールしてください。

c#asp.netfancybox
21
nikib3ro

これを変更する必要があります（jquery.fancybox-1.3.1.jsの719行目あたり）：

$('body').append(
    tmp         = $('<div id="fancybox-tmp"></div>'),
    loading     = $('<div id="fancybox-loading"><div></div></div>'),
    overlay     = $('<div id="fancybox-overlay"></div>'),
    wrap        = $('<div id="fancybox-wrap"></div>')
        );

に

$('form').append(
    tmp         = $('<div id="fancybox-tmp"></div>'),
    loading     = $('<div id="fancybox-loading"><div></div></div>'),
    overlay     = $('<div id="fancybox-overlay"></div>'),
    wrap        = $('<div id="fancybox-wrap"></div>')
);
33
derek

Fancyboxバージョン2を使用してこの問題に対する簡単な答えが必要な場合は、はるかに簡単な方法があります。あなたがしなければならないのは、コードに親： "form：first"を追加することです。

    $(document).ready(function () {
        $(".various").fancybox({
            parent: "form:first",
            fitToView: true,
            width: '300px',
            height: '100px',
            autoSize: false,
            closeClick: false,
            openEffect: 'none',
            closeEffect: 'none',
            modal: false
        });
    });

次に、これにより、bodyタグ内ではなく、formタグ内のdomにfancybox要素が追加されます。

19
Myke Black

Fancyboxバージョン2.1.4

これらの2行を変更します

2069号線周辺：

document.all && !document.querySelector ? $('html') : $('body');

に

document.all && !document.querySelector ? $('html') : $('form:first');


そして1960年頃：

this.overlay = $('<div class="fancybox-overlay"></div>').appendTo('body');

に

this.overlay = $('<div class="fancybox-overlay"></div>').prependTo('form');

AppendToを使用することもできますが、それはあなた次第です。私の場合、prependToが必要でした。

5
VRC

FancyBoxソースを変更せずに、これをFancyBoxスクリプトの後に置きます（ロードイベントの外で!!!）：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/#.#/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-#.#.#.pack.js"></script>
<script type="text/javascript">

    // Override $.fancybox.init to fix ASP.NET PostBack bug;
    var fancyboxInitOld = $.fancybox.init;
    $.fancybox.init = function () {
        fancyboxInitOld.apply(arguments);
        $("#fancybox-tmp, #fancybox-loading, #fancybox-overlay, #fancybox-wrap").appendTo("form:first");
    };

    // Your code ...

</script>
4
jerone

私は一週間この問題を理解しようとしてきました、私は本当に運がありませんでした

私はちょうどこの記事に出くわしました

http://usmanshabbir.blogspot.com/2010/10/click-server-button-problem-in-jquery.html

これは、jQueryUIダイアログボックスでポストバックを機能させる方法を説明しています。

ファンシーボックスを100％使用する必要がない場合、この方法は間違いなく試してみる価値があります。今日、私は多くの手間を省くことができました。

4
Andrew Cassidy

jquery.fancybox-1.3.4.js行1040

//$('body').append(
   $('form').append(
            tmp = $('<div id="fancybox-tmp"></div>'),
            loading = $('<div id="fancybox-loading"><div></div></div>'),
            overlay = $('<div id="fancybox-overlay"></div>'),
            wrap = $('<div id="fancybox-wrap"></div>')
        );

FFとIE9で動作します（私のasp：Buttonはポストバックします）、ソリューションに感謝します

2
Boris

上記の更新は私には機能しませんでした、ファンシーボックスはまだフォームの外に追加されました。次に、jquery.fancybox-1.3.2.jsのこれらの6行をコメントアウトしたところ、コードでまったく使用されていないことがわかりました。

Fancybox jsファイルで「body」を検索し、次の「form」に変更しました。

jquery.fancybox-1.3.2.js（ln 484）
jquery.fancybox-1.3.2.pack.js（ln 27、ln 41）

Fancyboxがフォームに追加され、サーバーコントロールが機能しています。

2
nd2010

Fancyboxバージョン：2.1.2

Jquery.fancybox.jsの1782行目

これを変える：

this.el     = document.all && !document.querySelector ? $('html') : $('body');

これに：

this.el     = document.all && !document.querySelector ? $('html') : $('form:first');
1
Andy

Fancybox 1.3.4を使用して、aspxページをfancyboxiframeのポップアップページとして表示します。ただし、ポップアップページのボタンはポストバックを引き起こしません。あなたが前に言ったように私は何も変えませんでした。むしろ私は次のことをしました。

 function check() 
 {
            var validated = Page_ClientValidate();
            if (validated) {
                __doPostBack('<%=bur.ClientID%>','');             
                parent.$.fancybox.close();                                                       
                return true;
            }
            else 
            {
                return false;
            }
 }



 <asp:Button ID="bur" runat="server" Text="ser"  
            OnClientClick="check()"   />


protected void bur_Click(object sender,Eventargs e)
{ //put breakpoint here.

}
1
shatharkhan

親の更新が目的に役立つソリューションである場合は、onClosedを更新できます。

$(".fancybox").fancybox({
  'onClosed': function() {
   parent.location.reload(true);
  } 
});
0
Israel Margulies

Fancybox jsライブラリファイルを変更せずに、私にとってうまくいくのは以下のとおりです。

$('.your-selector').fancybox({ 
        afterShow: function () {
            $('.fancybox-overlay').appendTo('form');
        }
});

Fancybox divをformタグ内に移動しましたが、サーバー側のボタンが魅力のように機能しています:)最高です。これがあなたにも役立つことを願っています。 。:)

0
Shailesh Mishra

Fancybox1.3.4は実際にポストバックを行います。

ただし、サーバー側のクリックイベントの前にあるOnClientClickで閉じられている場合、ポストバックは行われません。したがって、上記はこの問題の解決策です（javascript関数にdoPostBackを追加します）。

通常、Fancybox 1.3.4は、.Jsファイルを変更せずにポストバックを実行します。ただし、これを閉じるには、サーバー側のクリックイベントにこの行ScriptManager.RegisterClientScriptBlock(this, GetType(), "", "parent.$.fancybox.close();", true);を書き込む必要があります。その後、両方のサーバーサイドイベントが呼び出され、fancyboxも閉じます。

ただし、Fancybox 2.1.3（最新）は、OnClientClickで閉じられた後にポストバックイベントを実行します。

0
shatharkhan

コードやライブラリを変更する必要はありません...これを試してみてください。

$('.fancybox').fancybox({
     parent: "form:first", // jQuery selector
});
0
Kemal Can ÖZÇELİK

これが可能な限り最悪の解決策ですが、それは私にとってはうまくいきました。 faceyboxとcodebehindを同時に必要としていました。ボタンがクリックされたときにロードするようにファンシーボックスを設定します。次に、onClosedは値を別のC＃ページに渡し、ページの読み込み時にコードビハインドを実行します。

<script type="text/javascript">
    $(document).ready(function () {
    $(".fancy").fancybox({
        onClosed: function () {
            window.location.href = "worker_addcarrier.aspx?name=" + document.getElementById('<%=txt_carriername.ClientID%>').value +
                "&password=" + document.getElementById('<%=txt_password.ClientID%>').value +
                "&email=" + document.getElementById('<%=txt_email.ClientID%>').value;
        }
    });
});

そして、ここでは「class = "」だけです。

<asp:Button ID="Button1" href="logo.png" runat="server" class="fancy" Text="Create" Width="109px" BorderColor="#009933" OnClick="Button1_Click" />
0
Michael