Question

First of all i customized bootstrap-modal.js in order to load a remote php form.
Here is the customization (Thanks to drewjoh, 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(); });    
        }    
      });    
  })    

The modal loads email_ent.php with form#email-entry-form:

<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>

This is the jQuery function i use but cannot get any response.

(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 and this function is loaded from the view_ent.php which fires modal window, but click function does not work. I think it cannot reach the elements within the modal window which is loaded afterwards with ajax…

I tried to alert an input’s value within this click function and get undefined response. I do not want to give up and load hidden forms for every modal window with pre-defined form values within view_ent.php.

Thanks for any insights.

Answer 1

If I’m understanding correctly, you are binding to the click event of ‘#contact-send’ before loading the form. The ‘contact-send’ element doesn’t exist, so nothing gets bound.

Try wiring up the click after the form it loaded, such as with input focussing in the success function.

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

While not a general purpose, I hope this conveys the idea.

Also, it looks like the modal plugin has a show event. You may be able to use that to wire up your click after the form is shown to the user.

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