How can I load my partial view using ajax call? - ajax

Question

I’m trying to load a partial view with an ajax call. I’m trying to follow a solution I found here: Render partial view onclick in asp.net mvc 3 project
My script looks like this:
$("#174").on("click", function () {
$.ajax({
type: "GET",
url: "/TeacherStudent/StudentInformation",
data: "174",
datatype: "html",
sucess: function (data) {
$("#theTimes").html(result);
}
});
});
My controller looks like this:
public ActionResult StudentInformation(string data)
{
int id = Convert.ToInt32(data);
var viewModel = new ScheduleData();
var attend = from s in db.Assignments where s.teacherId == 7 && s.StudentId == 174 select s;
var enroll = from s in db.Enrollments where s.InstructorId == 7 && s.StudentID == 174 select s;
var stdParent = from s in db.Parents select s;
viewModel.Assignments = attend;
viewModel.Enrollments = enroll;
viewModel.Parents = stdParent;
return PartialView("~/Views/Shared/DisplayTemplates/StudentInformation.cshtml");
}
}
Somewhere in my view I have div tag:
<div id="theTimes"></div>
I confirmed that the program calls the partial view but the view does not get displayed in the div tag. What could I be missing in the ajax call? Thanks for helping out!

Answer 1

The problem looks like it's on this line.
sucess: function (data) {
$("#theTimes").html(result);
}
result is undefined and 'sucess' isn't a valid callback.
Try this:
success: function (data) {
$("#theTimes").html(data);
}
Also, change datatype to dataType (grammar) and change data: "174" to data: {"data": "174"}.
I.e.
$("#174").on("click", function () {
$.ajax({
type: "GET",
url: "/TeacherStudent/StudentInformation",
data: {"data": "174"},
dataType: "html",
success: function (data) {
$("#theTimes").html(data);
}
});
});