The website is not showing the AJAX response as expected

Question

The website is not showing the AJAX response as expected

I am trying to implement a functionality in my view where the table expands into a detail row. Although the expand function is working and fetching the data successfully, I am facing an issue where the detail table that I intend to display is not appearing. Here is a snippet of the HTML code in the view:

<table>
<thead>
    <tr><td>Column 1</td></tr>
    <tr><td>Column 2</td></tr>
    <tr><td>Column 3</td></tr>
</thead>
<tbody>
   foreach(var data in ViewData["data"] as List<DataModel>)
    {
    <tr>
        <td>@data.Data1</td>
        <td>@data.Data2</td>
        <td>@data.Data3</td>
    </tr>
    <tr>
        <td class="hiddenRow" colspan="6">
            <div class="accordion-body collapse" id="@data.MembershipId">
                <div id="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7520051114011025141b10192a35111401145b381018171007061d1c053c11">[email protected]</a>" class="container">

                </div>
            </div>
        </td>
    </tr>           
    }      
</tbody>
</table>

Furthermore, I have implemented JQuery to use @data.MembershipId for retrieving the data for the detail table:

    $(document).ready(function () {
    var memberId;
    $('.header').click(function () {
        $(this).nextUntil('tr.header').slideToggle(50);
        memberId = $(this).data("target").replace("#", "");
        $.ajax({
            type: "GET",
            url: "GetActivity",
            data: { membershipId: memberId },
            success: OnSuccess,
            error: OnError
        });
    });
    function OnSuccess(data) {
        var TableContent = "<table>" +
            "<thead>" +
            "<tr>" +
            "<td>Detail Column 1</td>" +
            "<td>Detail Column 2</td>" +
            "<td>Detail Column 3</td>" +
            "<td>Detail Column 4</td>" +
            "<td>Detail Column 5</td>" +
            "</tr>" +
            "</thead>" +
            "<tbody>";
        for (var i = 0; i < data.length; i++) {
            TableContent += "<tr>" +
                "<td>" + data[i].data1 + "</td>" +
                "<td>" + data[i].data2 + "</td>" +
                "<td>" + data[i].data3 + "</td>" +
                "<td>" + data[i].data4 + "</td>" +
                "<td>" + data[i].data5 + "</td>" +
                "</tr>";
        }
        TableContent += "</tbody></table>";
        $("#UpdatePanel_" + memberId).html(TableContent);
    }
    function OnError(data) {
        alert("Error: " + data)
    }
});

Although the AJAX call to the Controller to fetch SQL data and retrieve the Data Model List seems to be functioning correctly, and the table is being built with the data upon inspection, it fails to display anything when expanding the table row.

I suspect this issue might not be related to the CSS, but I could be mistaken.

jquery css ajax asp.net-mvc

Answer 1

Answer №1

This is the view section

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Tut126</title>
    <style type="text/css">
        .customCSS {
            border: 3px solid #f00;
        }

        .header {
            border: 3px solid #4cff00;
        }
    </style>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        function Display(arg) {
            $("#" + arg.id).collapse('toggle');
        }
        $(function () {
            var memberIds;
            $('.header').click(function () {
                //header column look like column so we don't need all the children
                //$(this).nextUntil('tr.header').slideToggle(50);
                $(this).slideToggle(50);
                //memberId = $(this).data("target").replace("#", "");
                memberIds = $(".customCSS");
                var elements = [];
                memberIds.each(function () {
                    elements.push(this.id);
                });
                var stringOfElementIDs = elements.toString();
                $.ajax({
                    type: "GET",
                    url: '@Url.Action("GetActivity", "Home")',
                    data: { membershipIds: stringOfElementIDs },
                    success: OnSuccess,
                    error: OnError
                });
            });
            function OnSuccess(data) {
                var dataObj = JSON.parse(data);
                $.each(dataObj, function (i, anObj) {
                    var TableContent = "<table>" +
                   "<thead>" +
                   "<tr>" +
                   "<td>Detail Column 1</td>" +
                   "<td>Detail Column 2</td>" +
                   "<td>Detail Column 3</td>" +
                   "<td>Detail Column 4</td>" +
                   "<td>Detail Column 5</td>" +
                   "</tr>" +
                   "</thead>" +
                   "<tbody>";
                    TableContent += "<tr>";
                    $.each(anObj.outData, function (index, val) {
                        TableContent += "<td>" + val + "</td>";
                    });
                    TableContent += "</tr>";
                    TableContent += "</tbody></table>";
                    $("#" + anObj.id).html(TableContent);
                });
            }
            function OnError(data) {
                alert("Error: " + data)
            }
        })
    </script>
