Javascript 运行时错误：“函数”未定义

Question

It says my function is undefined yet it is clearly defined below the body of the program's content.

    <button type="button" class="btn btn-primary" data-dismiss="modal" id="CmdBranchEditOk" onclick="CmdBranchEditOk_OnClick()">

    @*Add*@
function CmdBranchAdd_OnClick() {
    alert('Hi');
    @*$('#BranchEdit').modal({
        show: true,
        backdrop: false
    });

    document.getElementById('BranchEdit-BranchCode').value = "";
    document.getElementById('BranchEdit-Branch').value = "";
    document.getElementById('BranchEdit-CompanyID').value = "";*@

}

at the moment, the main body of the function has been commented out to test if it can connect to the function. but when run and pressed, it return a javarscript runtime error stating that the function in the button in undefined.

Edit #1: Sorry, copied wrong line of code xD Forgive me

<button style="float:left" id="CmdAddBranch" type="submit" class="btn btn-default" onclick="CmdBranchAdd_OnClick()">Add A Branch</button>

while I'm at it, here are the loaded scripts - the function was originally supposed to call for a modal but It should just alert for now. But it's doesn't.

<script src="~/js/jquery.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.js"></script>


<script src="~/wijmo/controls/wijmo.min.js" type="text/javascript"></script>
<script src="~/wijmo/controls/wijmo.input.min.js"></script>
<script src="~/wijmo/controls/wijmo.grid.min.js" type="text/javascript">    </script>
<script src="~/wijmo/controls/wijmo.chart.min.js"></script>
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>

<link href="~/wijmo/styles/wijmo.min.css" rel="stylesheet" />

