Ajax Call not returning Partial View

Question

I am making an AJAX call, and then returning PartialView from Controller to populate it in a div .

The following is my code :-

var file = document.getElementById("file").files[0];

jq.ajax({
                type: "POST",
                url: '/Main/getData',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function (response) {  
                    jq('#partialPlaceHolder').html(response);    
                },
                error: function (error) {
                    alert("Some Error Occured");
                }
            });

 [HttpPost]
        public ActionResult getData(FormCollection form)
        {
            ......

            return PartialView("_pageMain", retMod);
        }

As I debug the Code in Controller, there is no Error till the end, But still the AJAX throws the alert("Some Error Occured") .

The PartialView is not populated in div. How to solve this?

Answer 1

You are setting the return data type to json

dataType: 'json'

try changing this to

dataType: 'html'

See here http://api.jquery.com/jquery.ajax/

dataType (default: Intelligent Guess (xml, json, script, or html)) Type: String The type of data that you're expecting back from the server.

Answer 2

Why not to use .load() JQuery .load() ?

Description: Load data from the server and place the returned HTML into the matched element.

And simple:

$('#partialPlaceHolder').load("@Url.Action('getData')", { form: formData })

Third parameter for .load() is callback function, so feels free with it.

BTW: I did not find using variable file in your code.