Ajax call replaces the whole content-Collection of common programming errors

I have a form and submit button. Normally when the submit action is taken it returns to a new page and not update the partial view. I use ajax call in jquery live function but it still does replace the whole content instead of returning partial view with provided model. The following is my code in _detailfile.cshtml. The application uploads the file but replaces the whole content.

@foreach (var training in Model.TrainingList) { using (Html.BeginForm(“fileForm”, “Home/TempUpload”, new { employeeId = Model.Id, trainId= @training.Id }, FormMethod.Post, new { enctype = “multipart/form-data” })) { if (training.TrainingFile != null) { } else { } } }

Following is my script to only update the div file but it does not work.

 $("fileForm").live("submit",  function (event) {


         if (form.valid()) {
             $.ajax({
                 url: this.action,
                 type: this.method,
                 data: $(this).serialize(),
                 success: function (result) {
                     $('#trainingFileDiv').html(result);
                 }
             });
         }

         event.preventDefault();
     });

This is another code I found on the net and it does not update the div but all content.

$(function () {
    $('fileForm').submit(function () {
        if ($(this).valid()) {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    $('#trainingFileDiv').html(result);
                }
            });
        }
        return false;
    });
});

What am i missing here? Thank you for your help

EDIT1 When the partial view is returned from controller , I get Uncaught ReferenceError: $ is not defined fileForm:7

EDIT2 function to ajaxify all forms. I get the error in edit1

  $(function () {
         $('form').submit(function () {
             if ($(this).valid()) {
                 $.ajax({
                     url: this.action,
                     type: this.method,
                     data: $(this).serialize(),
                     success: function (result) {
                         $('#trainingFileDiv').append(result);
                     },
                 });//end of ajax call
             }//end of if

         });     });

EDIT3 In the below code I have no errors but there are not any files in Request.You can see the controller code just below the function. But when I put either return true or false, the file is placed in Request object and sent to controller. But it replaces my all content on the return. What is wrong here?

$('form').submit(function (event) {

         if ($(this).valid()) {
             $.ajax({
                 url: this.action,
                 type: this.method,
                 data: $(this).serialize(),
                 success: function (result) {
                     $('#trainingFileDiv').html(result);
                 },
                 complete: function () {
                     console.log("Complete");
                 },
                 error: function () {
                     console.log("Error");
                 }
             }); //end of ajax call
         } //end of if
         //return true;//if commented no error on jquery side but no files are passed to controlller
     });

  foreach (string upload in Request.Files)
            {
                string path = AppDomain.CurrentDomain.BaseDirectory + "uploads/";
                string filename = Path.GetFileName(Request.Files[upload].FileName);
                TrainingFile file = new TrainingFile();
                file.Name = filename;
                file.Path = path;



                var training = _work.TrainingRepository.GetSet().Where(a => a.EmployeeId == employeeId && a.Id == trainId).ToList().ElementAt(0);
                training.TrainingFile = file;
                training.FileId = file.Id;

                _work.TrainingFileRepository.Add(file);
                _work.TrainingFileRepository.Save();
                _work.TrainingRepository.UpdateAndSave(training);
                _work.TrainingRepository.Save();

                Request.Files[upload].SaveAs(Path.Combine(path, filename));
            }

1. Unfortunately I don’t have high enough rep to comment yet, although I am trying to get there. To get the Form you can use $(‘form’) if you only have one form on the page. Otherwise dependent on the view engine you are using you might need to add some additional syntax to specify the Id of the form.

   Like Darin Dimitrov suggested:

   using (Html.BeginForm("fileForm", "Home/TempUpload", new { employeeId = Model.Id, trainId= @training.Id }, FormMethod.Post, new { enctype = "multipart/form-data", id = "fileForm" }))
   

   in Razor you need to add @ to the id so it would be like this:

   @using (Html.BeginForm("fileForm", "Home/TempUpload", 
   new { employeeId = Model.Id, trainId= @training.Id }, FormMethod.Post, 
   new { enctype = "multipart/form-data", @id = "fileForm" }))
   

2. $('#trainingFileDiv').html(result);// ovverides already existing html
   
   $('#trainingFileDiv').append(result); //adds new result to existing html
   

3. Your selector is wrong and returns no elements:

   $('fileForm')
   

   and of course you are attaching the submit handler to no elements.

   You probably wanted to use an id selector to retrieve the form:

   $('#fileForm')
   

   Also don’t forget to assign this id to your form:

   using (Html.BeginForm("fileForm", "Home/TempUpload", new { employeeId = Model.Id, trainId= @training.Id }, FormMethod.Post, new { enctype = "multipart/form-data", id = "fileForm" }))
   

   or if you wanted to AJAXify all forms on the page (or you had a single form) you could just use:

   $('form')
   

   Of course absolutely same remark stands for your $("fileForm").live selector. Also notice that the .live method is deprecated since long time ago and unless you are using a jQuery version from the prehistory you probably want to use the recommended .on() function.

Originally posted 2013-11-15 09:09:13.