CODEWITHSUNDEEP
javascriptjqueryjsonajax
Truecolor
Truecolor

Reputation: 469

Json GET is not showing the details in popup

I am trying to show the details of each Student with Json and I think it is not going to the ajax part.

It shows the id and the url when I console.log() them, but I get this error message for the ajax part

Error image

I don't know what's missing or where is the issue?

This is my html link 

@Html.ActionLink("Details", "StudentDetails", new { id = item.ID }, new { @class = "modalDetails", @id = item.ID  })

script

<script type="text/javascript">
    $(function () {
        $(".modalDetails").click(function (e) {

            e.preventDefault();         //stop the default action upon click

            var id = $(this).attr('id');
            console.log(id);
            var url = $(this).attr("href");
            console.log(url);

            $.ajax({
                type: 'GET',
                data: { id: id },
                dataType: "json",
                url: url,
                success: function (data) {
                    $(".modalDetails").append('<span> First Name: ' + data.firstName + '</span></br>');
                    console.log("success");
                }                
            });

            $('#myModal').modal('show');        // show the modal pop up    
        });
    });
</script>

StudentController

public JsonResult StudentDetails(int id)
        {
            Student student = studentRepository.GetStudentByID(id);

            var json = new{
                firstName = student.FirstMidName
            };

            return Json(json, JsonRequestBehavior.AllowGet);
        }

Upvotes: 0

Views: 37

Answers (1)

Truecolor
Truecolor

Reputation: 469

Everything was fine, except that I needed to build the solution and append the details to the modal-body. Sometimes it is just a simple fix.

Upvotes: 1

Related Questions