0

まず、リモート php フォームをロードするために、bootstrap-modal.js をカスタマイズしました。カスタマイズは次のとおりです (drawjoh に感謝します、https://gist.github.com/1688900 ):

  /*    
  $(function () {    
    $('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {    
      var $this = $(this), href    
        , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7    
        , option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data())    

      e.preventDefault()    
      $target.modal(option)    
    })    
  })    
  */    

  $(function () {    
      $('[data-toggle="modal"]').click(function(e) {    
        e.preventDefault();    
        var href = $(this).attr('href');    
        if (href.indexOf('#') == 0) {    
            $(href).modal('open');    
        } else {    
            $.get(href, function(data) {    
                $(data).modal();    
            }).success(function() { $('input:text:visible:first').focus(); });    
        }    
      });    
  })

モーダルは form#email-entry-form で email_ent.php を読み込みます:

<div class="modal fade in" id="contact-container">
    <form action="#" id="email-entry-form" style="margin:0">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h3 id="contact-title">Email Entry #{$entry_id}</h3>
        </div>
        <div class="modal-body">
            <textarea class="full focused" id="contact-email" name="email" tabindex="1003" max-length="199" rows="3"></textarea>
            <p class="help-block">Use commas to separate email addresses...</p>
            <input type="hidden" name="form_id" value="{$form_id}" id="form_id" />
            <input type="hidden" name="entry_id" value="{$entry_id}" id="entry_id" />
        </div>
        <div class="modal-footer">
            <button type="reset" data-dismiss="modal" class="btn">Cancel</button>
            <a id="contact-send" class="btn btn-primary" tabindex="1004" href="#">Send</a>
        </div>
    </form>
</div>

これは私が使用するjQuery関数ですが、応答が得られません。

(function($){

    $('#contact-send').click(function (e) {
        e.preventDefault();
        // validate form actions cleaned for clearity.
        $.ajax({
            url: 'email_ent.php',
            data: $('#email-entry-form').serialize() + '&action=send',
            type: 'post',
            cache: false,
            dataType: 'html',
            complete: function (xhr) {
                /*
                more code here...
                */
                alert('OK!');
            },
            error: contact.error
        });
    });

})(jQuery);

jquery.js とこの関数は、モーダル ウィンドウを起動する view_ent.php から読み込まれますが、クリック機能は動作しません。後でajaxでロードされるモーダルウィンドウ内の要素に到達できないと思います...

このクリック関数内で入力の値を警告しようとしたところ、未定義の応答が返されました。view_ent.php 内の事前定義されたフォーム値を使用して、モーダル ウィンドウごとに非表示のフォームをあきらめてロードしたくありません。

洞察をありがとう。

4

1 に答える 1

0

私が正しく理解している場合は、フォームをロードする前に「＃contact-send」のクリックイベントにバインドしています。'contact-send'要素は存在しないため、何もバインドされません。

成功関数での入力フォーカスなど、フォームがロードされた後にクリックを配線してみてください。

$.get(href, function(data) {    
    $(data).modal();    
}).success(function() { 
    $('input:text:visible:first').focus(); 
    $('#contact-send').click(function (e) {...});
});

一般的な目的ではありませんが、これがアイデアを伝えてくれることを願っています。

また、モーダルプラグインにはshowイベントがあるようです。フォームがユーザーに表示された後、これを使用してクリックを配線できる場合があります。

http://twitter.github.com/bootstrap/javascript.html#modals

于 2012-07-14T18:57:40.973 に答える