提交JQuery的选择字段上的变化，阿贾克斯结果 [英] JQuery submit select field on change, ajax results

问题描述

在我的Rails应用程序，我在表单中有一个选择域本身。当磁场的变化，我想它提交表单，并远程检索结果。

in my rails app, I have a select field by itself in a form. When the field changes I would like it to submit the form, and remotely retrieve the results.

下面是我目前的code（编辑 - 这部分的工作，我想更多的添加到它）：

Here is my current code (EDIT - this part works, I'm trying to add more to it):

$(function() {
  $("#statusFilter").live("change", function() {
    this.submit();
  });
});

在应用我有以下的不同部分，对于一个超链接，点击后，远程返回的链接。所以我想对于上述形式相同的效果。

In a different part of the app I have the following, for a hyperlink, when clicked, returns the link remotely. So I'd like the same effect for the above form.

$(function() {
  $("#posts_container th a").live("click", function() {
    $.getScript(this.href);
    return false;
  });
});

这里是它如何与搜索表单另一个例子

here is another example of how it works with a search form

  $("#dash_search input").keyup(function() {
    $.get($("#dash_search").attr("action"), $("#dash_search").serialize(), null, "script");
    return false;
  });

我尝试远程刷新生活在posts_container含量

The content I'm trying to remotely refresh lives in the posts_container

推荐答案

我个人不会对周围选择区域在这种情况下，如果你不使用表格来容纳任何其他形式的元素使用的形式。

I personally wouldn't use a form around the select field in this instance if you are not using the form to house any other form elements.

这是你说的，它看起来像你正在努力实现以下内容：

From what you have said it looks like you are trying to achieve the following:

1. 在用户更改选择领域。
2. 在选择字段中的新值然后用来更新posts_container字段

如果我有这个正确的我会$ C C以下$：

If I have this correct I would code the following:

选择字段

<div>
    <select id="statusFilter">
        <option value="1">Option 1</option>
        <!-- Other options... -->
    </select>
</div>

的JavaScript

<script type="text/javascript">
    $(document).ready(function() {
        $("#statusFilter").change(function() {
            // Possibly show an ajax loading image $("#ajax_loading").show();
            $("#posts_container").load("somepage.php", { value: $(this).val() }, function() {
                // Do something to say the data has loaded sucessfully
                // Possibly hide the ajax loading image $("#ajax_loading").hide();
            });
        });
    });
</script>

我不知道有没有什么帮助，或在右边行，但让我知道，我会尽力帮助进一步如果不。

I don't know if that helps or is on the right lines, but let me know and I will try and help further if not.

这篇关于提交JQuery的选择字段上的变化，阿贾克斯结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！