How to hijack form submit event when triggered by dropdownlist change

On my webpage I am displaying a table of data and I want to give the user the ability to sort that data by using a dropdownlist (e.g. By FirstName, By LastName, By State etc...).

I would like to use Ajax to load the sorted data into the data table without a page refresh. I'd also like to use开发者_运维问答 javascript in an unobtrusive way so that the user can still sort if javascript is disabled. This is my first time at trying this approach.

I have been following along with some code in 'ASP.NET MVC In Action' as my template. So far I have:

Webpage

<% using (Html.BeginForm("SortCourseData", "Summary", FormMethod.Post, new { id = "summarysort"})) %>
<% { %>
<div id="sort"><%=Html.DropDownList("SortSelection", Model.sortList, new { onchange="this.form.submit();" })%> </div>         
<% } %>

Rendered HTML

<form action="/Summary/SortCourseData" id="summarysort" method="post">
    <div id="sort"><select id="SortSelection" name="SortSelection" onchange="this.form.submit();"><option>Incomplete</option>
    <option>By first name</option>
    <option>By last name</option>
    <option>By state</option>
    </select> </div>         
</form>  

Jquery

$('form#summarysort').submit(function(event) {
    event.preventDefault();
    var sortKey = $("#SortSelection").val();
    hijack(this, updateList, sortKey, "html")
});

function hijack(form, callback, sortKey, format) {
    $.ajax({
        url: '/Summary/SortCourseData',
        type: "POST",
        data: 'SortSelection=sortKey',
        dataType: format,
        success: callback
    });
}

function updateList(result) {
    $('div#datadisplayarea').html(result);
}

Controller

public ActionResult SortCourseData(string SortSelection)
    {
        SummaryViewModel m = new SummaryViewModel();
        SummaryViewData modelData = m.GetViewModelData(SortSelection);

        if (Request.IsAjaxRequest())
            return PartialView("SummaryCourseList", modelData);

        return View("Index", modelData);
    }

The issue that I am having is that when I select a sort method in the dropdownlist the submit event in my jquery does not capture the event. If I put a simple alert(); in the code block I do not get an alert which suggests that it isn't hooking into the form submit event.

How can I successfully hijack the form submit event so that I can use ajax to update my course table? Any guidance would be appreciated...

try

$("#SortSelection").change(function(){
     $('form#summarysort').submit();
});

Assuming a select box similar to:

<form action="" method="get">
<label for="sortBy">Sort by:</label>
<select id="sortBy" name="sortBy">
    <option value="0">id</option>
    <option value="1">First name</option>
    <option value="2">Surname</option>
    <option value="3">Website</option>
</select>
<input type="submit" value="Sort table" />
</form>

...and a table similar to the following:

<table id="sorting">
    <thead>
        <tr>
            <th>numerical Id</th>
            <th>first name</th>
            <th>surname</th>
            <th>website</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mike</td>
            <td>Masnick</td>
            <td>techdirt.com/index.php</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Randall</td>
            <td>Munroe</td>
            <td>xkcd.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Jerry</td>
            <td>Holkins</td>
            <td>www.penny-arcade.com</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Mike</td>
            <td>Krahulik</td>
            <td>www.penny-arcade.com</td>
        </tr>
    </tbody>
</table>

Rather than using Ajax (and hitting the network every time your user wants to re-sort the table that's already loaded) I'd suggest, instead, using the jQuery plug-in "tablesorter" (or any of the equivalents) , and calling it like so

$(document).ready(
 function(){

    // hides the submit button (to avoid having to hijack the submit event)
    $('input:submit').remove();

    // sorts the table on load.
    $('#sorting').tablesorter();

    $('#sortBy').change(
        function() {
            // call the tablesorter plugin 
            var sortedBy = parseInt($('#sortBy').val());
               $("#sorting").tablesorter({
            // sort on the first column and third column, order asc 
               sortList: [[sortedBy,0]] 
         }); 
    })
 }
);

Demo over at: JS Bin.

The submit event only fires when the user submits the form, it won't if JavaScript does it.

You'll need to modify the onchange handler.