Edit #2: Here's the entire code block to see if it has any problems. @{ ViewBag.Title = "Branch"; }

            <!-- Script Linkings -->
            <script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
            <script src="~/lib/bootstrap/js/bootstrap.js"></script>
            <script src="~/wijmo/controls/wijmo.min.js" type="text/javascript"></script>
            <script src="~/wijmo/controls/wijmo.input.min.js"></script>
            <script src="~/wijmo/controls/wijmo.grid.min.js" type="text/javascript"></script>
            <script src="~/wijmo/controls/wijmo.chart.min.js"></script>
            <link href="~/wijmo/styles/wijmo.min.css" rel="stylesheet" />
            @*<link href="/css/bootstrap.min.css" rel="stylesheet" /> --- this S.O.B will make things white. Big "NO, NO" *@


            @*List*@
            <div id="DivEvents">
                <div class="container">

                    <div class="row">
                        <div class="col-lg-11">
                            <br /><br /><br />
                            <h2 style="margin-bottom:5px; margin-top:5px;">Branches</h2>
                            <button style="float:left" id="CmdAddBranch" type="submit" class="btn btn-default" onclick="CmdBranchAdd_OnClick()">Add A Branch</button>
                        </div>
                    </div>

                    <br />

                    <div class="row">
                        <div class="col-lg-12">
                            <div id="BranchGrid" class="grid"></div>
                        </div>
                    </div>

                    <br />

                    <div class="row">
                        <div class="btn-group col-md-7" id="naviagtionPageEvent">
                            <button type="button" class="btn btn-default" id="btnMoveToFirstPageEvent">
                                <span class="glyphicon glyphicon-fast-backward"></span>
                            </button>
                            <button type="button" class="btn btn-default" id="btnMoveToPreviousPageEvent">
                                <span class="glyphicon glyphicon-step-backward"></span>
                            </button>
                            <button type="button" class="btn btn-default" disabled style="width:100px" id="btnCurrentPageEvent"></button>
                            <button type="button" class="btn btn-default" id="btnMoveToNextPageEvent">
                                <span class="glyphicon glyphicon-step-forward"></span>
                            </button>
                            <button type="button" class="btn btn-default" id="btnMoveToLastPageEvent">
                                <span class="glyphicon glyphicon-fast-forward"></span>
                            </button>
                        </div>
                    </div>

                </div>
            </div>

            @*Edit Detail*@
            <div class="modal fade" id="BranchEdit">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title">Branch Edit</h4>
                        </div>
                        <div class="modal-body">
                            <dl class="dl-horizontal">
                                <dt>Branch Code</dt>
                                <dd>
                                    <input class="form-control" id="BranchEdit-BranchCode" type="text" />
                                </dd>
                                <dt>Branch</dt>
                                <dd>
                                    <input class="form-control" id="BranchEdit-Branch" type="text" />
                                </dd>
                                <dt>Company ID</dt>
                                <dd>
                                    <input class="form-control" id="BranchEdit-CompanyID" type="text" />
                                </dd>
                            </dl>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal" id="CmdBranchEditOk" onclick="CmdBranchEditOk_OnClick()">
                                Ok
                            </button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal" id="CmdBranchEditCancel">
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            @*Loading*@
            <div class="modal fade" id="loading" tabindex="-1" role="dialog" aria-labelledby="Loading..." aria-hidden="true">
                <div class="modal-dialog" style="width: 220px;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Loading...</h4>
                        </div>
                        <div class="modal-body">
                            <img src="/img/progress_bar.gif" />
                        </div>
                    </div>
                </div>
            </div>

            @*Module*@
            <script type="text/javascript">
                var Branches;

                var BranchGrid;

                var btnFirstPageEvent;
                var btnPreviousPageEvent;
                var btnNextPageEvent;
                var btnLastPageEvent;
                var btnCurrentPageEvent;

                @*Edit*@
                function CmdBranchEdit_OnClick() {
                    Branches.editItem(Branches.currentItem);

                    $('#BranchEdit').modal({
                        show: true,
                        backdrop: false
                    });

                    var Branch = Branches.currentEditItem;

                    document.getElementById('BranchEdit-BranchCode').value = Branch.BranchCode ? Branch.BranchCode : '';
                    document.getElementById('BranchEdit-Branch').value = Branch.Branch ? Branch.Branch : '';
                    document.getElementById('BranchEdit-CompanyID').value = Branch.CompanyID ? Branch.CompanyID : '';

                }

                @*Add*@
                $(document).ready(function(){
                    function CmdBranchAdd_OnClick() {
                        alert('Hi');
                        @*$('#BranchEdit').modal({
                            show: true,
                            backdrop: false
                        });

                        document.getElementById('BranchEdit-BranchCode').value = "";
                        document.getElementById('BranchEdit-Branch').value = "";
                        document.getElementById('BranchEdit-CompanyID').value = "";*@

                    }   
                }

                @*Delete*@
                    function CmdBranchDelete_OnClick() {

                        Branches.editItem(Branches.currentItem);

                        var Id = Branches.currentEditItem.Id;
                        var BranchDescription = Branches.currentEditItem.Branch;

                        if (confirm("Delete " + BranchDescription + "?") == true) {
                            $.ajax({
                                type: "DELETE",
                                url: "/api/DeleteEvent/" + Id,
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                statusCode: {
                                    200: function () {
                                        window.location.reload();
                                    },
                                    404: function () {
                                        alert("Not found");
                                    },
                                    400: function () {
                                        alert("Bad request");
                                    }
                                }
                            });
                        }
                    }

                    @*Save Edit*@
                    function CmdBranchEditOk_OnClick() {
                        if (confirm("Save Event?") == true) {

                            var Branch = new Object();

                            Branch.BranchCode = document.getElementById('BranchEdit-BranchCode').value;
                            Branch.Branch = document.getElementById('BranchEdit-Branch').value;
                            Branch.CompanyID = document.getElementById('BranchEdit-CompanyID').value;

                            var data = JSON.stringify(Event);

                            // Add New
                            if (Branch.Id == 0) {
                                $.ajax({
                                    type: "POST",
                                    url: "/api/AddEvent",
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json",
                                    data: data,
                                    success: function (id) {
                                        if (id > 0) {
                                            window.location.reload();
                                        } else {
                                            alert("Not added");
                                        }
                                    }
                                });

                                // Edit
                            } else {
                                $.ajax({
                                    type: "PUT",
                                    url: "/api/UpdateEvent/" + Branch.Id,
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json",
                                    data: data,
                                    statusCode: {
                                        200: function () {
                                            window.location.reload();
                                        },
                                        404: function () {
                                            alert("Not found");
                                        },
                                        400: function () {
                                            alert("Bad request");
                                        }
                                    }
                                });
                            }
                        }
                    }

                    @*List Functions*@
                    function GetBranches() {
                        var Branches = new wijmo.collections.ObservableArray();
                        $('#loading').modal('show');
                        $.ajax({
                            url: '/api/Event',
                            cache: false,
                            type: 'GET',
                            contentType: 'application/json; charset=utf-8',
                            data: {},
                            success: function (Results) {
                                $('#loading').modal('hide');
                                if (Results.length > 0) {
                                    for (i = 0; i < Results.length; i++) {
                                        Branches.push({
                                            EditId: "<button class='btn btn-primary btn-xs' data-toggle='modal' id='CmdBranchEvent' onclick='CmdBranchEdit_OnClick()'>Edit</button>",
                                            DeleteId: "<button class='btn btn-danger btn-xs' data-toggle='modal' id='CmdBranchEvent' onclick='CmdBranchDelete_OnClick()'>Delete</button>",
                                            Id: Results[i]["Id"],
                                            BranchCode: Results[i]["BranchCode"],
                                            BranchDescription: Results[i]["Branch"],
                                            CompanyID: Results[i]["CompanyID"],
                                        });
                                    }
                                } else {
                                    alert("No data.");
                                }
                            }
                        }).fail(
                            function (xhr, textStatus, err) {
                                alert(err);
                            }
                        );
                        return Branches;
                    }

                    @*Delete*@
                    function DeleteBranch(Id) {
                        $.ajax({
                            type: "DELETE",
                            url: "/api/DeleteEvent/" + Id,
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            data: { Id: BranchId },
                            success: function (response) {
                                alert("Branch Deleted.");
                                window.location.reload();
                            },
                            failure: function (response) {
                                alert("Error - " + response.d);
                            },
                            error: function (e) { }
                        });
                        window.location.reload();
                    }
                    function UpdateNavigateButtonsEvent() {
                        if (Branches.pageSize <= 0) {
                            document.getElementById('naviagtionPageEvent').style.display = 'none';
                            return;
                        }
                        document.getElementById('naviagtionPageEvent').style.display = 'block';
                        if (Branches.pageIndex === 0) {
                            btnFirstPageEvent.setAttribute('disabled', 'disabled');
                            btnPreviousPageEvent.setAttribute('disabled', 'disabled');
                            btnNextPageEvent.removeAttribute('disabled');
                            btnLastPageEvent.removeAttribute('disabled');
                        }
                        else if (Branches.pageIndex === (Branches.pageCount - 1)) {
                            btnFirstPageEvent.removeAttribute('disabled');
                            btnPreviousPageEvent.removeAttribute('disabled');
                            btnLastPageEvent.setAttribute('disabled', 'disabled');
                            btnNextPageEvent.setAttribute('disabled', 'disabled');
                        }
                        else {
                            btnFirstPageEvent.removeAttribute('disabled');
                            btnPreviousPageEvent.removeAttribute('disabled');
                            btnNextPageEvent.removeAttribute('disabled');
                            btnLastPageEvent.removeAttribute('disabled');
                        }
                        btnCurrentPageEvent.innerHTML = (Branches.pageIndex + 1) + ' / ' + Branches.pageCount;
                    }

                    $(document).ready(function () {
                        btnFirstPageEvent = document.getElementById('btnMoveToFirstPageEvent');
                        btnPreviousPageEvent = document.getElementById('btnMoveToPreviousPageEvent');
                        btnNextPageEvent = document.getElementById('btnMoveToNextPageEvent');
                        btnLastPageEvent = document.getElementById('btnMoveToLastPageEvent');
                        btnCurrentPageEvent = document.getElementById('btnCurrentPageEvent');

                        Branches = new wijmo.collections.CollectionView(GetBranches());

                        BranchGrid = new wijmo.grid.FlexGrid('#BranchGrid');

                        BranchGrid.initialize({
                            columns: [
                                        {
                                            "header": "Edit",
                                            "binding": "EditId",
                                            "width": 60,
                                            "allowSorting": false,
                                            "isContentHtml": true
                                        },
                                        {
                                            "header": "Delete",
                                            "binding": "DeleteId",
                                            "width": 60,
                                            "allowSorting": false,
                                            "isContentHtml": true
                                        },
                                        {
                                            "header": "Branch Code",
                                            "binding": "BranchCode",
                                            "allowSorting": false,
                                            "width": "4*"
                                        },
                                        {
                                            "header": "Company ID",
                                            "binding": "CompanyID",
                                            "allowSorting": false,
                                            "width": 80
                                        },
                                        {
                                            "header": "Branch",
                                            "binding": "BranchDescription",
                                            "allowSorting": false,
                                            "width": "4*"
                                        },
                            ],
                            autoGenerateColumns: false,
                            itemsSource: Brances,
                            isReadOnly: true,
                            selectionMode: wijmo.grid.SelectionMode.Row
                        });

                        BranchGrid.trackChanges = true;

                        Branches.pageSize = 15;

                    });

                    UpdateNavigateButtonsEvent();

                    // Page Button Events
                    btnFirstPageEvent.addEventListener('click', function () {
                        Branches.moveToFirstPage();
                        UpdateNavigateButtonsEvent();
                    });
                    btnPreviousPageEvent.addEventListener('click', function () {
                        Branches.moveToPreviousPage();
                        UpdateNavigateButtonsEvent();
                    });
                    btnNextPageEvent.addEventListener('click', function () {
                        Branches.moveToNextPage();
                        UpdateNavigateButtonsEvent();
                    });
                    btnLastPageEvent.addEventListener('click', function () {
                        Branches.moveToLastPage();
                        UpdateNavigateButtonsEvent();
                    });

                });
            </script>

Tried Rao's suggestion - still nothing :( This is starting to be a pain in the ass..)

Answer 1

You have code for a method called

CmdBranchAdd_OnClick

But the element references a function called

CmdBranchEdit_OnClick

Answer 2

move this line

<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>

to the top of other js files.

Also you have two jquery.js file included. Only choose one which is the best fixing your application.

<script src="~/js/jquery.js"></script>
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>

Answer 3

Few Suggestions:

Try wrapping your function inside as below

$(document).ready(function(){
      function CmdBranchAdd_OnClick() {
         alert('Hi');
      }    
});

then as @user86745458 said remove either jquery.js or jquery-latest.min.js reference and keep your js files at the top of all other links!!

Try changing type of button from submit to just button .