title: Submit ajax form on load
body: <p>I have a page that generates n ajax forms, one for each camera. On submit each loads a div with pictures from each camera. I'd like to submit the forms as they load.</p>
  
  <p>So far I have this, taken from the action the form already takes when it submits, minus the on-click event binding the submit button to the ajax event.</p>
  
  <p>Here's the HTML (Some CakePHP div soup removed)</p>
  
  <pre><code>&lt;div id="CameraContainer"&gt;
  
      &lt;form action="/Cameras/ajaxPicture" id="CameraShowForm" method="post" accept-charset="utf-8"&gt;
          &lt;input type="hidden" name="_method" value="POST" /&gt;
          &lt;input type="hidden" name="data[Camera][camera]" label="Images:" value="CS011" id="CameraCamera" /&gt;
          &lt;label for="datepicker_value"&gt;Date: &lt;/label&gt;&lt;input name="data[Camera][date]" type="text" id="datepicker_value" value="12/13/2011 12:00:00" /&gt;
          &lt;input type="hidden" name="data[Camera][count]" label="Images:" value="2" id="CameraCount" /&gt;
          &lt;input id="submit-490507801" type="submit" value="Load Pictures" /&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div id="ajaxPicture1" class="ajaxPicture"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And the Javascript:</p>
  
  <pre><code>    $(document).ready(function () {
      $.ajax({data:$(".CameraContainer").closest("form").serialize(),
          dataType:"html",
          success:function (data, textStatus) {$("#ajaxPicture1").html(data);},
          type:"post",
          url:"\/cameras\/ajaxPicture"
      });
  
          return false;});
  </code></pre>
  
  <p>These are both iterated for n camera containers, each has a unique ajax div and <code>CameraContainer</code> div for the form. Currently the <code>&lt;script&gt;</code> is inside the loop but it would be better if I could load it at the end of the page.</p>
  
  <p>This is taken from code generated by my framework so I don't understand it completely; what I want it to (and though it would) do is to grab the nearest from to the element with the id <code>CameraContainer</code> (the form is inside this element), serialize this data and submit it to my ajax function, which is at <code>/cameras/ajaxPicture</code>. However the array it sends to that function is empty, thus the function returns no results.</p>
  
  <p>How can I grab and submit the nearest Ajax form to a given element (and load it in a container div)?</p>