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 для загрузки внешнего файла. При добавлении этого селектора OnShow SimpleModal в:

$("form", dialog.data) 

... это имеет значение:

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

Но из-фрейма ваш DOM на самом деле:

<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 для внешнего контента.

Два решения, о которых я могу думать, это 1) добавить внешний контент в скрытый div на той же странице или 2) использовать метод load() jQuery для заполнения пустого 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; 
}); 

Примечание: это неудобно, потому что он будет вытягивать внешние данные каждый раз при нажатии кнопки запуска. Возможно, было бы разумнее увидеть, загрузилась ли она и сохранить дополнительные вызовы, но вы поняли эту идею.