locked
How to debug - javascript functions in index.cshtml not being called by functions in _layout.cshtml RRS feed

  • Question

  • User-2147270405 posted

    While experienced at MVC, I'm fairly weak at jQuery and javascript. SO, I'm not sure how to go about debugging why this process is not working. For the moment, I believe the syntax is correct, as I don't see any format errors and most of the script has worked recently. CLEARLY I broke it somehow, but don't know how. Oh and I have tried following online instructions on how to enable JavaScript debugging, but it simply blows right past my breakpoints

    Here's a summary of the file structure with what I think are the pertinent code snips included. Specifically, what is failing is that EnableRun() is NOT getting called from the DropdownDiv onchange any more, and it's not continuing on to displayjobtable(), and I'll be darned if I can figure out why. If I comment out the call to EnableRun(), it continues to displayjobtable() just fine.

    So, I guess my first question is "how do it debug javascript in VS 2019? "  I could probably figure it out if I knew how to do that well.

    Index.cshtml

       <div id="buttons" class="panel no-print container-fluid">
            <button id="btnCancel" type="button" class="btn btn-danger disabled" onclick="CancelJob()">
                <i class="fa fa-trash-o" aria-hidden="true"></i>&nbsp;Cancel Test&nbsp;
            </button>
            <button id="btnPrint" type="button" class="btn btn-primary disabled" onclick="location.href='@Url.Action("PrintResults","Home")'">
                <i class="fa fa-print" aria-hidden="true"></i>&nbsp;Print Results&nbsp;
            </button>
            <button id="btnRun" type="button" class="btn btn-success disabled" onclick="RunJob()">
                <i class="fa fa-exchange" aria-hidden="true"></i>&nbsp;Run Test&nbsp;
            </button>
    
    
        </div>
    </div>
    
    <script>
        // BUTTONS
        function EnableRun() {
            alert("Enable Run");
            $("#btnRun").removeClass("disabled");
        }
    
        function DisableRun() {
            $("#btnRun").addClass("disabled");
        }
    
    
        function EnablePrint() {
            $("#btnPrint").removeClass("disabled");
        }
    
        function DisablePrint() {
            $("#btnPrint").addClass("disabled");
        }
    
    
        // Process Job
        function RunJob() {
            // do not process if process button is disabled
            if ($("#btnRun").hasClass("disabled")) {
                alert("Button Disabled");
                return;
            }
            else {
                $.ajax({
                    url: '@Url.Action("ProcessJob", "Home")',
                    type: 'GET',
                    data: { "BatchID": $('#JobBatchList_BatchListItems').val() },
                    dataType: 'html',
                    success: function (result) {
                        $('#_jobsTable').html(result);
                    },
                    error: function (result) {
                        $('#_jobsTable').html("An error occured while loading Jobs: " + result.status + " " + result.statusText);
                    }
    
                });
    
            }
        }
        function CancelJob() {
        // do not process if cancel button is disabled
        if ($("#btnCancel").hasClass("disabled")) {
            alert("Button Disabled");
            return;
        }
        else {
            $.ajax({
                url: '@Url.Action("CancelJob", "Home")',
                type: 'GET',
                data: { "BatchID": $('#JobBatchList_BatchListItems').val() },
                dataType: 'html',
                success: function (result) {
                    $('#_jobsTable').html(result);
                },
                error: function (result) {
                    $('#_jobsTable').html("An error occured while loading Jobs: " + result.status + " " + result.statusText);
                }
    
            });
    
        }
    </script>

    _Layout.cshtml

        <environment names="Development">
            <script src="~/lib/jquery/dist/jquery.js"></script>
            <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
            <script src="~/js/site.js" asp-append-version="true"></script>
        </environment>
        <script type="text/javascript">
            //
            // Manage select Checkboxes
            $('body').on('click', '#ckboxall', function () {
                $('.ckbox').prop('checked', this.checked);
            });
    
            $('body').on('click', '.ckbox', function () {
                if ($('.ckbox').length == $('.ckbox:checked').length) {
                    $('#ckboxall').prop('checked', true);
                } else {
                    $("#ckboxall").prop('checked', false);
                }
    
            });
            //
            // React to Dropdown selection
            $('#DropdownDiv').on('change', '.dropdown', function () {
                alert("Here");
                EnableRun();
                displayjobtable();
    
            });
    
    
     
            function displayjobtable() {
                $.ajax({
                    url: '@Url.Action("DisplayJobs", "Home")',
                    type: 'GET',
                    data: { "BatchID": $('#JobBatchList_BatchListItems').val() },
                    dataType: 'html',
                    success: function (result) {
                        $('#_jobsTable').html(result);
                    },
                    error: function (result) {
                        $('#_jobsTable').html("An error occured while loading Jobs: " + result.status + " " + result.statusText);
                    }
    
                });
            }
    
            //$(document).ready(function ($) {
            //    alert('Jquery Working');
            //    setInterval
            //});
        </script>
         @RenderSection("Scripts", required: false)

    Monday, May 31, 2021 9:40 PM

Answers

  • User-939850651 posted

    Hi bregia,

    Here's a summary of the file structure with what I think are the pertinent code snips included. Specifically, what is failing is that EnableRun() is NOT getting called from the DropdownDiv onchange any more, and it's not continuing on to displayjobtable(), and I'll be darned if I can figure out why. If I comment out the call to EnableRun(), it continues to displayjobtable() just fine.

    After a simple test, I found a small problem in the code, which I think is the cause of the problem.

    The function CancelJob() did not close properly, it is missing a "} ".

    function CancelJob() {
                // do not process if cancel button is disabled
                if ($("#btnCancel").hasClass("disabled")) {
                    alert("Button Disabled");
                    return;
                }
                else {
                    $.ajax({
                        url: '@Url.Action("CancelJob", "Home")',
                        type: 'GET',
                        data: { "BatchID": $('#JobBatchList_BatchListItems').val() },
                        dataType: 'html',
                        success: function (result) {
                            $('#_jobsTable').html(result);
                        },
                        error: function (result) {
                            $('#_jobsTable').html("An error occured while loading Jobs: " + result.status + " " + result.statusText);
                        }
    
                    });
                }
            }

    Hope this can help.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 1, 2021 3:48 AM