JQuery submit select field on change, ajax results

in my rails app, I have a sel开发者_如何学编程ect field by itself in a form. When the field changes I would like it to submit the form, and remotely retrieve the results.

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

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. A user changes the select field.
2. The new value in the select field is then used to update the posts_container field.

If I have this correct I would code the following:

Select Field

<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.

Try this

$(function() {
  $("#statusFilter").live("change", function() {
    //$(this).closest("form").submit();
    var $form = $(this).closest("form");
    $.post( {
       url: $form.action, 
       data: $form.serialize(),
       success: function(){ //Write code here to handle on success }
    });
});