MVC 3 updating page using a datepicker

I have a problem and after 2 hours of try & error & google I Came here to ask.

Im pretty new to Web development and new with Ajax.

I have a simple page with a jquery ui's datepicker and a div with render 开发者_运维技巧an action:

@using (Html.BeginForm())
{
    <div id="datepicker"></div>    
}

<h2>Lista de trabajos</h2>

<div id="trabajos">
    @Html.Action("List", "Trabajo", new { dia = Model.Fecha })
</div>

So far so good. I want to click on a Date on the datapicker (its configured through an script) and call this action again with another date on the @model.

The problem is that if I use this:

            onSelect: function (dateText, inst) {
                $("form").submit();
            }

It post perfectly when I click on a date, but if i use:

            onSelect: function (dateText, inst) {
                $("form").submit(function (e) { });
            }

It doesn't post anymore.

As novice, Im trying to accomplish it step by step. Im trying to just post (without ajax by now) and send the new date to my controller, so:

How I send data (I think that dateText is what I want to send) to my action (Who is expecting an string). When I accomplish that I'll go to Ajax but if I can't send the date to the action and make a refresh to get a new model...

Any help?

Thanks.

The following code:

$("form").submit();

triggers the submit event immediately and POSTs to the server.

The following code:

$("form").submit(function (e) { 

});

simply redefines the submit handler but doesn't submit immediately. You need to click on the submit button and then the anonymous function will be invoked (which is empty and would eventually perform a normal submit but you need to click on the submit button). So if you wanted to use AJAX:

onSelect: function (dateText, inst) {
    var form = $(form);
    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
        data: form.serialize(),
        success: function(result) {
            // the form was successfully sent to the server using an AJAX call
            // do something with the result
        }
    });
    return false;
}

The second form is adding a handler for the submit event, not submitting the form. If you want to post the form using ajax, you should use the post method.

onSelect: function (dateText, inst) {
            var $form = $('form');
            $.post( $form.attr('action'), $form.serialize(), function(result) {
               // do something with the result of the post request
            });
          }