0

I have an mvc view that contains a list of items. Each item is displayed using a partial view. The user can edit, add, and delete items in the list. All of this works.

However, if the user adds an item, the item cannot be edited until the page is refreshed. When the user selects the submit button, the post does not occur. There is no network activity shown in Chrome dev tools - nothing happens.

The output html is the same for items that are included in the initial page load and items added via ajax.

<form action="/booking/UpdateRoomFlow" data-ajax="true" data-ajax-method="POST" data-ajax-success="update_27365547" id="roomflowform_27365547" method="post" novalidate="novalidate"></form>

I noticed that when I inspect element in chrome, the form does not wrap the form fields, but when I look at view source, it does.

I've tried useing Ajax.BeginForm and I've tried writting the html out myself, with the same results either way.

This is the Ajax.BeginForm...

 @using (Ajax.BeginForm(
    "UpdateRoomFlow",null,
    new AjaxOptions
    {
        HttpMethod = "POST",
        OnSuccess = targetfunction
    },
        new { @id = @formid, @novalidate = "novalidate"}))
    {

Any ideas?

EDIT: Something to note - this form is placed inside a tr tag above a td tag, which could cause an issue as that is invalid markup - however, its working in all cases except items added via ajax call.

tintyethan
  • 1,772
  • 3
  • 20
  • 44
  • its just a submit button... – tintyethan Jul 03 '14 at 15:40
  • The "Inspect Element" window is live, where "View Source" isn't, so that seems to be your problem. The question now is why don't your form fields end up in your form. I'd assume they're either being moved to the wrong place, or there's some invalid markup somewhere which causes the entire page structure to get all funky (like a tag that doesn't get closed). – Joe Enos Jul 03 '14 at 15:43
  • I don't think form being outside the form fields is the problem because its the same on items that were included on the initial page load, and those items can be updated normally. EDIT - In fact, the whole routine is the same for items that are created on page loads and items that get loaded via ajax. – tintyethan Jul 03 '14 at 15:45
  • if you post complete form or view it would be helpful – Ehsan Sajjad Jul 03 '14 at 18:13

1 Answers1

0

<script> tags included in an HTML AJAX reponse are stripped, and since Ajax.BeginForm adds script tags to the HTML to enable it's functionality, you essentially end up with a regular old form that does nothing. There's nothing you can do about this, as the browsers strip <script> tags for security reasons. Your only recourse is to stop using Ajax.BeginForm and write your own JS to handle the AJAX submit, which you can then include in the main view or an external file which will not be affected, which is not a bad idea anyways. The Ajax.* family of helpers are awful just for reasons like this.

Chris Pratt
  • 232,153
  • 36
  • 385
  • 444