CODEWITHSUNDEEP
javascriptjqueryajaxtwitter-bootstrap
jle
jle

Reputation: 269

Appending a Table not Working in Production

I'm creating a website using Bootstrap, and one of the tables has its rows removed and repopulated with new data after a button press. It works in the testing environment in Visual Studio's Google Chrome setting, but after deployment on the live server, the table is left blank and not appended when accessed from the web. The AJAX call is working because fields outside of the table are being updated, so I figure it might be a Java script issue between test Chrome and live Chrome. This is my first website, so I'm not sure how to even test a specifically live application. Does anyone know what might be causing this or can anyone point me in the right direction? Thanks in advance!

The Table:

<div class="row">
    <table id="dt_products" class="table table-striped">
        <thead>
            <tr>
                <th class="text-center">Product ID</th>
                <th class="text-center">Price</th>
                <th class="text-center">Margin</th>
            </tr>
        </thead>
        <tbody>
            @if (Model.Products.Any())
            {
                for (var i = 0; i < 12; i++)
                {
                    <tr>
                        <td class="text-center">@Html.DisplayFor(m => m.Products[i].ProductID)</td>
                        <td class="text-center">@Html.TextBoxFor(m => m.Products[i].Price, "{0:c}")</td>
                        <td class="text-center">@Html.TextBoxFor(m => m.Products[i].Margin, "{0:c}")</td>
                    </tr>
                }
            }
        </tbody>
    </table>
</div>

The AJAX Call:

$(function () {
    $("#ProductDate").change(function () {
        var $productValue = $("#ProductDate").val(),
            $startDate = $(".productReleaseDate"),
            $pID = { iD: $productValue };
            $('#dt_products tbody tr').remove();
            $.ajax({
                type: "GET",
                url: '@Url.Action("GetProducts", "Sales")',
                data: $pID,
                success: function (data) {
                    //Fill data
                    var pattern = /Date\(([^)]+)\)/;
                    var results = pattern.exec(data[0].ProductDate);
                    var $dt = new Date(parseFloat(results[1]));
                    $startDate.text(($dt.getMonth() + 1) + "/" + $dt.getDate() + "/" + $dt.getFullYear());
                    for (var i = 0; i < data.length; i++) {
                        var row = $('<tr></tr>');

                        idCell = $('<td class="text-center"></td>').append(data[i].ProductID);
                        row.append(idCell);

                        idCell = $('<td class="text-center"></td>').append(Number(data[i].Price).toFixed(2));
                        row.append(idCell);

                        idCell = $('<td class="text-center"></td>').append(data[i].Margin);
                        row.append(idCell);

                        $('#dt_products tbody').append(row);
                    }
                }
            });
    }).change();
});

EDIT: Using the Console errors in the production version, 2 errors were found.

Mixed Content: The page was loaded over HTTPS, but requested an insecure stylesheet http://fonts.googleapis.com/css?family=Source+Sans+Pro:400&subset=latin-ext,latin. This request has been blocked; the content must be served over HTTPS

1:2639 Uncaught TypeError: row.app is not a function
at Object.success (1:2639)
at j (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at x (jquery.min.js:4)
at XMLHttpRequest.b (jquery.min.js:4)

Upvotes: 2

Views: 297

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

Given the error message it would appear that you've placed an typo of row.app somewhere in your code; possibly you've hit return by accident somewhere and split the line in two.

I'd suggest doing a global find in your project for row.app to find where the exact location of the error is.

Upvotes: 1

Related Questions