Javascript errors using JQuery in multiple places of the script

0

This is my first post, so be gentle if I violate norms...

Two days ago, I went in to my VS project for one of our web apps. It is an ASP.CORE 3.0 app and has been in use for over 6 months. I need to adjust a function in the script. After making a small change to a function, I could no longer run the project. After turning on script debugging, I could see the javascript throwing syntax errors on the second line of code (using a library from a third party vendor). I removed the reference to that code and now it errors on another line. Commented that one out, now errors on a different line...just a standard statement assigning a function with the => operator. I tried literally dozens of hacks to see if I could isolate the problem. No matter what I do, I am getting all sorts of syntax errors from the jQuery background. I also pulled down the production version of the page and put that back in the project to be sure something hadn't changed. I'm totally baffled.

I even created a brand new project and put next to nothing in, just a blank page trying to using a single javascript function...still errors.

This is the page. Compiler output below.


<html>

<head>
    <meta charset="UTF-8">
    <title>Cottrell ERP Query</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!--<script src="js/jquery-3.2.1.slim.min.js"></script>-->
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/dbr-js/dbr-6.5.2.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="box-heading">
            <div class="row">
                <div class="col-12">
                    <div class="text-center user-head">
                        You are <b>not authenticated.</b>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="box-register">
        <div class="row">
            <div class="col-12">
                <div class="text-center user-register">
                    <button type="button" class="btn btn-success user-register">Register</button>
                </div>
            </div>
        </div>
    </div>
    <div class="box-content">
        <div class="row">
            <div class="col-12">
                <div class="text-center">
                    <h2>ERP Query</h2>
                </div>
            </div>
        </div>
        <div class="action-buttons">
            <div class="row">
                <div class="col-6">
                    <button type="button" class="btn btn-success scan-on">Scan</button>
                </div>
                <div id="div-video-container">
                    <button type="button" class="btn btn-danger scan-close">Cancel</button>
                    <video class="dbrScanner-video" playsinline="true"></video>
                </div>
                <div class="col-6">
                    <div class="text-right">
                        <button type="button" class="btn btn-danger clear-data" data-toggle="modal" data-target="#clear-list">Clear</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="box-resuls"><div class="row"><div class="col-12 col-sm-12"></div></div></div>
        <div class="box-resuls">
            <div id="general-message-div">

            </div>
        </div>
        <div class="box-resuls ">
            <div class="results">

            </div>
        </div>
    </div>
    </div>
    </div>

    <div id="confirm-list" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Are you sure?</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="confirm-que">Are you sure you want to clear the list?</p>
                </div>`enter code here`
                <div class="modal-footer">
                    <button type="button" class="btn btn-success send-action-modal">Yes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                </div>
            </div>
        </div>
    </div>

    <div id="clear-list" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Are you sure?</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to clear the list?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success clear-modal">Clear</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div id="register-list" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Register Phone</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Enter User Name and press send.</p>
                    <p>An email link will be sent to register this phone.  You MUST receive and click the link from this device to register it.</p>
                    <input type="text" class="text-center" id="user-name-to-register-text" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success register-user-name">Send</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var apiUrl = '/api/values';
        BarcodeReader.licenseKey = 'f0068NQAAAIbBzRWany3F7jNy3ImpWnXBCvHanH/J2MOkga1nq/acR45gEAhz5/uBNZxBPZfrB6G3Mlj7K50u3B4BL75ES+A=';
        //BarcodeReader.licenseKey = 'f0068NQAAAGEjSoU5UNQViyOBVw9RY8KOcGmCnO0nyIGWfcQUSt9ztyCvFb9vE0Yaiwtle54Wr5aGeb2O0tUw+cjUxsCPT04='
        let scanner = new BarcodeReader.Scanner({
            htmlElement: document.getElementById('div-video-container'),
            onFrameRead: result => { },
            onNewCodeRead: (txt, result) => {
                if ($('#div-video-container').is(":visible")) {
                    $('#div-video-container').hide();
                }
                setResultHeader('Processing...');
                setResultData('...');
                txt = txt.substring(txt.lastIndexOf('/') + 1);
                apiCall('S', txt);
            }
        });

        apiCall('I', null);

        $(function () {
            $(document).on('click', '.actions', function () {
                if ($(this).attr('data-confirmation')) {

                    $('.confirm-que').html($(this).attr('data-confirmation'));
                    $('.send-action-modal').attr('data-action-id', $(this).attr('data-action-id'))
                    $('#confirm-list').modal('show');
                } else {
                    apiCall('A', $(this).attr('data-action-id'));
                }
            })
            $('.user-register').on('click', function () {
                $('#register-list').modal('show');
            })
            $('.register-cancel').on('click', function () {
                $('#register-list').modal('hide');
            })
            $('.register-user-name').on('click', function () {
                $('#register-list').modal('hide');
                apiCall('P', $('#user-name-to-register-text').val());
            })
            $('.send-action-modal').on('click', function () {
                $('#confirm-list').modal('hide');
                apiCall('A', $(this).attr('data-action-id'));
            })
            $('#div-video-container').hide();
            $('.scan-on').on('click', function () {
                if ($('#div-video-container').is(":hidden")) {
                    $('#div-video-container').show();
                    scanner.open();
                    $(this).hide();
                }
            })
            $('.scan-close').on('click', closeScanner);
            $('.clear-modal').on('click', function () {
                apiCall('C', '');
            })
            if (!getCookie('GUID')) {
                var uid = uuidv4();
                setCookie('GUID', uid, 99);
            } else {
                setCookie('GUID', getCookie('GUID'), 99);
            }
            //if (getCookie('username')) {
            //    $('.user-head').html('Hello <b>' + getCookie('username') + '</b>')
            //}
            //if (getCookie('results')) {
            //    setResultData(html(getCookie('results')));
            //    if ($('#no-data').is(":visible")) {
            //        $('.clear-data').prop('disabled', true);
            //    } else {
            //        $('.clear-data').prop('disabled', false);
            //    }
            //} else {
            $('.clear-data').prop('disabled', true);
            //}

        })

        function closeScanner() {
            if ($('#div-video-container').is(":visible")) {
                $('#div-video-container').hide();
            }
            scanner.close();
            if ($('.scan-on').is(":hidden")) { $('.scan-on').show(); }

        }

        function apiCall(action, scan_GUID) {
            html = '<div class="general-message"><div class="row"><div class="col-12 col-sm-12"><p>Working...</p></div></div></div>';
            $('#general-message-div').html(html);
            $.get(apiUrl, {
                action: action,
                scan: scan_GUID,
                guid: getCookie('GUID')
            }, ApiReturn)
        }

        function ApiReturn(data, status) {
            setResultHeader('Results');
            if (status == 'success') {
                if (data) {
                    if (data.action == 'A') {
                        $('#confirm-list').modal('hide');
                    }
                    if (!data.isAnonymousUser) {
                        $('.user-head').html('Hello <b>' + data.userName + '</b>');
                        //setCookie('username', data.userName, 2);
                        $('.user-register').hide();
                    }
                    else {
                        $('.user-head').html('You are <b>not authenticated.</b>');
                        $('.user-register').show();
                    }

                    html = '</div>';
                    if (data.generalStatusMessage) {
                        html = '<div class="general-message"><div class="row"><div class="col-12 col-sm-12"><p>' + data.generalStatusMessage + '</p></div></div></div>';
                    }
                    $('#general-message-div').html(html);

                    if (data.action == 'C') {
                        //$('.clear-data').prop('disabled', true);
                        //html = '<div class="row-result" id="no-data">There are no results available.</div>';
                        //$('.results').html('<div class="row-result" id="no-data">There are no results available.</div>');
                        //setCookie('results', html, 2);
                        $('#clear-list').modal('hide');
                    }
                    html = "";
                    if (data.results && data.results.length > 0) {
                        $.each(data.results, function (index, value) {
                            html += '<div class="row-result"><div class="row"><div class="col-12 col-sm-8">';
                            html += '<p>' + value.erpType + '</p>'
                            $.each(value.descriptions, function (index_de, value_de) {
                                html += '<p>' + value_de + '</p>';
                            });
                            html += '</div>';
                            if (value.erpActions) {
                                html += '<div class="col-12 col-sm-4">';
                                $.each(value.erpActions, function (index_action, value_action) {
                                    html += '<button type="button" class="btn btn-success actions" data-action-id="' + value_action.actionID + '" data-confirmation="' + value_action.confirmationQuestion + '" data-action-name="' + value_action.actionName + '">' + value_action.actionDescription + '</button>';
                                });
                            }
                            html += '</div></div></div></div>';
                        });
                        $('.clear-data').prop('disabled', false);
                    } else {
                        $('.clear-data').prop('disabled', true);
                        html += '<div class="row-result" id="no-data">There are no results available.</div>';
                    }
                    setResultData(html);
                    //setCookie('results', html, 2);

                    if (data.action == 'S') {
                        closeScanner();
                    }
                }
            }
        }

        function setResultHeader(resultHeader) {
            $('#result-header').html('<div class="text-center" id="result-header"><h3>' + resultHeader + '</h3></div>');
        }

        function setResultData(resultData) {
            $('.results').html('<div class="row-result">' + resultData + '</div>');
        }

        function setCookie(name, value, days) {
            var expires = "";
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                expires = "; expires=" + date.toUTCString();
            }
            document.cookie = name + "=" + (value || "") + expires + "; path=/";
            document.cookie = name + "=" + (value || "") + expires + "; path=/; domain=.cottrelltrailers.com";
        }

        function getCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }

        function uuidv4() {
            return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
                (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
            );
        }

    </script>
