Как перехватить событие отправки формы, когда вызвано изменением выпадающего списка - PullRequest
Новая
       4

Как перехватить событие отправки формы, когда вызвано изменением выпадающего списка

0 голосов
/ 04 октября 2010

На моей веб-странице отображается таблица данных, и я хочу дать пользователю возможность сортировать эти данные с помощью раскрывающегося списка (например, по имени, фамилии, состоянию и т. Д.).

Я хотел бы использовать Ajax для загрузки отсортированных данных в таблицу данных без обновления страницы.Я также хотел бы использовать javascript ненавязчивым способом, чтобы пользователь мог все еще сортировать, если javascript отключен.Я впервые пробую этот подход.

Я следовал вместе с некоторым кодом в 'ASP.NET MVC In Action' в качестве моего шаблона.На данный момент у меня есть:

Веб-страница 

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

Рендеринг 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);
}

Контроллер 

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

Проблема, с которой я сталкиваюсь, заключается в том, что при выборе метода сортировки в раскрывающемся списке событие submit в моемJQuery не захватывает событие.Если я вставлю простое alert(); в блок кода, я не получу предупреждение о том, что оно не подключается к событию отправки формы.

Как я могу успешно перехватить событие отправки формы, чтобы яможно использовать ajax для обновления моей таблицы курсов?Любое руководство будет оценено ...

Ответы [ 3 ]

1 голос
/ 04 октября 2010

1001 * попробовать * 

$("#SortSelection").change(function(){
     $('form#summarysort').submit();
});
1 голос
/ 04 октября 2010

Предполагается, что поле выбора похоже на: 

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

... и таблица, подобная следующей: 

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

Вместо того, чтобы использовать Ajax (и подключаться к сети каждый раз, когда ваш пользователь хочет пересортировать уже загруженную таблицу), я бы предложил вместо этого использовать плагин jQuery " TableSort"(или любой из эквивалентов ), и называя его так 

$(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]] 
         }); 
    })
 }
);

Демонстрация по адресу: JS Bin .

0 голосов
/ 04 октября 2010

Событие submit срабатывает только тогда, когда пользователь отправляет форму, и не будет, если JavaScript это сделает.

Вам нужно будет изменить обработчик onchange.

...