onClick in an

Question

I've worked by way through a lot of the questions on the site that are asking the same thing, but I can't

I get the following error in the console window from an onClick event in my code:

1 Uncaught ReferenceError: SetName is not defined

From this line:

$("#lstResults").append("<li><a href='#' onClick='SetName()'>" + data.d[i].title + "</" + " a>" + "</" + "li>");

I've worked my way through Uncaught ReferenceError: $ is not defined? to try and track down the problem and a couple of others without any luck.

I've tried:

Making sure my CSS is above my .js files.
Making sure that I'm referencing jquery
Making sure that my other .js files are listed after jquery
Changing the reference to jquery to http or https or stripping it off and leaving them as //code.
Made sure that my two functions are all within $(function () {
Moved the function I'm trying to call with onClick is above the function that I'm in.

I'm really stuck so any help would be appreciated!

Code:

<head runat="server">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link href="CSS/jquery-ui-1.12.1.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="CSS/basics.css" rel="stylesheet" />
    <link href="CSS/fonts.css" rel="stylesheet" />
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <script>
        $(function () { // this will be called when the DOM is ready

            function SetName() {

                alert("I hit this!");
            }


            function findAll(str) {

                if (str.length > 2) {

                    var param = { "searchString": str };
                    console.log(str.length);
                    console.log(param);
                    $.ajax({

                        type: 'POST',
                        url: 'adminRightsWebForm.aspx/SearchAppJ',
                        data: JSON.stringify(param),
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        async: false,
                        success: function (data) {
                            $("#lstResults").empty();
                            for (i = 0; i < data.d.length; i++) {
                                alert(data.d[i].title);
                                $("#lstResults").append("<li><a href='#' onClick='SetName()'>" + data.d[i].title + "</" + " a>" + "</"
+ "li>");
                            }

                            if (data.d.length == 0)
                                $("#lstResults").empty();
                        },
                        error: function (request, status, error) {
                            alert(request.responseText);
                        }
                    });
                }
                else
                    $("#lstResults").empty();
            }
        });
    </script> </head>

create a fiddle for this. that will be easy to debug the issue — Kaushik, Oct 19 '16 at 09:27
`Uncaught ReferenceError: $ is not defined` !== `Uncaught ReferenceError: SetName is not defined` — Andreas, Oct 19 '16 at 09:29
Hi @Andreas yeah sorry Uncaught ReferenceError: SetName is not defined is what I'm getting — hlh3406, Oct 19 '16 at 09:31

score 8 · Accepted Answer · answered Oct 19 '16 at 09:29

This is actually a scope problem.

The SetName() function is defined inside the $(function(){/* ... */}) anonymous function, but is not reachable at the window level, which the onClick implicitly refers to.

Moving the function above the jQuery stuff should fix this.

onClick in an

1 Answers1