is not defined at HTMLButtonElement.onclick

Question

Good day,

I have a button

<button id="4" onclick="UpdateStatus(this.id)" class="btn btn-default" type="button">update</button>

that is calling an ajax function

   <script>
    $(document).ready(function () {            

        function UpdateStatus(Id) {                
            $.ajax({
                type: "Post",//or POST
                url: '/myController/UpdateSomething?Id=' + Id,
                //  (or whatever your url is)
                data: { data1: var1 },               
                success: function (responsedata) {
                    // process on data
                    alert("got response as " + "'" + responsedata + "'");
                }
            });
        }
    }
</script>

My problem is that I receive an error in my view:

UpdateStatus is not defined at HTMLButtonElement.onclick

what am I doing wrong? thanks

Update

When I try to run this code

  @section scripts
  {   
   <script>
    $(document).ready(function () {
    //Carga datos del curso
    console.log("asdf");   
});</script>}

I do not get the message in my console.

Shyju · Answer 1 · 2018-08-12T19:30:38.810

The problem is, You are defining your method definition inside the document.ready event of jQuery. When the button markup was parsed and rendered, the JavaScript method was not defined, hence you are getting the error.

The jquery ready method gets executed a little later when the document is ready (parsing and rendering of the HTML is already done, DOM is safe to be accessed). By this point, the HTML has been already rendered.

Define it outside it.

<script>

function UpdateStatus(Id) {
   alert('UpdateStatus called');                
}
$(function () {

});

</script>

Another option is to use unobutrusive JavaScript. So instead of wiring up a click event handler to the button markup, you will wire up later, when document ready is fired.

<button id="4" class="btn btn-default" type="button">update</button>

and wire up the click event

$(function () {
    $("#4").click(function (e) {
        e.preventDefault();
        alert('User clicked');
    });
});

Check your browser console and see if you have any script errors — Shyju, Aug 12 '18 at 20:46

score 2 · Answer 2 · answered Aug 13 '18 at 01:56

This is definitely a scoping issue, because UpdateStatus defined within the scope of document.ready() function. You can declare UpdateStatus as variable outside document.ready() block and declare a function inside it:

var UpdateStatus;

$(document).ready(function () {
    UpdateStatus = function () {
        var buttonId = $('#4').attr('id');

        $.ajax({
            type: "POST",
            url: '/myController/UpdateSomething',
            data: { Id: buttonId, ... }, // setting parameters            
            success: function (responsedata) {
                // process on data
                alert("got response as '" + responsedata + "'");
            }
        });
    }
});

Additionally, based from standard event registration model and separation of concerns, I suggest you to use unobtrusive JavaScript by retrieving button ID like this:

$(document).ready(function () {
    $('#4').click(function() {
        var buttonId = $(this).attr('id');

        $.ajax({
            type: "POST",
            url: '/myController/UpdateSomething',
            data: { Id: buttonId, ... }, // setting parameters            
            success: function (responsedata) {
                // process on data
                alert("got response as '" + responsedata + "'");
            }
        });
    });
});

Because you're using AJAX POST, no need to use query string parameters in URL like url: '/myController/UpdateSomething?Id=' + Id.

Related issues:

Uncaught ReferenceError: (function) is not defined at HTMLButtonElement.onclick

Why is inline event handler attributes a bad idea in modern semantic HTML?

score 2 · Accepted Answer · answered Apr 21 '19 at 15:11

<script>
    function F(user_id) {
    var user_id = user_id;
    $.ajax({
        type:"GET",
        url:"http://127.0.0.1:8000/preference",
        data: {'user_id':user_id},
        async: false,
        success: function (result) {
            console.log(result)
        }
    });

}
</script>

the first line is automatically not to display. It is the script's type and src attributes. I used the "text/javascript" and "http://code.jquery.com/jquery-latest.js". This question I found 2 solutions. One is as the above. To divide the script into two parts. Second is to move the function to under the button tag. It is really a scope question. But I didn't find the solution's logic. But I solve it.

is not defined at HTMLButtonElement.onclick

3 Answers3