JQuery SimpleModalはonShowにバインドできません

Question

なぜ私はモーダルボックスからonShowにイベントをバインドできないのかを判断するための助けを求めます。私は警告メッセージを入力するだけでonShowがトリガーされているのがわかります。しかし、私が本当にやりたいことは、Resetイベントを捕捉し、それを使ってajaxコールをサービスに戻してユーザーに電子メールを送信することです。

私はモーダルを作成するには、以下を使用し

：

<li class="actions-text"><a class="modal-s" href="modal/modal-password.jsp">Forgot Password?</a></li> 

これは、次のJavaスクリプトをトリガします：

$('.modal-s').click(function (e) { 
     $.modal('<iframe src="' + this.href + '" height="230" width="480" scrolling="no">', { 
      overlayClose:true, 
      onOpen: function (dialog) { 
       dialog.overlay.fadeIn('slow', function() { 
        dialog.container.slideDown('slow', function() { 
         dialog.data.fadeIn('slow'); 
        }); 
       }); 
      }, 
      onClose: function (dialog){ 
       dialog.data.fadeOut('slow', function() { 
        dialog.container.slideUp('slow', function() { 
         dialog.overlay.fadeOut('slow', function() { 
          $.modal.close(); 
         }); 
        }); 
       }); 
      }, 
      onShow: function (dialog) { 
       $("form", dialog.data).submit(function() { 
      alert('submitting the form'); 
      parent.jQuery.modal.close(); 
       }); 
      } 
     }); 
     return false; 
    }); 

モーダルです：

  <form name="resetPasswordForm" id="resetPasswordForm"> 
      <dl class="form"> 
       <dt><label>Email:</label></dt> 
      <dd><input type="email" id="passwordResetEmail" name="passwordResetEmail"/></dd> 
      <dd class="clear">&nbsp;</dd> 
       </dl> 
      <ul class="actions"> 
       <li class="actions-submit"><input type="submit" class="button" value="Reset" id="submitPasswordReset" name="submitPasswordReset"/></li> 
       </ul> 
      </form> 

Answer 1

のコア問題はiframeを使用して外部ファイルをロードすることです。あなたはSimpleModalのonShowにこのセレクタを追加する場合：

$("form", dialog.data) 

...それがあると評価：

$('div#simplemodal-data.simplemodal-data form') 

しかし、あなたのDOMは、実際にあるIFRAMEのため：

<div id="simplemodal-data" class="simplemodal-data" style=""> 
    <iframe width="480" scrolling="no" height="230" src="http://192.168.0.189:8082/sm/modal-password.php"></iframe> 
</div> 

ことを意味し、どの可能であれば、実際にセレクタが必要になります。

div#simplemodal-data.simplemodal-data > iframe > html > body > form 

もちろんiframeにはアクセスできませんし、同様に、iframeにクリックをキャプチャして親ページにイベントバブルを送ることはできません。

私はこれがSimpleModalの外部コンテンツに対する解決策であることに驚いています。

2つの解決策は、1）同じページの隠しdivに外部コンテンツを追加するか、2）jQueryのload（）メソッドを使用してページ上に空のdivを挿入してからモーダルを表示することです。

オプション1は次のようになります。

<a class="modal-s" href="#">Forgot Password?</a> 
<!-- hide this div in css --> 
<div id="modal-content"> 
    <form name="resetPasswordForm" id="resetPasswordForm"> 
    <dl class="form"> 
     <dt> 
     <label> 
      Email: 
     </label> 
     </dt> 
     <dd> 
     <input type="email" id="passwordResetEmail" name="passwordResetEmail"/> 
     </dd> 
     <dd class="clear"> 
     &nbsp; 
     </dd> 
    </dl> 
    <ul class="actions"> 
     <li class="actions-submit"> 
     <input type="submit" class="button" value="Reset" id="submitPasswordReset" name="submitPasswordReset"/> 
     </li> 
    </ul> 
    </form> 
</div> 

JS：

$('.modal-s').click(function(e){ 
    $('#modal-content').modal({ 
    overlayClose: true, 
    onOpen: function(dialog){ 
     dialog.overlay.fadeIn('slow', function(){ 
     dialog.container.slideDown('slow', function(){ 
      dialog.data.fadeIn('slow'); 
     }); 
     }); 
    }, 
    onClose: function(dialog){ 
     dialog.data.fadeOut('slow', function(){ 
     dialog.container.slideUp('slow', function(){ 
      dialog.overlay.fadeOut('slow', function(){ 
      $.modal.close(); 
      }); 
     }); 
     }); 
    }, 
    onShow: function(dialog){ 
     $("form", dialog.data).submit(function(){ 
     alert('submitting the form'); 
     parent.jQuery.modal.close(); 
     }); 
    } 
    }); 
    return false; 
}); 

オプション2：

<a class="modal-s" href="#">Forgot Password?</a> 
<!-- hide this div in css --> 
<div id="modal-content"></div> 

JS：

$('.modal-s').click(function(e){ 
    //note use of load() 
    $('#modal-content').load('modal-password.php', function(){ 
    $('#modal-content').modal({ 
     overlayClose: true, 
     onOpen: function(dialog){ 
     dialog.overlay.fadeIn('slow', function(){ 
      dialog.container.slideDown('slow', function(){ 
      dialog.data.fadeIn('slow'); 
      }); 
     }); 
     }, 
     onClose: function(dialog){ 
     dialog.data.fadeOut('slow', function(){ 
      dialog.container.slideUp('slow', function(){ 
      dialog.overlay.fadeOut('slow', function(){ 
       $.modal.close(); 
      }); 
      }); 
     }); 
     }, 
     onShow: function(dialog){ 
     $("form", dialog.data).submit(function(){ 
      alert('submitting the form'); 
      parent.jQuery.modal.close(); 
     }); 
     } 
    }); 
    }); 
    return false; 
}); 

注：これは、トリガーリンクがクリックされるたびに外部データをプルするため、厄介です。すでにロードされているかどうかを確認して余分なコールを保存する方が賢明かもしれませんが、あなたはそのアイデアを得るでしょう。