Pourquoi mon gestionnaire de bouton jQuery n'est-il pas lancé?

J'ai ce jQuery pour répondre à un bouton en cliquant et appeler une méthode 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 

Ce n'est pas seulement que la méthode REST n'est pas appelée – ce manipulateur n'est apparemment pas en train de tirer, car je ne vois aucune alerte (ni " The button is clicked " ni " hey, boo-boo! ").

Le script est en train d'être ajouté – je peux le franchir, et les vars (tels que "unitval") reçoivent les valeurs appropriées.

Alors pourquoi cliquez sur le bouton, qui est ainsi déclaré:

• Modifiez dynamiquement les options de la boîte de sélection en fonction de la sélection d'option précédente
• Obtenez Ajax variable à partir des boucles PHP foreach
• Ajax: Chargez le XML à partir de différents domaines?
• Comment transférer plusieurs variables vers PHP avec jQuery
• Événement de liaison aux éléments créés dynamiquement à l'aide de jQuery

 <button class="btn green smallbutton" id="btnGetData" name="btnGetData">SUBMIT</button> 

…ne fais rien?

C'est le script qui est ajouté (de View> Source de la page):

 <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> 

Cela peut ne pas être pertinent (pour le cas échéant), mais c'est la méthode REST que je souhaite appeler à partir de ce bouton, cliquez sur:

 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" ) }; } 

METTRE À JOUR

Il s'agit d'un vidage d'erreur depuis la console:

 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) 

MISE À JOUR 2

J'ajoute jQuery; Je l'ai dans ma section "tête":

 <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> 

MISE À JOUR 3

En incorporant certaines des suggestions ici, c'est ma source de page en cours d'exécution (le bouton ne répond toujours pas):

