title: binding remote form to bootstrap modal
body: <p>I have a form in a bootstrap modal window that works perfectly - results are posted to the window upon form submission.  This form is hardcoded into the html for the page.</p>
  
  <p>Now i'm trying to load the form remotely.  It loads the form just fine (puts it into modal-body).  However, now when I click submit the modal goes away and the whole page goes to the form url.  </p>
  
  <p>Do i need to define my binding on the parent page, or in the remote url?  My thought is that on pageload the id of the remote form is not known to the DOM.  Also not sure if the remote url can reference a div on the parent page.</p>
  
  <p>So it seems I'm out of sync - the parent DOM doesn't recognize the form since it's remote, and not sure that the remote form can bind to modal defined in the parent.</p>
  
  <p>Any thoughts?</p>
  
  <p>thanks!</p>
  
  <p>from parent page:</p>
  
  <pre><code>&lt;div class="modal hide fade in" id="mymodal"&gt;
  &lt;div class="modal-header"&gt;&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;&lt;/div&gt;
  &lt;div class="modal-body"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>load remote url here:</p>
  
  <pre><code>&lt;a class="tip" data-toggle="modal" data-target="#mymodal" href="/index.php/change_delivery/change/2" rel="tooltip" title="Change Delivery Date"&gt;&lt;i class="icon-calendar"&gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p>form from remote url:</p>
  
  <pre><code>&lt;form class="form-horizontal" id="delivery_date_form" action="/change_delivery/submit_change"&gt;
  ....
  &lt;/form&gt;
  </code></pre>
  
  <p>and at the end of the remote url/form:</p>
  
  <pre><code>&lt;script&gt;
  $(function() {
  $('#delivery_date_form').bind('submit', function() {
      $.ajax({
          url: "change_delivery/submit_change",
          type: "POST",
          dataType: "html",
          contentType: "application/html",
          success: function(msg) {
              // this is returned value from your PHP script
              //your PHP script needs to send back JSON headers + JSON object, not new HTML document!
              // update your "message" element in the modal
              $("#modal-body").text(msg);
          }
      });
  });
  });
  &lt;/script&gt;
  </code></pre>