2012-03-08 8 views
5

У меня есть форма на моей странице, которая имеет следующий кодс помощью pjax отправить форму

<form class="form"> 
    ... bunch of inputs and presentation logic... 
    <div> 
     <input type="submit" class="btn btn-primary" id="submit_btn" value="Save Part"/> 
     <a class="btn" href="/Part/CopyPart/[email protected] ">Copy Part</a> 
     <a class="btn" href="/Part/Delete/[email protected]">Delete Part</a> 
     <a class="btn" href="/Part/PartList/[email protected]">Return To Part List</a> 
    </div> 
    @Html.HiddenFor(model => model.ID) 
    @Html.HiddenFor(model => model.Manufacturer) 
    @Html.HiddenFor(model => model.DateCreated) 
    @Html.HiddenFor(model => model.Manufacturer) 
    @Html.HiddenFor(model => model.IsActive) 
    @Html.HiddenFor(model => model.PartType) 
</form> 

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

$(function() { 
    $('a').pjax({ container: "#update_panel", timeout: 2000 }).live('click', function() {}); 
    $("#submit_btn").click(function() { 
     var form = $('#form'); 
     $.pjax({ 
      container: "#update_panel", 
      timeout: 2000, 
      url: "@Url.Action("UpdatePart","Part")", 
      data: form.serialize() 
     }); 
    }); 
}); 

Этот код передает вызовы моему действию UpdatePart(), но он передает пустую модель действию? Как я могу заполнить модель содержимым формы, чтобы все это работало?

+0

Что такое '$ .fn.pjax' и' $ .pjax'? –

+0

Это реализация состояния jquery push. Находится здесь https://github.com/defunkt/jquery-pjax. Это потрясающе для получения хорошего URL-адреса и отзывчивого приложения и прост в использовании для загрузки. Ну, я думаю, кроме случаев в этом случае :) – PlTaylor

+0

Я удивлен, что раньше не сталкивался с этим, он выглядит очень активным. –

ответ

3

Вы ссылаетесь формы с помощью Id, но форма имеет класс и не идентификатор. Попробуйте:

var form = $(".form"); 

или

<form id="form"> 
+0

Спасибо. Мне нужно, чтобы явное указание указывало на меня. – PlTaylor

3

Убедитесь, что вы отмените представление по умолчанию формы, возвращая ложное из обработчика щелчка:

$("#submit_btn").click(function() { 
    var form = $('#form'); 
    $.pjax({ 
     container: "#update_panel", 
     timeout: 2000, 
     url: "@Url.Action("UpdatePart","Part")", 
     data: form.serialize() 
    }); 

    return false; // <-- cancel the default event 
}); 
+0

Хорошая точка .... но это, похоже, не исправляет мою проблему, когда пустая модель возвращается в действие. – PlTaylor

+4

возвращение ложных - это неправильная вещь! вы должны зафиксировать событие и называть 'preventDefault()' на нем. Это: а) лучше сообщает ваши намерения; б) не нарушает пузырь событий. – WickyNilliams

5

Я вижу в их документы: https://github.com/defunkt/jquery-pjax , что у них есть простой способ сделать это:

<div id="pjax-container"> 
</div> 

<form id="myform" pjax-container> 
... all inputs/submit/buttons etc .... 
</form> 

<script> 
$(document).on('submit', 'form[pjax-container]', function(event) { 
    $.pjax.submit(event, '#pjax-container') 
}) 
</script> 

лично я не видел этот пример раньше .. может быть, это новое/нет ... но надеюсь, что это поможет другим.

Смежные вопросы