Question

我有一个生成n个ajax表单的页面，每个摄像头一个。在提交时，每个加载一个div与每个相机的图片。我想在加载时提交表格。

到目前为止，我有这个，取自表单提交时已经采取的操作，减去将提交按钮绑定到ajax事件的点击事件。

这是HTML（删除了一些CakePHP div汤）

<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 div和CameraContainer div用于表单。目前<script>位于循环内部，但如果我可以在页面末尾加载它会更好。

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

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

Answer 1

你应该使用

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

CameraContainer是一个ID #，而不是.
您不搜索靠近CameraContainer的元素，搜索CameraContainer中的元素，因此请使用find函数

查看我的example

在加载时提交ajax表单

1 个答案: