4

初心者なので初歩的な質問です。

有名なfancyBoxプラグインを使用します。頭の中で次のように呼び出されます。

$(document).ready(function() {
    $(".fancybox").fancybox();
});

通常、スクリプトはクラス名を追加することによってアタッチされます。

<a class="fancybox fancybox.iframe">...</a>

ユーザーがフォームを送信した後に fancyBox ポップアップを実行したいので、現在の問題が発生します。

<form action="http://maps.google.com/maps" method="get">
    ...(google API stuff etc, etc)...
    <input type="submit" value="...">

この時点までの私の調査により、おそらくonsubmitまたはを使用する必要があると結論付けonclickました

<input type="submit">

しかし、私の実験は無駄な努力であることが証明されました。

どんな助けでも大歓迎です。

========================================

更新: (2013 年 1 月 7 日)

現時点で頭の少し上にある主題に迷い込んでしまったようですので、質問を取り下げます。将来誰かがここで何か役に立つものを見つけるかもしれない場合に備えて、私は質問を削除しないことを選択します. お世話になりました。

理由: Google ルートでは での表示が許可されていないよう<iframe>です。それを考慮すると、 の回避策を構成するのはfancyBox非常に複雑です。私は fancyBox を放棄し、単純な古い Javascript を使用しました:

ここに示すように

4

2 に答える 2

1

$.ajax を使用してフォームを投稿すると、最大限の制御が可能になります。その後、クライアント側から成功条件とエラー条件を制御できます。

これを行うには、submit イベントをキャッチする必要があります。 

$('#form').submit(function() {
 ajaxUpdate();
 return false;   
});

次に、関数を作成します。 

function ajaxUpdate(){
 var formSerial = $('#form').serialize();
 $.ajax({
        url: '<url to post to>',
        dataType: "text",
        type: "POST",
        data: formSerial,
        success: function(text) {
          $(".fancybox").fancybox();
        },
        error: function(text) {
          alert('error in posting');
        }
});
}

その後、成功ブロックとエラー ブロックで好きなことを行うことができます。

ウィンドウをロードするには、関数に次を追加できます。

if(confirm("Do you want to open the directions?")){
      $.fancybox({
                'titleShow': false,
                'width': 370,
                'height': 300,
                'href': <URL>,
                'type': 'iframe'
              });
}
于 2013-01-02T05:40:07.170 に答える
0

jquery submit ボタンを使用すると、次のことが可能になります。

$('#target').submit(function() {
$(".fancybox").fancybox();
  return false;
});

ファンシーボックスの「OK」ボタンをクリックした後、フォームを送信します..

このアイデアが役立つことを願っています。

于 2013-01-02T05:26:57.783 に答える