I have a problem in JAVASCRIPT since I make an external file with a function that when pressing the option of a menu redirects me to a page, when calling the function in the onclick event I make reference to my function that is in the external JS but it marks me the browser that is not defined, my JS file is called eventosJS.js that I include but the function is not detected
$(document).ready(function() {
function myFunction(url) {
$.ajax({
url: url,
type: 'POST',
beforeSend: function() {
$("#muestraSeccion").html("<center><img src='../Images/cargando1.gif' height='50px' width='50px'/><br/>Un momento por favor...</center>");
$("#muestraInicio").hide();
},
success: function(response) {
$("#muestraSeccion").html(response).hide().fadeIn('fast');
},
error: function(xhr, error) {
if (xhr.status === 0) {
return ($("#mensajeError").html("<center>No conectado.\nPor favor verifica tu conexión a la red.</center>"));
} else if (xhr.status == 404) {
return ($("#muestraSeccion").html("<center><img src='../Images/error404.png' width='500px' height='350px' class='img img-responsive'/></center>").hide().fadeIn('slow'));
} else if (xhr.status == 500) {
return ($("#muestraSeccion").html("<center><img src='../Images/error500.png' width='500px' height='350px' class='img img-responsive'/></center>").hide().fadeIn('slow'));
} else if (error === 'parsererror') {
return ($("#mensajeError").html('<center>Falló la conversión JSON.</center>'));
} else if (error === 'timeout') {
return ($("#mensajeError").html('<center>Error time out.</center>'));
} else if (error === 'abort') {
return ($("#mensajeError").html('<center>Peticion Ajax cancelada.</center>'));;
} else {
return ($("#mensajeError").html('<center>Uncaught Error.\n' + xhr.responseText + '</center>'));
}
}
//complete: function () { $("#divCargandoFormAdmin").fadeOut('slow'); }
});
};
});<html>
<head>
<title>@PageData("Title")</title>
@RenderSection("head", required:=False)
<link href="../Content/misEstilos.css" rel="stylesheet" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="../Scripts/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../Scripts/moment.js"></script>
<script src="../Scripts/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.js"></script>
<script src="../Scripts/eventosJs.js"></script>
</head>
<body>
<div class="container-fluid" style="padding-top: 10px">
<!-- Static navbar -->
<nav class="navbar navbar-default" style="padding:5px">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<span style="padding: 5px 5px 5px 5px; border-radius: 5px; box-shadow: 0 0 5px 3px orange;">
<img src="../Images/logof.png" width="60px" height="30px" style="margin-top: -10px;" /></a></span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#" onclick="myFunction('registro.html')"><span class="glyphicon glyphicon-plus"></span> Registrar Factura</a>
</li>
<li class="active"><a href="#" onclick="myFunction('Almacen.html')"><span class="glyphicon glyphicon-plus"></span> Registrar Series</a>
</li>
</ul>
<!-- opciones parte izquierda-->
<ul class="nav navbar-nav navbar-right">
<li><a href="../cerrarSesion">Cerrar sesión <span class="glyphicon glyphicon-off"></span></a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<div class="container-fluid" id="maximoPagina">
@RenderBody()
</div>
</body>
</html>
If you make use of the Developer Tools of the browser (which you access with F12) you could validate (using the network tab) if the .js is being resolved correctly.
What I would recommend is that you define
~/in this way the reference to the .js is made from the root of the site and you will not have problems to include it when the page loads.
When you define a function, do not place it inside jquery's ready(), this would only apply to the assignment of events in tags. Or if you define
where the onclick of
liyou delete it there if it goes inside the ready() that in newer versions you only have to definethere is no lack you put the document or the ready()
Taking into account that what you are using is a function, it is not necessary to include it in the method
ready(), this is more appropriate to execute something or add a listener, among many other uses, but it is less interesting to define a function that will be called with an inline event.You are actually defining a function within another function.
A solution then is: