paginas - funcion load javascript
¿Por qué mi manejador de botones jQuery no está siendo activado? (5)
Tengo este jQuery para responder a un botón al que se hace clic y llamar a un método REST:
$(document).ready(function() {
$("#btnGetData").click(function() {
alert("The button was clicked.");
var unitval = _unit;
var begdateval = _beginDate;
var enddateval = _endDate;
var model = JSON.stringify({ unit: unitval, begdate: begdateval, enddate: enddateval });
$.ajax({
type: ''GET'',
url: ''@Url.Action("GetQuadrantData", "LandingPage")'',
data: { unit: unitval, begdate: begdateval, enddate: enddateval},
contentType: ''application/json'',
cache: false,
success: function (returneddata) {
},
error: function () {
alert(''hey, boo-boo!'');
}
});
}); // button click
}); // ready
No se trata simplemente de que no se llame al método REST, aparentemente este controlador no se activa en absoluto, ya que no veo alertas (ni " Se hizo clic en el botón " ni "¡ Hola, abucheo! ").
Se está agregando el guión: puedo pasar por él y los vars (como "unitval") tienen asignados los valores apropiados.
Entonces, ¿por qué hacer clic en el botón, que se declara así:
<button class="btn green smallbutton" id="btnGetData" name="btnGetData">SUBMIT</button>
...¿hacer nada?
Esta es la secuencia de comandos que se agrega (desde Ver> Origen de la página):
<script>$(document).ready(function() {$("#btnGetData").click(function() {alert("The button was clicked.");var unitval
= ABUELOS;var begdateval = 2016-08-21;var enddateval = 2016-08-27;var model = JSON.stringify({ unit: unitval, begdate:
begdateval, enddate: enddateval });$.ajax({type: ''GET'',url: ''@Url.Action("GetQuadrantData", "LandingPage")'',data: {
unit: unitval, begdate: begdateval, enddate: enddateval},contentType: ''application/json'',cache: false,success:
function (returneddata) {},error: function () {alert(''hey, boo-boo!'');}});});});</script>
Esto puede no ser pertinente (aún, de todos modos), pero este es el método REST que deseo llamar desde ese botón, haga clic en:
public class LandingPageController : ApiController
. . .
[Route("{unit}/{begdate}/{enddate}")]
public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate)
{
_unit = unit;
_beginDate = begdate;
_endDate = enddate;
string beginningHtml = GetBeginningHTML(); // This could be called from any page to reuse the same "header"
string top10ItemsPurchasedHtml = GetTop10ItemsPurchasedHTML();
string pricingExceptionsHtml = GetPricingExceptionsHTML();
string forecastedSpendHtml = GetForecastedSpendHTML();
string deliveryPerformanceHtml = GetDeliveryPerformanceHTML();
string endingHtml = GetEndingHTML();
String HtmlToDisplay = string.Format("{0}{1}{2}{3}{4}{5}",
beginningHtml,
top10ItemsPurchasedHtml,
pricingExceptionsHtml,
forecastedSpendHtml,
deliveryPerformanceHtml,
endingHtml);
return new HttpResponseMessage()
{
Content = new StringContent(
HtmlToDisplay,
Encoding.UTF8,
"text/html"
)
};
}
ACTUALIZAR
Este es un volcado de error desde la consola:
Failed to find a valid digest in the ''integrity'' attribute for resource ''https://code.jquery.com/jquery-1.12.4.min.js'' with computed SHA-256 integrity ''ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=''. The resource has been blocked.
Uncaught Error: Bootstrap''s JavaScript requires jQuery
Failed to load resource: the server responded with a status of 404 (Not Found)
Uncaught Error: Bootstrap''s JavaScript requires jQuery
Uncaught ReferenceError: $ is not defined
Failed to load resource: the server responded with a status of 404 (Not Found)
ACTUALIZACIÓN 2
Estoy agregando jQuery; Tengo esto en mi sección de "cabeza":
<script src=''https://code.jquery.com/jquery-1.12.4.min.js'' integrity=''sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk='' crossorigin=''anonymous''></script>
<link href=''https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'' rel=''stylesheet'' />
<script src=''https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js''></script>
ACTUALIZACIÓN 3
Al incorporar algunas de las sugerencias aquí, esta es la fuente de mi página en ejecución (botón que aún no responde):
Informes disponibles para ABUELOShttps: //maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css ''rel ='' stylesheet ''/>https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/ js / bootstrap.min.js ''> body {padding-top: 20px; relleno-bottom: 20px; background-color: blanco;} hr {border: 0; height: 1px; color: navy; background: # 333; margin -izquierda: -4; margen-derecha: -4;} tabla {font-family: arial, sans-serif; font-size: 13px; border-collapse: colapso; ancho: 100%;} td, th {border: 1px sólido #dddddd; text-align: left; padding: 8px;} label {white-space: pre; } tr: nth-child (par) {background-color: #dddddd;}. body-content {-webkit-box-shadow: -1px 0 5px 0 # 000000; -webkit-box-shadow: -1px 0 5px 0 rgba (0, 0, 0, .25); box-shadow: -1px 0 5px 0 # 000000; box-shadow: -1px 0 5px 0 rgba (0, 0, 0, .5); relleno-izquierda: 1px ; relleno-derecho: 1px; relleno-inferior: 15px;}. jumbotronjr {relleno: 2px; margen-superior: -12px; margen-inferior: -24px; tamaño de letra: 21px; font-weight: 200; color: inherit ; color de fondo: blanco;}. titletext {font-size: 2.1em; color: darkgreen; font-family: Candara, Calibri, Cambria, serif; margen-izquierdo: -32px;}. titletextjr {font-size: 1.4 em; color: verde oscuro; familia de fuentes: Candara, Calibri, Cambria, serif; margen-izquierda: -32px;}. cccsfont {font-size: 0.25em! important; familia de fuentes: Calibri, Candara, Cambria, serif! importante;}. smalldatepicker {font-size: 12px; font-weight: 100;}. smallbutton {font-size: 11px; font-weight: 100; margin-left: 16;}. addltopmargin {margin-top: 8px; } .sectiontext {font-size: 1em; font-weight: bold; font-family: Candara, Calibri, Cambria, serif; colo r: verde; margin-top: -4px;}. bottommarginbreathingroom {margin-bottom: 2px;}. submitbtnmargins {margin-top: -4px! importante; margin-left: 8px! important; margin-bottom: 8px;}. btn.green {background-color: darkgreen; color: white;}. redfont {color: red;}, bold {font-weight: bold;}. rightjustifytext {text-align: right;}. topleft {margin-top: -8px; margen-izquierdo: 12px; margen-inferior: 8px; relleno: 16px; borde: 1px sólido negro;}. Topright {margen-superior: -8px; margen-derecho: 12px; margen-inferior: 8px; margen- left: -12px; relleno: 16px; borde: 1px negro sólido;}. bottomleft {margen-izquierdo: 12px; relleno: 16px; borde: 1px negro sólido;}. bottomright {margen-derecho: 12px; margen-izquierdo: - 12px; relleno: 16px; borde: 1px negro sólido;}. Aight, .topleft {height: 408px; } .bottomright, .bottomleft {height: 408px; } .leftmargin12 {margin-left: 12px! important;} Customer Dashboard
ABUELOS para la semana del 21 de agosto para IR
ACTUALIZACIÓN 4
Solo para tratar de verificar que el problema es que estoy creando dinámicamente el html (y javascript) con C #, agregué el script al archivo Index.cshtml (que es la página inicial y no se modifica en el tiempo de ejecución):
. . .
</style>
<script>
$(function () {
var btnGetData = document.getElementById(''btnGetData'');
btnGetData.addEventListener("click", function () {
alert("It works");
var unitval = ''Abuelos'';
var begdateval = ''2016-08-07'';
var enddateval = ''2016-08-13'';
$.ajax({
type: ''GET'',
url: ''@Url.Action("GetQuadrantData", "LandingPage")'',
data: { unit: unitval, begdate: begdateval, enddate: enddateval },
contentType: ''application/json'',
cache: false,
success: function (returneddata) {
},
error: function () {
alert(''hey, boo-boo!'');
}
});
});
});
</script>
</head>
. . .
Aquí está el método en LandingPageController: clase de ApiController que estoy tratando de llamar con ese AJAX:
[Route("{unit}/{begdate}/{enddate}")]
public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate)
{
_unit = unit;
. . .
Al hacer esto, veo la alerta "Funciona", y luego el "¡Hola, abucheo!" también, desde el botón javascript, haga clic en controlador de eventos. El punto de interrupción en la "unidad = unidad" nunca se alcanza Es por eso que veo el mensaje de "boo-boo", creo, pero no sé por qué no se está llegando.
ACTUALIZACIÓN 5
Los argumentos Url.Action aún se están transformando / traduciendo incorrectamente; en las herramientas de desarrollo de Chrome muestra:
<script>
$(document).ready(function () {
$("#btnGetData").click(function () {
$.ajax({
type: ''GET'',
url: ''/LandingPage/GetQuadrantData'',
console.log(url);
data: {unit: unitval, begdate: begdateval, enddate: enddateval},
contentType: ''text/plain'',
cache: false,
xhrFields: {
withCredentials: false
},
success: function(returneddata) {
alert(''Successful: '' + returneddata);
},
error: function() {
alert(''hey, boo-boo!'');
}
}); // ajax
}); // button click
}); // ready
</script>
...así que esto:
url: ''@Url.Action("GetQuadrantData", "LandingPage")'',
... se ve en CDT como esto:
url: ''/LandingPage/GetQuadrantData'',
... y no estoy llegando al punto de interrupción que se establece en la última línea a continuación:
[System.Web.Http.Route("{unit}/{begdate}/{enddate}")]
[System.Web.Http.HttpGet]
public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate)
{
_unit = unit;
ACTUALIZACIÓN 6
Estaba tropezando con esta línea en medio de la llamada ajax:
console.log(url);
... pero incluso cuando lo eliminé para que jQuery se convirtiera en esto (agregando algunos valores de datos aleatorios a los argumentos / datos):
$(document).ready(function () {
$("#btnGetData").click(function () {
$.ajax({
type: ''GET'',
url: ''@Url.Action("GetQuadrantData", "LandingPage")'',
data: {unit: ''ABUELOS'', begdate: ''2016-08-25'', enddate: ''2016-08-31''},
contentType: ''text/plain'',
cache: false,
xhrFields: {
withCredentials: false
},
success: function(returneddata) {
console.log(''Successful: '' + returneddata);
},
error: function() {
console.log(''hey, boo-boo!'');
}
}); // ajax
}); // button click
}); // ready
... Sigo recibiendo el mensaje "boo-boo" escrito en la consola y el punto de corte en mi controlador no se ve afectado, presumiblemente porque la URL incorrecta se está generando a través del método Url.Action ().
ACTUALIZACIÓN 7
Si modifico / experimentalmente, modifico la llamada ajax a esto, reemplazando la Url.Acción y los datos con la URL en bruto:
$(document).ready(function () {
$("#btnGetData").click(function () {
$.ajax({
type: ''GET'',
url: ''http://localhost:52194/api/ABUELOS/2016-08-21/2016-08-27'',
contentType: ''text/plain'',
cache: false,
xhrFields: {
withCredentials: false
},
success: function(returneddata) {
console.log(''Successful: '' + returneddata);
},
error: function() {
console.log(''hey, boo-boo!'');
}
}); // ajax
}); // button click
}); // ready
Llego al punto de interrupción en el Controlador, pero la URL de la página no cambia y los datos (html) en la página no se actualizan.
Por cierto, cambié la referencia de jquery a esto, ya que nyedidikeke me recomendó:
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
ACTUALIZACIÓN 8
Con esto (después de mover las referencias javascript a la parte inferior, justo arriba de "" BTW):
. . .
</style>
<script>
$(document).ready(function () {
$("#btnGetData").click(function () {
$.ajax({
type: ''GET'',
url: ''@Url.Action("GetQuadrantData", "LandingPage")'',
data: { unit: ''ABUELOS'', begdate: ''2016-08-25'', enddate: ''2016-08-31'' },
contentType: ''text/plain'',
cache: false,
xhrFields: {
withCredentials: false
},
success: function(returneddata) {
console.log(''Successful: '' + returneddata);
},
error: function() {
console.log(''hey, boo-boo!'');
}
}); // ajax
}); // button click
}); // ready
</script>
</head>
. . .
... Lo consigo en la consola de Chrome Dev Tools:
http://localhost:52194/LandingPage/GetQuadrantData?unit=ABUELOS&begdate=2016-08-25&enddate=2016-08-31&_=1473095349071 Failed to load resource: the server responded with a status of 404 (Not Found)
hey, boo-boo!
ACTUALIZACIÓN 9
Este es mi método de registro en / App_Start / WebApiConfig.cs:
public static void Register(HttpConfiguration config)
{
config.Routes.Clear(); // added this 9/2/2016 at suggestion from http://www.codemag.com/article/1601031
config.SuppressDefaultHostAuthentication();
config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
// I don''t know if this is where this should go (from http://stackoverflow.com/questions/34626483/how-to-pass-datatable-via-frombody-to-web-api-post-method-c)
config.Formatters.Add(new DataTableMediaTypeFormatter());
config.Formatters.Add(new GenericProduceUsageListMediaTypeFormatter());
}
¿Hay algo mal aquí?
Amigo, una pregunta: ¿estás seguro de que incluiste la biblioteca jquery correctamente?
Intenté esto y funcionó
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnGetData").click(function () {
alert("The button was clicked.");
}); // button click
}); // ready
</script>
Tu código funciona para mí: http://codepen.io/danielvaughn/pen/jrNoko
¿Estás seguro de que estás importando jQuery correctamente? De lo contrario, ejecute algunas funciones jquery en su consola para asegurarse de que funciona.
<button class="btn green smallbutton" id="btnGetData" name="btnGetData">SUBMIT</button>
Agregar un tipo de botón como este si envía un formulario:
<button type="submit" class="btn green smallbutton" id="btnGetData" name="btnGetData">SUBMIT</button>
ACTUALIZAR
Desde su "Actualización 2", cambie la primera línea a esta:
<script src=''https://code.jquery.com/jquery-1.12.4.min.js'' integrity=''sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk='' crossorigin=''anonymous''></script>
a esto:
<script src=''https://code.jquery.com/jquery-1.12.4.min.js''></script>
no es necesario que verifiquemos la integridad del archivo jquery aquí, por lo que al eliminar eso podrá ejecutar jquery sin ningún error. Gracias
Para alcanzar con éxito el evento de clic en su botón, primero debe abordar los problemas informados en su consola (principalmente error de ''integrity'' recursos).
Comencemos resolviendo el error de integridad del Subresource:
Abre tu línea de comando con openssl en la ubicación del archivo jQuery y ejecuta:
gato FILENAME.js | openssl dgst -sha384 -binary | openssl enc -base64 -A
donde, FILENAME.js es el nombre de su archivo jQuery (ya sea: jquery.min.js, en su caso).
o
haga uso de SRI Hash Generator (proporcionando el URL al script de red de entrega de contenido deseado (CDN) y haciendo clic en el botón HASH) para generar un hash de Integridad de Subresource (SRI) .
Como tal, su resultado esperado debería ser el siguiente:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
crossorigin="anonymous"></script>
Nota: El atributo de integridad permite que los navegadores verifiquen y se aseguren de que su archivo de recursos referenciado no se cargue si su contenido difiere de lo que solía ser en el momento de la generación de hash SRI.
A continuación, debe considerar una migración tras error elegante alojando una copia del archivo jQuery en su servidor para usarlo si el contenido de la versión de CDN referenciada ha sido alterado.
Compruebe si jQuery se ha definido y haga referencia a su failover si no lo ha hecho.
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
crossorigin="anonymous"></script>
<script>window.jQuery || document.write(''<script src="path/to/jquery-1.12.4.min.js"><//script>'')</script>
Recuerde cumplir con este orden de prioridad al hacer referencia a sus archivos JavaScript (JS):
- biblioteca jQuery,
- Bootstrap JS archivo, entonces
- su archivo JS personalizado, debería haberlo.
Nota: sus referencias JS DEBERÍAN estar preferiblemente ubicadas al final del contenido de su página, antes del cierre de la etiqueta corporal ( </body> ).
Una vez aplicadas las soluciones anteriores, accederá con éxito a su consola: The button was clicked. cuando haces clic en el botón (consulta los fragmentos a continuación).
Su botón:
<button class="btn btn-success btn-sm" id="btnGetData" name="btnGetData">SUBMIT</button>
Tu guión:
<!-- jQuery approach -->
$(document).ready(function() {
$("#btnGetData").click(function() {
console.log("The button was clicked.");
}); // button click
}); // ready
<!-- or -->
<!-- Pure JavaScript approach -->
window.onload = function() {
var btnGetData = document.getElementById(''btnGetData'');
btnGetData.addEventListener("click", function () {
console.log("The button was clicked.");
}); // button click
}; // ready
Tanto el enfoque jQuery como el JavaScript puro ahora pueden funcionar y le permiten llegar a su botón mientras ejecuta una prueba de integridad en su recurso externo deseado (biblioteca jQuery) y esto, con una elegante opción de conmutación por error, para avanzar.
Nota: el enfoque jQuery estaba fallando porque la biblioteca jQuery no se declaró debido al hecho de que su verificación SRI falló sin una conmutación por error disponible para seguir cargando una biblioteca jQuery. Eso no responde ni a The button was clicked. ni hey, boo-boo! ser alcanzado con éxito para un evento de clic en el botón y / o un evento de clic hasta su función de error jQuery AJAX.
contentType: ''text/plain'' uso, use contentType: ''text/plain'' en su jQuery AJAX call en lugar de contentType: ''application/json'' ya que espera HTML puro , no una respuesta JSON y establece withCredentials: false (a menos que su servidor responda con el encabezado ) como propiedad adicional bajo la declaración xhrFields (consulte los fragmentos a continuación).
xhrFields: {
withCredentials: false
},
En resumen:
$.ajax({
type: ''GET'',
url: ''@Url.Action("GetQuadrantData", "LandingPage")'',
// Should you face any escape character challenge, use ''url'' with @Html.Raw()
//url: ''@Html.Raw(@Url.Action("GetQuadrantData", "LandingPage"))'',
console.log(url);
data: {unit: unitval, begdate: begdateval, enddate: enddateval},
contentType: ''text/plain'',
cache: false,
xhrFields: {
withCredentials: false
},
success: function(returneddata) {
console.log(''Successful: '' + returneddata);
},
error: function() {
console.log(''hey, boo-boo!'');
}
});
Pruébelo, simplemente usa JS vainilla para configurar su oyente y luego se encarga del resto con jQuery.
En la página de prueba que hice, estaba recibiendo mi alerta bien.
window.onload = function() {
var btnGetData = document.getElementById(''btnGetData'')
btnGetData.addEventListener("click", function() {
alert("Twerking...");
var unitval = _unit;
var begdateval = _beginDate;
var enddateval = _endDate;
var model = JSON.stringify({
unit: unitval,
begdate: begdateval,
enddate: enddateval
});
$.ajax({
type: ''GET'',
url: ''@Url.Action("GetQuadrantData", "LandingPage")'',
data: {
unit: unitval,
begdate: begdateval,
enddate: enddateval
},
contentType: ''application/json'',
cache: false,
success: function(returneddata) {},
error: function() {
alert(''hey, boo-boo!'');
}
});
}); // button click
}