</head>
<body>
    <table>
        <thead>
            Click in the header to get activity
            <tr class="header">
                <td>Column 1</td>
                <td>Column 2</td>
                <td>Column 3</td>
            </tr>
        </thead>
        <tbody>
            @foreach (var data in ViewData["data"] as List<Testy20161006.Controllers.DataModel>)
            {
                <tr>
                    <td>@data.DataColumn1</td>
                    <td>@data.DataColumn2</td>
                    <td>@data.DataColumn3</td>
                </tr>
                <tr>
                    <td class="hiddenRow" colspan="6">
                        Click in the red row to expand
                        <div class="accordion-body collapse customCSS container" id="@data.MembershipId" onclick="Display(this)">
                            ...some text1...
                        </div>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</body>
</html>

Below is the code snippet

    public string GetActivity(string membershipIds)
    {
        List<ReturnValue> returnVals = new List<ReturnValue>();
        var listOfMembershipIds = membershipIds.Split(',');

        foreach (string id in listOfMembershipIds)
        {
            List<string> toArrayOut = new List<string>();
            toArrayOut.Add("Data1");
            toArrayOut.Add("Data2");
            toArrayOut.Add("Data3");
            toArrayOut.Add("Data4");
            toArrayOut.Add("Data5");
            ReturnValue returnVal = new ReturnValue { id = id, outData = toArrayOut };
            returnVals.Add(returnVal);
        }

        //Used the Newtonsoft.JSON library for serialization
        var serialized = JsonConvert.SerializeObject(returnVals);
        return serialized;
    }

    public ActionResult Tut126()
    {
        List<DataModel> listOfDataModel = new List<DataModel>();
        DataModel d1 = new DataModel { DataColumn1 = "Data101", DataColumn2 = "Data102", DataColumn3 = "103", MembershipId = "dataMembershipId1" };
        DataModel d2 = new DataModel { DataColumn1 = "Data201", DataColumn2 = "Data202", DataColumn3 = "203", MembershipId = "dataMembershipId2" };
        listOfDataModel.Add(d1);
        listOfDataModel.Add(d2);
        ViewData["data"] = listOfDataModel;

        return View();
    }

Answer 2

This is the view section

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Tut126</title>
    <style type="text/css">
        .customCSS {
            border: 3px solid #f00;
        }

        .header {
            border: 3px solid #4cff00;
        }
    </style>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        function Display(arg) {
            $("#" + arg.id).collapse('toggle');
        }
        $(function () {
            var memberIds;
            $('.header').click(function () {
                //header column look like column so we don't need all the children
                //$(this).nextUntil('tr.header').slideToggle(50);
                $(this).slideToggle(50);
                //memberId = $(this).data("target").replace("#", "");
                memberIds = $(".customCSS");
                var elements = [];
                memberIds.each(function () {
                    elements.push(this.id);
                });
                var stringOfElementIDs = elements.toString();
                $.ajax({
                    type: "GET",
                    url: '@Url.Action("GetActivity", "Home")',
                    data: { membershipIds: stringOfElementIDs },
                    success: OnSuccess,
                    error: OnError
                });
            });
            function OnSuccess(data) {
                var dataObj = JSON.parse(data);
                $.each(dataObj, function (i, anObj) {
                    var TableContent = "<table>" +
                   "<thead>" +
                   "<tr>" +
                   "<td>Detail Column 1</td>" +
                   "<td>Detail Column 2</td>" +
                   "<td>Detail Column 3</td>" +
                   "<td>Detail Column 4</td>" +
                   "<td>Detail Column 5</td>" +
                   "</tr>" +
                   "</thead>" +
                   "<tbody>";
                    TableContent += "<tr>";
                    $.each(anObj.outData, function (index, val) {
                        TableContent += "<td>" + val + "</td>";
                    });
                    TableContent += "</tr>";
                    TableContent += "</tbody></table>";
                    $("#" + anObj.id).html(TableContent);
                });
            }
            function OnError(data) {
                alert("Error: " + data)
            }
        })
    </script>
</head>
<body>
    <table>
        <thead>
            Click in the header to get activity
            <tr class="header">
                <td>Column 1</td>
                <td>Column 2</td>
                <td>Column 3</td>
            </tr>
        </thead>
        <tbody>
            @foreach (var data in ViewData["data"] as List<Testy20161006.Controllers.DataModel>)
            {
                <tr>
                    <td>@data.DataColumn1</td>
                    <td>@data.DataColumn2</td>
                    <td>@data.DataColumn3</td>
                </tr>
                <tr>
                    <td class="hiddenRow" colspan="6">
                        Click in the red row to expand
                        <div class="accordion-body collapse customCSS container" id="@data.MembershipId" onclick="Display(this)">
                            ...some text1...
                        </div>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</body>
</html>

Below is the code snippet

    public string GetActivity(string membershipIds)
    {
        List<ReturnValue> returnVals = new List<ReturnValue>();
        var listOfMembershipIds = membershipIds.Split(',');

        foreach (string id in listOfMembershipIds)
        {
            List<string> toArrayOut = new List<string>();
            toArrayOut.Add("Data1");
            toArrayOut.Add("Data2");
            toArrayOut.Add("Data3");
            toArrayOut.Add("Data4");
            toArrayOut.Add("Data5");
            ReturnValue returnVal = new ReturnValue { id = id, outData = toArrayOut };
            returnVals.Add(returnVal);
        }

        //Used the Newtonsoft.JSON library for serialization
        var serialized = JsonConvert.SerializeObject(returnVals);
        return serialized;
    }

    public ActionResult Tut126()
    {
        List<DataModel> listOfDataModel = new List<DataModel>();
        DataModel d1 = new DataModel { DataColumn1 = "Data101", DataColumn2 = "Data102", DataColumn3 = "103", MembershipId = "dataMembershipId1" };
        DataModel d2 = new DataModel { DataColumn1 = "Data201", DataColumn2 = "Data202", DataColumn3 = "203", MembershipId = "dataMembershipId2" };
        listOfDataModel.Add(d1);
        listOfDataModel.Add(d2);
        ViewData["data"] = listOfDataModel;

        return View();
    }

The website is not showing the AJAX response as expected

Answer №1

Similar questions

Building a Navigation Menu in Vue.JS Using Bootstrap Styles

Executing a void C# web method using jQuery AJAX: A step-by-step guide

The click event for a jQuery button is not functioning properly within a dataTable

Struggling to update the inner HTML of a <p> tag using LocaleDateString() function

How do I utilize AJAX and HTML to invoke a RESTful web service in Java?

Guide on displaying a table in Tabulator utilizing Flask alongside a JSON variable

mapping buttons to images based on dynamic conditions

Content that is added dynamically seems to vanish once it is posted

Problem with implementing AJAX Post functionality in back-end coding

Summing Up Values in Jquery Loop Through Table Rows

Guide to locating the index of a div element that has been dropped onto a droppable div

What is the best way to store article IDs using Javascript or HTML?

Using jQuery to extract data from an unnamed JSON array item

Is it possible to substitute the variables with the function name?

jQuery JSON ajax response problem with knockout.js data binding

What is the method for showcasing login errors and prompting users to fill in all fields simultaneously on a page with PHP?

Position the text in the exact center of an HTML element using absolute positioning

Using Ajax with MVC is easy with @Ajax helpers and JQuery's Ajax functionality

Ways to center text within a nested div in a parent div with table-cell styling

Using varied colors to style list items