Jquery code not executing

Question

I am trying to upload a file in MVC I have used following jquery code to get file on controller.

 $(document).ready(function () {
        window.addEventListener("submit", function (e) {
            var form = e.target;
            if (form.getAttribute("enctype") === "multipart/form-data") {
                if (form.dataset.ajax) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    var xhr = new XMLHttpRequest();
                    xhr.open(form.method, form.action);
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            if (form.dataset.ajaxUpdate) {
                                var updateTarget = document.querySelector(form.dataset.ajaxUpdate);
                                if (updateTarget) {
                                    updateTarget.innerHTML = xhr.responseText;
                                }
                            }
                        }
                    };
                    xhr.send(new FormData(form));
                }
            }
        }, true);
    });

I have taken this script from here

Its working file but when I want to run some other jquery script thats not firing here the code of that.

function OnUserSuccess() {
        if ($("#UserDocumentID").val() == 0) {
            mvcNotify.displayMessage("Record saved successfully.", "success");
        } else {
            mvcNotify.displayMessage("Record updated successfully.", "success");
        }
    }

I call it in Ajax.begin Form()

@using (Ajax.BeginForm("DocEdit", "User", new { EditUserID = ViewBag.EditUserID }, new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "UserPartialdiv", OnSuccess = "OnUserSuccess" }, new { enctype = "multipart/form-data", @class = "form-sm" }))

I am not much aware of jquery and new to mvc as well please be polite.

And where are you call `OnUserSuccess`? And when it should be called? — teo van kot, Jan 19 '16 at 06:59
its in Ajax.begin Form() "@using (Ajax.BeginForm("DocEdit", "User", new { EditUserID = ViewBag.EditUserID }, new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "UserPartialdiv", OnSuccess = "OnUserSuccess" }, new { enctype = "multipart/form-data", @class = "form-sm" }))" — Avneesh Srivastava, Jan 19 '16 at 07:03
There are few things you need to note here **1.** jQuery library was created to ease vanilla javascript syntax, so dont use vanilla JS syntax unless its really required. **2.** jQuery library provides simple yet efficient methods for ajax functionality,http://api.jquery.com/jQuery.ajax/. also same appplies for event handling as well ,http://api.jquery.com/submit/ . so use those. **3.** I dont see any references of `OnUserSuccess` in your script — dreamweiver, Jan 19 '16 at 07:05
You write it in wery tricky way. Just a gess - have yo try to comment this 2 lines? `e.preventDefault();` `e.stopImmediatePropagation();`? — teo van kot, Jan 19 '16 at 07:07

ssilas777 · Accepted Answer · 2016-01-19T07:20:59.123

Since you have overridden MVC Ajax submit with your javascript submit function, you can try calling the method in your success call back like this

if (xhr.readyState == 4 && xhr.status == 200) {
                            if (form.dataset.ajaxUpdate) {
                                var updateTarget = document.querySelector(form.dataset.ajaxUpdate);
                                if (updateTarget) {
                                    updateTarget.innerHTML = xhr.responseText;
                                }

                              //Call your method here
                              OnUserSuccess()
                          }
                    }

yes I was missing this thankyou so much u save my day sir ;) — Avneesh Srivastava, Jan 19 '16 at 07:19

score 0 · Answer 2 · answered Jan 19 '16 at 07:16

Inside the JQuery function, use the

var file = new File();

After this you must be having the button for upload, on it's click event, get the file.

var fileDate = $('#textboxId').value();

and send this fileData via ajax call to controller

$.ajax(type: "POST",
       url: '\YourController\yourFunctionName',,
       data: { yourParameterNameInControllerFunction : fileData },
       success: function() { alert('Success'); },
       error: function() {alert('Error')});

your controller should look like this

[HttpPost]
public ActionResult functionName(HttpPostedFileBase file) {

 if (file.ContentLength > 0) {
 var fileName = Path.GetFileName(file.FileName);
 var path = Path.Combine(Server.MapPath("~/giveyourdirectory"), fileName);
 file.SaveAs(path);
}

 return RedirectToAction("functionName");
}

this is the basic requirement needed for the upload.

Jquery code not executing

2 Answers2