CODEWITHSUNDEEP
c#jqueryajaxpostmodel-view-controller
user1214552
user1214552

Reputation: 33

MVC AJAX Form will not submit after a different AJAX post is called

This is an odd issue, and I'm sure it's something simple, but I couldn't find another post with the same issue. I have a MVC View with an AJAX.BeginForm() that posts to my controller. Also, I have a search box (input) above the form that when the Enter key is pressed, it performs a JQuery ajax post to my controller (GetData) to auto-populate some of the form fields before submitting it. What's strange, is if the search field is used, it successfully fills the form fields with data, but the form's submit button stops working (form does NOT submit at all)! Now, if I do NOT use the search field (which performs the ajax POST) and manually fill in the form fields, then hit submit, it correctly submits to my controller.

The GetData (field pre-filler action) returns a JSONified model object which I read into the form objects.

The form is in a PartialView with the master ViewModel as it's model. The search box is in the _Layout page with no model on the razor view.

Code below is simplified to the relevant chunks (let me know if I omitted something important):

_Layout.cshtml:

<body>
        <div id="bodyFrame">    
        @RenderBody()
        </div>
          
        <footer>
            <span>Project Number:</span><input id="projectSearch" type="text" />
            <div id="inputFrame">
                    @{ Html.RenderPartial("InputPartialView"); }
            </div>
        </footer>
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/bootstrap")
        @Scripts.Render("~/bundles/scripts")
       @RenderSection("scripts", required: false)
     </body>

InputPartialView.cshtml:

@using (Ajax.BeginForm("AddEntry", new AjaxOptions() { HttpMethod = "POST",     UpdateTargetId = "bodyFrame", InsertionMode = InsertionMode.Replace }))
{
 /*Table with numerous HTML helper input fields for my model*/

<input type="submit" value="Submit" />
}

Main.js (method to pre-fill form data on Enter key press in search box):

$('#projectSearch').keyup(function (event) {
            if (event.keyCode == 13) {
                $.ajax({
                    url: '/Home/GetData',
                    dataType: 'json',
                    type: 'POST',
                    data: {
                    project: $(this).val()
                    },
                    success: function (data) {
                        $('#tb_Client').val(data.Client);
                        /*Other field values filled the same way*/
                    },
                    fail: function () {
                        alert('fail');
                    }
                });
            }
        });

controller actions:

[HttpPost]
public JsonResult GetData(string search)
{
      var result = new SubModel(); //This is a submodel of the main viewmodel

      /*Pull in data via SQL into result*/
      return Json(result);
}

 [HtppPost]
 public ActionResult AddEntry(ReportLogViewModel model)
    {
         /*Only works if search function is not called*/
         return PartialView("Index", ViewModel.Generate());
    }

So to summarize: The search function (GetData) always works, the form only works when the search function is not used (once it is used, the form does not submit to the controller), no errors occur in the browser console. Normal usage would be:

  1. Type query in search input, press enter
  2. GetData action is called, data is retrieved and returned via $.ajax() and then the form fields are populated with the returned data
  3. User correct/amends any autocompleted data, fills in manual data, then hits Submit button
  4. AddEntry action is called to enter the form data into the database, then return a newly generated partialview with the newly entered record.

Thanks in advance for any help!

UPDATE 1: It seems commenting out the lines of code in the main.js ajax success command allows the form to submit normally (albeit without the data the GetData method received). In this case removing "$('#tb_Client').val(data.Client);" allows the form to submit. This doesn't solve my problem but further pinpoints the problem to these lines of code in main.js.

UPDATE 2: The problem indeed was one of the javascript/jquery value setters on one of my inputs. Something was wrong with the JSON object. I commented them out one by one till I found the culprit then went back to my controller/viewmodel to the method that set the values and corrected the problem.

Upvotes: 2

Views: 1376

Answers (1)

JPG
JPG

Reputation: 145

This is more appropriate for a comment but I need more reputation to reply to people on this site for some reason.

With your update, it makes me think that you're using the #tb_Client ID in more than one place but I can't confirm that without seeing the rest of the program.

Alternatively, instead of submitting the data encapsulated into a single object, you can send variables individually:

data : { variable : 'variable', 
         variable2 : 'variable2'},

Upvotes: 1

Related Questions