Ajax.BeginForm Not working correctly in FireFox (Only submits Post once)

Question

I am using Ajax.Begin form with a partial view to replace contents of defined target.

like so,

Partial View:

@model string
   <fieldset style="width:916px">
        <legend class="SearchFiledSet">AMN</legend>
        <table>
          <tr valign="top">
           <td>Notes:&nbsp</td>
           <td>@Html.TextArea("Notes", @Model, 5, 30, new { disabled = "disabled", style = "background: #FFF; border: 1px solid #000;" })</td>
           @using (Ajax.BeginForm("AMN", new AjaxOptions { UpdateTargetId = "AMN",
                                                                                                    Url = Url.Action("AMN"),
                                                                                                    OnBegin = "OnBegin",
                                                                                                    OnFailure = "OnFailure",
                                                                                                    OnSuccess = "OnSuccess",
                                                                                                    OnComplete = "OnComplete"}))
           {
             <td style="padding-left: 30px">P N: &nbsp @Html.TextBox("PN", "", new { size = "15" })
              @if(string.IsNullOrEmpty(@Model))
               {
                 <br />
                  <font color="red">No matching pn was found in the system.</font> 
               }
             </td>
             <td style="padding-left: 60px">
                   <button type = "submit">Search</button>
             </td>
           }
          </tr>
        </table>
   </fieldset>

Controller:

        public PartialViewResult AMN(string PN = null)
    {
        IPS p=null;
        string remarks= " ";

        if (PN != null)
        {
            p = _pS.GetPPN.Trim());
            remarks = p != null ? p.Remarks : remarks;
        }

        return PartialView(((object)remarks));
    }

Main View:

 <div id="AMN" style="margin-left: 180px">
    @Html.Action("AMN")
 </div>

The Ajax calls work fine in IE of course, but in Firefox it hits the break point on the controller and correctly posts during the first submit but then nothing will happen after each consecutive submit. Not even the break point will get hit. I have seen a few other posts of people complaining of this same issue a few years ago but none of them had a resolution. Has anyone experienced this issue and found a resolution or have any recommendations of what can be the issue?

There is another Html.BeginForm on the main page that I link my partial view to, but my partial view is outside that form, and I also tried removing the other form and just leaving the ajax one with no luck.

I am using jquery-1.7.2

Answer 1

I think I now understand what is happening based off of general research on the topic rather than directing it to Ajax.BeginForm method. I wanted to basically mimic a the concept of a panel, and be able to just plug in the full form and replace the panel (partial view) with updated data on the ajax call. Well I am not that experienced with ajax or javascript, but it seems that when I rewrite the html the object on the dom is getting replaced too so all focus is lost, hence it worked on one post but not twice.

This was confusing mostly because it worked the way I originally thought it would on Internet Explorer but not Firefox. So in order to make it cross-browser compatible I just used JSON to send back the data to be changed and then registered a function to the OnSuccess call, which will just change the html necessary rather than rebuilding the partial. I wanted to handle the Ajax mostly with the Asp.net MVC framework libraries to keep the code cleaner but I guess this isn't likely to happen unless I abstract out the form contents from the partial.

Here is the changes made for anyone else who runs into this issue:

Controller:

    [HttpGet]
    public PartialViewResult AMN()
    {
        string remarks = " ";
        return PartialView(((object)remarks));
    }

    [HttpPost]
    public JsonResult AMN(string PN = null)
    {
        IPS p=null;
        string remarks= " ";

        if (PN != null)
        {
            p = _pS.GetP(PN.Trim());
            remarks = p != null ? p.Remarks : null;
        }

        return Json(remarks);
    }

PartialView:

@model string
   <fieldset style="width:916px">
        <legend class="SearchFiledSet">AMN</legend>
        <table>
          <tr valign="top">
           <td>Notes:&nbsp</td>
           <td>@Html.TextArea("Notes", @Model, 5, 30, new { disabled = "disabled", style = "background: #FFF; border: 1px solid #000;" })</td>
           @using (Ajax.BeginForm("AMN", "PS", null, new AjaxOptions {OnSuccess = "processData" }, new { id = "AMNForm" }))
           {
             <td style="padding-left: 30px">PN: &nbsp @Html.TextBox("PN", "", new { size = "15" })
              @if(string.IsNullOrEmpty(@Model))
               {
                 <br />
                  <font color="red">No matching pn was found in the system.</font> 
               }
             </td>
             <td style="padding-left: 60px">
                   <button type = "submit">Search</button>
             </td>
           }
          </tr>
        </table>
   </fieldset>

   <s.. type="text/java..">
       function processData(data) {
           $("#Notes").val(data);

           if (!data[0])
               alert("data is null")
             else
               alert("data is not null")
       }
   </..>