</body>
</html>

Console output: 'iisexpress.exe' (CoreCLR: clrhost): Loaded 'C:\Program Files\dotnet\shared\Microsoft.NETCore.App\3.0.0\System.Net.WebSockets.dll'. Skipped loading symbols. Module is optimized and the debugger option 'Just My Code' is enabled. 'iexplore.exe' (Script): Loaded 'Script Code (Windows Internet Explorer)'. 'iisexpress.exe' (CoreCLR: clrhost): Loaded 'C:\Program Files\dotnet\shared\Microsoft.NETCore.App\3.0.0\System.Security.Principal.Windows.dll'. Skipped loading symbols. Module is optimized and the debugger option 'Just My Code' is enabled. Exception was thrown at line 2, column 10991 in https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js 0x800a139e - JavaScript runtime error: SyntaxError Exception was thrown at line 2, column 11214 in https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js 0x800a139e - JavaScript runtime error: SyntaxError 'iexplore.exe' (Script): Loaded 'Sourcemap (https://localhost:44382/js/bootstrap.min.js)'. Unhandled exception at line 12, column 58 in https://localhost:44382/js/dbr-js/dbr-6.5.2.min.js 0x800a138f - JavaScript runtime error: Unable to get property 'src' of undefined or null reference

javascript
jquery
asked on Stack Overflow Mar 20, 2020 by JSmith191

0 Answers

Nobody has answered this question yet.


User contributions licensed under CC BY-SA 3.0