Actes disponibles pour 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; padding-bottom: 20px; background-color: white;} hr {border: 0; height: 1px; couleur: marine; arrière-plan: # 333; marge -left: -4; margin-right: -4;} table {font-family: arial, sans-serif; font-size: 13px; border-collapse: effondrement; largeur: 100%;} td, th {border: 1px solide #dddddd; text-align: left; padding: 8px;} label {white-space: pre; } Tr: nth-child (pair) {background-color: #ddddd;}. 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); padding-left: 1px ; Padding-right: 1px; padding-bottom: 15px;}. Jumbotronjr {padding: 2px; margin-top: -12px; margin-bottom: -24px; font-size: 21px; font-weight: 200; couleur: inherit ; Background-color: white;}. Titletext {font-size: 2.1em; couleur: darkgreen; font-family: Candara, Calibri, Cambria, serif; margin-left: -32px;}. Titletextjr {font-size: 1.4 Em; couleur: vert foncé; police-famille: Candara, Calibri, Cambria, serif; margin-left: -32px;}. Cccsfont {font-size: 0.25em! Important; police-famille: Calibri, Candara, Cambria, serif! Important;}. 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: vert; margin-top: -4px;}. Bottommarginbreathingroom {margin-bottom: 2px;}. Submitbtnmargins {margin-top: -4px! Important; margin-left: 8px! Important; margin-bottom: 8px;}. Btn.green {background-color: darkgreen; couleur: blanc;}. Redfont {couleur: rouge;}. Bold {font-weight: bold;}. Rightjustifytext {text-align: right;}. Topleft {margin-top: -8px; marge-gauche: 12px; margin-bottom: 8px; padding: 16px; bordure: 1px solide noir;} .primeure {margin-top: -8px; margin-right: 12px; margin-bottom: 8px; margin- Gauche: -12px; rembourrage: 16px; bordure: 1px solide noir;}. Basleft {margin-left: 12px; padding: 16px; bordure: 1px solide noir;} bottomright {margin-right: 12px; margin-left: – 12px; rembourrage: 16px; bordure: 1px solide noir;} .primeure, .topleft {hauteur: 408px; } .bottomright, .bottomleft {height: 408px; } .leftmargin12 {margin-left: 12px! Important;} Tableau de bord du client
ABUELOS pour la semaine du 21 août à GO

Top 10 Items PurchasedItem CodeDescriptionQty156100ONIONS, YELLOW JUMBO 50 # 362226150AVOCADOS, ABUELOS-HASS 70CT 23 # 358163150PEPPERS, ANAHEIM GREEN 20 # 282176000POTATOES, ROUGE A 50 # 266188301 TOMATES, ROMA HOT HOUSE 25 # 230167150PEPPERS, POBLANO 18 – 20 # 202189300TOMATILLOS, 30 # NO HUSK168170150PEPPERS , GRN CH 1 et 1/9 BU (18-26 #) 163122500LETTUCE, ICEBERG LINER 24 CT133127100LETTUCE, ROMAINE 24 CT 129 Exceptions de calcul – Répétition hebdomadaire désigne les dépassements d'articles contractuels Pour Weyand à la semaine de fixation des prix – 7/31 / 2016PRO ACT MembreTrois Occurrences des éléments sommairesTotal Exceptions sommairesTotal Pourcentage d'exceptions sommairesSurtern205299.02% Hardies Dallas1,5970100.00% Hardies South612199.84% Go Fresh4820100.00% Segovias1,360299.85% Spectacle de pommes de terre1,6050100.00% TOTAL5,861599.79% Dépenses prévues – 9 814,81 $ Code de l'articleL'utilisation de la semaine dernièreLes prix de cette semaine prévoyaient consacrer 261650493.14153.86231083521 .2565.00398980464.95227.70351135400.7530.00398036423.00126.00208110422.50105.0010280018352.254,128.7536705019101.953,724.501 731006619.001,254.00TOTAL4082 – $ 9,814.81Dédition de livraisonPRO ACT DistributeurRestaurant LocationAvg Commande AmountAvg PackageComteTotal SalesSunrise FLA1A ALEWORKS – # 4405 – ST. AUGUSTINE $ 475.7828.50 $ 1,903.10Sunrise FLRAGTIME TAVERN – # 4404 – ATLANTIC BEACH $ 221.4617.50 $ 885.82Sunrise FLSEVEN BRIDGES – # 4403 – JACKSONVILLE $ 367.4922.67 $ 1,102.47T & TBIG RIVER – # 4201 – CHATTANOOGA $ 396.0622.83 $ 2,376.34T & TBIG RIVER – # 4205 – HAMILTON PL $ 424.7426 .00 $ 1,698.95TOTAL3,770.4223.50 $ 1,592.60window.onload = function () {var btnGetData = document.getElementById ('btnGetData'); btnGetData.addEventListener ("clic", function () {alert ("Twerking …") ; 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")', données: {unit: unitval, begdate: begdateval, enddate: enddateval}, contentType: 'application / json', cache : False, succès: function (returneddata) {}, error: function () {alert ('hey, boo-boo!');}});});

MISE À JOUR 4

Juste pour essayer de vérifier que le problème est que je crée dynamiquement le html (et javascript) avec C #, j'ai ajouté le script au fichier Index.cshtml (qui est la page initiale et ne modifie pas au moment de l'exécution):

 . . . </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> . . . 

Voici la méthode dans LandingPageController: classe ApiController J'essaie d'appeler avec AJAX:

 [Route("{unit}/{begdate}/{enddate}")] public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate) { _unit = unit; . . . 

En faisant cela, je vois l'alerte "Il fonctionne", puis "hey, boo-boo!" Aussi, à partir du bouton javascript, cliquez sur le gestionnaire d'événements. Le point d'arrêt sur "_unit = unit;" N'est jamais atteint. C'est pourquoi je vois le message "boo-boo", je le sais, mais je ne sais pas pourquoi il n'est pas atteint.

MISE À JOUR 5

Les arguments d'Url.Action sont encore transformés / traduits à tort; Dans Chrome Dev Tools, il montre:

 <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> 

…donc ça:

 url: '@Url.Action("GetQuadrantData", "LandingPage")', 

… se voit dans CDT comme ceci:

 url: '/LandingPage/GetQuadrantData', 

… et je n'arrive pas au point d'arrêt qui est défini à la dernière ligne ci-dessous:

 [System.Web.Http.Route("{unit}/{begdate}/{enddate}")] [System.Web.Http.HttpGet] public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate) { _unit = unit; 

MISE À JOUR 6

Il se trouvait sur cette ligne au milieu de l'appel ajax:

 console.log(url); 

… mais même lorsque je l'ai retiré de sorte que jQuery soit devenu (en ajoutant des valeurs de données aléatoires aux args / data):

 $(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 

… Je reçois toujours le msg "boo-boo" écrit sur la console et le point d'arrêt dans mon contrôleur n'est pas touché, vraisemblablement parce que l'URL incorrecte est générée via la méthode Url.Action ().

MISE À JOUR 7

Si je modifie expérimentalement l'appel ajax, remplacez Url.Action et les données par l'URL brute:

 $(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 

.. J'atteins le point d'arrêt dans le contrôleur, mais l'url sur la page ne change pas, et les données (html) sur la page ne sont pas mises à jour.

BTW, j'ai changé la référence jquery à ceci, comme nyedidikeke recommandé:

 <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> 

MISE À JOUR 8

Avec ceci (après avoir déplacé les références javascript vers le bas, juste au-dessus 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> . . . 

… Je l'ai dans la console 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! 

MISE À JOUR 9

C'est ma méthode de Registre dans \ 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()); } 

Y a-t-il quelque chose qui ne va pas ici?

• JQuery. Affectez JSON en conséquence à une variable
• Cross-Domain Get CSV file
• Comment créer un tableau en lisant un fichier texte en javascript
• Ajax jqXHR.status == 0 correction d'erreur
• Masquer / Afficher <sélectionner> en fonction de l'autre <sélectionner>

 <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> 

 <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> 

 <button class="btn btn-success btn-sm" id="btnGetData" name="btnGetData">SUBMIT</button> 

 <!-- 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 

 xhrFields: { withCredentials: false }, 

 $.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!'); } }); 

 <button class="btn green smallbutton" id="btnGetData" name="btnGetData">SUBMIT</button> 

 <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> 

 <button type="submit" class="btn green smallbutton" id="btnGetData" name="btnGetData">SUBMIT</button> 

 <script src='https://code.jquery.com/jquery-1.12.4.min.js' integrity='sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=' crossorigin='anonymous'></script> 

 <script src='https://code.jquery.com/jquery-1.12.4.min.js'></script> 

 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 }