在加载时提交ajax表单

我有一个页面生成n个Ajax表单，每个相机一个。在提交每个相机加载一个div与图片。我想在提交表单时加载它们。在加载时提交ajax表单

到目前为止，我已经从提交表单时所采取的操作中减去将提交按钮绑定到ajax事件的单击事件。

这里的（一些CakePHP的DIV汤删除）的HTML

<div id="CameraContainer"> 

    <form action="/Cameras/ajaxPicture" id="CameraShowForm" method="post" accept-charset="utf-8"> 
     <input type="hidden" name="_method" value="POST" /> 
     <input type="hidden" name="data[Camera][camera]" label="Images:" value="CS011" id="CameraCamera" /> 
     <label for="datepicker_value">Date: </label><input name="data[Camera][date]" type="text" id="datepicker_value" value="12/13/2011 12:00:00" /> 
     <input type="hidden" name="data[Camera][count]" label="Images:" value="2" id="CameraCount" /> 
     <input id="submit-490507801" type="submit" value="Load Pictures" /> 
    </form> 
</div> 

<div id="ajaxPicture1" class="ajaxPicture"></div>

和JavaScript：

$(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;});

这些都重复了N个摄像容器，每个人都有一个独特的AJAX股利和CameraContainer DIV为表格。目前，<script>位于循环内，但如果我可以在页面的最后加载它会更好。

这是取自我的框架生成的代码，所以我不完全理解它;我想要的（尽管它会）做的是从最接近的元素CameraContainer（表单在这个元素中），序列化这些数据并将其提交给我的ajax函数，它的位置是/cameras/ajaxPicture。但是它发送给该函数的数组是空的，因此该函数不会返回任何结果。

如何抓取并向给定元素提交最近的Ajax表单（并将其加载到容器div中）？

来源

2011-12-13 Ben Brocka

为什么要在页面加载时提交表单文章？ – austincheney 2011-12-13 17:44:49

预先填充的表单，可根据时间从每个相机加载图片，并设置默认时间。在页面加载时，您会看到几张表格以及来自每台相机的几张图片作为示例。我也可以做到服务器端，但我认为这是最有意义的，并保持第一个图像请求与所有其他图像请求一样。 – 2011-12-13 17:48:54

您应该使用

$("#CameraContainer").find("form").serialize()

CameraContainer是一个ID，因此#，而不是一个.
你不要搜索，接近CameraContainer元素，你搜索一个元素，其在CameraContainer所以用find功能

看看我的example

来源

2011-12-13 17:56:37 noob

在加载时提交ajax表单

回答

相关问题