Clash Royale CLAN TAG#URR8PPP

<function> is not defined at HTMLButtonElement.onclick

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.

2 Answers
2

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:

UpdateStatus

document.ready()

UpdateStatus

document.ready()

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.

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?

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.

document.ready

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.

ready

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');
);
);


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.