Why is my jQuery button handler not being fired?
<p>I have this jQuery to respond to a button being clicked and call a REST method:</p>

<pre><code>$(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
</code></pre>

<p>It is not just that the REST method is not getting called - this handler is apparently not firing at all, as I see no alerts (neither "<em>The button was clicked.</em>" nor "<em>hey, boo-boo!</em>").</p>

<p>The script <em>is</em> being added - I can step through it, and the vars (such as "unitval") <em>are</em> being assigned the appropriate values.</p>

<p>So why does clicking the button, which is declared like so:</p>

<pre><code>&lt;button class="btn green smallbutton" id="btnGetData" name="btnGetData"&gt;SUBMIT&lt;/button&gt;
</code></pre>

<p>...do nothing?</p>

<p>This is the script that's being added (from View > Page Source):</p>

<pre><code>&lt;script&gt;$(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!');}});});});&lt;/script&gt;
</code></pre>

<p>This may not be pertinent (yet, anyway), but this is the REST method that I want to call from that button click:</p>

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

<h2>UPDATE</h2>

<p>This is a error dump from the console:</p>

<pre><code>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)
</code></pre>

<h2>UPDATE 2</h2>

<p>I am adding jQuery; I have this in my "head" section:</p>

<pre><code>&lt;script src='https://code.jquery.com/jquery-1.12.4.min.js' integrity='sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=' crossorigin='anonymous'&gt;&lt;/script&gt;
&lt;link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' /&gt;
&lt;script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'&gt;&lt;/script&gt;
</code></pre>

<h2>UPDATE 3</h2>

<p>Incorporating some of the suggestions here, this is my running page source (button still unresponsive):</p>

<pre><code>&lt;html style='margin-top:20;margin-left:60;margin-right:60; -webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);padding-left: 1px;padding-right: 1px;padding-bottom: 15px;'&gt;&lt;head&gt;&lt;title&gt;Available Reports for ABUELOS&lt;/title&gt;&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;&lt;link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' /&gt;&lt;script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'&gt;&lt;/script&gt;&lt;link href="~/Content/Site.css" rel="stylesheet" /&gt;&lt;![endif]--&gt;&lt;style&gt;body {padding-top: 20px;padding-bottom: 20px;background-color: white;}hr {border: 0;height: 1px;color: navy;background: #333;margin-left:-4;margin-right:-4;}table {font-family: arial, sans-serif;font-size: 13px;border-collapse: collapse;width: 100%;}td, th {border: 1px solid #dddddd;text-align: left;padding: 8px;}label { white-space: pre; }tr:nth-child(even) {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);padding-left: 1px;padding-right: 1px;padding-bottom: 15px;}.jumbotronjr {padding: 2px;margin-top: -12px;margin-bottom: -24px;font-size: 21px;font-weight: 200;color: inherit;background-color: white;}.titletext {font-size: 2.1em;color: darkgreen;font-family: Candara, Calibri, Cambria, serif;margin-left: -32px;}.titletextjr {font-size: 1.4em;color: darkgreen;font-family: Candara, Calibri, Cambria, serif;margin-left: -32px;}.cccsfont {font-size: 0.25em !important;font-family: 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;color: green;margin-top: -4px;}.bottommarginbreathingroom {margin-bottom: 2px;}.submitbtnmargins  {margin-top: -4px !important;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;margin-left: 12px;margin-bottom: 8px;padding: 16px;border:1px solid black;}.topright {margin-top: -8px;margin-right: 12px;margin-bottom: 8px;margin-left: -12px;padding: 16px;border:1px solid black;}.bottomleft {margin-left: 12px;padding: 16px;border:1px solid black;}.bottomright {margin-right: 12px;margin-left: -12px;padding: 16px;border:1px solid black;}.topright, .topleft {height: 408px; }.bottomright, .bottomleft {height: 408px; }.leftmargin12 {margin-left: 12px !important;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="jumbotronjr"&gt;&lt;div class="col-md-3" style="margin-top: 0.6cm"&gt;&lt;img src="http://www.proactusa.com/wp-content/themes/proact/images/pa_logo_notag.png" height="86" width="133" alt="PRO*ACT usa logo"&gt;&lt;/div&gt;&lt;div class="col-md-9"&gt;&lt;label class="titletext" style="margin-top: 0.2cm;"&gt;Customer Dashboard&lt;/label&gt;&lt;br/&gt;&lt;label class='titletextjr' style='margin-top: -2.2cm;'&gt;ABUELOS&lt;/label&gt;&lt;label&gt; for the week of August 21          &lt;/label&gt;&lt;input class="smalldatepicker" type="date" id="datepicker" name="daterangefrom" value="2016-08-21"&gt;&lt;/input&gt;&lt;label&gt; to &lt;/label&gt;&lt;input type="date" class="smalldatepicker" id="datepicker" name="daterangeto" value="2016-08-27"&gt;&lt;/input&gt;&lt;button type="button" class="btn green smallbutton" id="btnGetData" name="btnGetData"&gt;GO&lt;/button&gt;&lt;/div&gt;&lt;div class="row"&gt;&lt;div class="col-md-12"&gt;&lt;hr /&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="row"&gt;&lt;div class="col-md-12"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="row"&gt;&lt;div class="col-md-6"&gt;&lt;div class="topleft"&gt;&lt;h2 class="sectiontext"&gt;Top 10 Items Purchased&lt;/h2&gt;&lt;table&gt;&lt;tr&gt;&lt;th&gt;Item Code&lt;/th&gt;&lt;th&gt;Description&lt;/th&gt;&lt;th class="rightjustifytext"&gt;Qty&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;156100&lt;/td&gt;&lt;td&gt;ONIONS, YELLOW JUMBO 50#&lt;/td&gt;&lt;td class="rightjustifytext"&gt;362&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;226150&lt;/td&gt;&lt;td&gt;AVOCADOS, ABUELOS-HASS 70CT  23#&lt;/td&gt;&lt;td class="rightjustifytext"&gt;358&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;163150&lt;/td&gt;&lt;td&gt;PEPPERS, ANAHEIM GREEN 20#&lt;/td&gt;&lt;td class="rightjustifytext"&gt;282&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;176000&lt;/td&gt;&lt;td&gt;POTATOES, RED A 50#&lt;/td&gt;&lt;td class="rightjustifytext"&gt;266&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;188301&lt;/td&gt;&lt;td&gt;TOMATOES, ROMA HOT HOUSE 25#&lt;/td&gt;&lt;td class="rightjustifytext"&gt;230&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;167150&lt;/td&gt;&lt;td&gt;PEPPERS, POBLANO 18 - 20#&lt;/td&gt;&lt;td class="rightjustifytext"&gt;202&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;189300&lt;/td&gt;&lt;td&gt;TOMATILLOS, 30# NO HUSK&lt;/td&gt;&lt;td class="rightjustifytext"&gt;168&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;170150&lt;/td&gt;&lt;td&gt;PEPPERS, GRN CH 1&amp;1/9 BU (18-26#)&lt;/td&gt;&lt;td class="rightjustifytext"&gt;163&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;122500&lt;/td&gt;&lt;td&gt;LETTUCE, ICEBERG LINER 24 CT&lt;/td&gt;&lt;td class="rightjustifytext"&gt;133&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;127100&lt;/td&gt;&lt;td&gt;LETTUCE, ROMAINE 24 CT &lt;/td&gt;&lt;td class="rightjustifytext"&gt;129&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="col-md-6"&gt;&lt;div class="topright"&gt;&lt;h2 class="sectiontext"&gt;Pricing Exceptions - Weekly Recap&lt;/h2&gt;&lt;label class="redfont" style="font-size: 12px"&gt;Red denotes Contract Item Overages&lt;/label&gt;&lt;/br&gt;&lt;label style="font-size: 12px"&gt;For Weyand on the pricing week of - 7/31/2016&lt;/label&gt;&lt;table&gt;&lt;tr&gt;&lt;th&gt;PRO*ACT Member&lt;/th&gt;&lt;th class="rightjustifytext"&gt;Total Occurrences of Summary Items&lt;/th&gt;&lt;th class="rightjustifytext"&gt;Total Summary Exceptions&lt;/th&gt;&lt;th class="rightjustifytext"&gt;Total Percentage of Summary Exceptions&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="width:30%"&gt;Stern&lt;/td&gt;&lt;td style="width:23%" class="rightjustifytext"&gt;205&lt;/td&gt;&lt;td style="width:23%" class="rightjustifytext"&gt;2&lt;/td&gt;&lt;td style="width:24%" class="rightjustifytext"&gt;99.02%&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Hardies Dallas&lt;/td&gt;&lt;td class="rightjustifytext"&gt;1,597&lt;/td&gt;&lt;td class="rightjustifytext"&gt;0&lt;/td&gt;&lt;td class="rightjustifytext"&gt;100.00%&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Hardies South&lt;/td&gt;&lt;td class="rightjustifytext"&gt;612&lt;/td&gt;&lt;td class="rightjustifytext"&gt;1&lt;/td&gt;&lt;td class="rightjustifytext"&gt;99.84%&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Go Fresh&lt;/td&gt;&lt;td class="rightjustifytext"&gt;482&lt;/td&gt;&lt;td class="rightjustifytext"&gt;0&lt;/td&gt;&lt;td class="rightjustifytext"&gt;100.00%&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Segovias&lt;/td&gt;&lt;td class="rightjustifytext"&gt;1,360&lt;/td&gt;&lt;td class="rightjustifytext"&gt;2&lt;/td&gt;&lt;td class="rightjustifytext"&gt;99.85%&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Potato Spec&lt;/td&gt;&lt;td class="rightjustifytext"&gt;1,605&lt;/td&gt;&lt;td class="rightjustifytext"&gt;0&lt;/td&gt;&lt;td class="rightjustifytext"&gt;100.00%&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class="rightjustifytext bold"&gt;TOTAL&lt;/td&gt;&lt;td class="rightjustifytext bold"&gt;5,861&lt;/td&gt;&lt;td class="rightjustifytext bold"&gt;5&lt;/td&gt;&lt;td class="rightjustifytext bold"&gt;99.79%&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="row"&gt;&lt;div class="col-md-6"&gt;&lt;div class="bottomleft"&gt;&lt;h2 class="sectiontext"&gt;Forecasted Spend - $9,814.81&lt;/h2&gt;&lt;table&gt;&lt;tr&gt;&lt;th&gt;Item Code&lt;/th&gt;&lt;th class="rightjustifytext"&gt;Last Week's Usage&lt;/th&gt;&lt;th class="rightjustifytext"&gt;This Week's Price&lt;/th&gt;&lt;th class="rightjustifytext"&gt;Forecasted Spend&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;261650&lt;/td&gt;&lt;td class="rightjustifytext"&gt;49&lt;/td&gt;&lt;td class="rightjustifytext"&gt;3.14&lt;/td&gt;&lt;td class="rightjustifytext"&gt;153.86&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;231083&lt;/td&gt;&lt;td class="rightjustifytext"&gt;52&lt;/td&gt;&lt;td class="rightjustifytext"&gt;1.25&lt;/td&gt;&lt;td class="rightjustifytext"&gt;65.00&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;398980&lt;/td&gt;&lt;td class="rightjustifytext"&gt;46&lt;/td&gt;&lt;td class="rightjustifytext"&gt;4.95&lt;/td&gt;&lt;td class="rightjustifytext"&gt;227.70&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;351135&lt;/td&gt;&lt;td class="rightjustifytext"&gt;40&lt;/td&gt;&lt;td class="rightjustifytext"&gt;0.75&lt;/td&gt;&lt;td class="rightjustifytext"&gt;30.00&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;398036&lt;/td&gt;&lt;td class="rightjustifytext"&gt;42&lt;/td&gt;&lt;td class="rightjustifytext"&gt;3.00&lt;/td&gt;&lt;td class="rightjustifytext"&gt;126.00&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;208110&lt;/td&gt;&lt;td class="rightjustifytext"&gt;42&lt;/td&gt;&lt;td class="rightjustifytext"&gt;2.50&lt;/td&gt;&lt;td class="rightjustifytext"&gt;105.00&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;102800&lt;/td&gt;&lt;td class="rightjustifytext"&gt;1835&lt;/td&gt;&lt;td class="rightjustifytext"&gt;2.25&lt;/td&gt;&lt;td class="rightjustifytext"&gt;4,128.75&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;367050&lt;/td&gt;&lt;td class="rightjustifytext"&gt;1910&lt;/td&gt;&lt;td class="rightjustifytext"&gt;1.95&lt;/td&gt;&lt;td class="rightjustifytext"&gt;3,724.50&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;173100&lt;/td&gt;&lt;td class="rightjustifytext"&gt;66&lt;/td&gt;&lt;td class="rightjustifytext"&gt;19.00&lt;/td&gt;&lt;td class="rightjustifytext"&gt;1,254.00&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class="bold"&gt;TOTAL&lt;/td&gt;&lt;td class="bold rightjustifytext"&gt;4082&lt;/td&gt;&lt;td class="bold rightjustifytext"&gt;--&lt;/td&gt;&lt;td class="bold rightjustifytext"&gt;$9,814.81&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="col-md-6"&gt;&lt;div class="bottomright"&gt;&lt;h2 class="sectiontext"&gt;Delivery Performance&lt;/h2&gt;&lt;table&gt;&lt;tr&gt;&lt;th&gt;PRO*ACT Distributor&lt;/th&gt;&lt;th&gt;Restaurant Location&lt;/th&gt;&lt;th class="rightjustifytext"&gt;Avg Order Amount&lt;/th&gt;&lt;th class="rightjustifytext"&gt;Avg Package Count&lt;/th&gt;&lt;th class="rightjustifytext"&gt;Total Sales&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Sunrise FL&lt;/td&gt;&lt;td&gt;A1A ALEWORKS - #4405 - ST. AUGUSTINE&lt;/td&gt;&lt;td class="rightjustifytext"&gt;$475.78&lt;/td&gt;&lt;td class="rightjustifytext"&gt;28.50&lt;/td&gt;&lt;td class="rightjustifytext"&gt;$1,903.10&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Sunrise FL&lt;/td&gt;&lt;td&gt;RAGTIME TAVERN - #4404 - ATLANTIC BEACH&lt;/td&gt;&lt;td class="rightjustifytext"&gt;$221.46&lt;/td&gt;&lt;td class="rightjustifytext"&gt;17.50&lt;/td&gt;&lt;td class="rightjustifytext"&gt;$885.82&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Sunrise FL&lt;/td&gt;&lt;td&gt;SEVEN BRIDGES - #4403 - JACKSONVILLE&lt;/td&gt;&lt;td class="rightjustifytext"&gt;$367.49&lt;/td&gt;&lt;td class="rightjustifytext"&gt;22.67&lt;/td&gt;&lt;td class="rightjustifytext"&gt;$1,102.47&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;T&amp;T&lt;/td&gt;&lt;td&gt;BIG RIVER - #4201 - CHATTANOOGA&lt;/td&gt;&lt;td class="rightjustifytext"&gt;$396.06&lt;/td&gt;&lt;td class="rightjustifytext"&gt;22.83&lt;/td&gt;&lt;td class="rightjustifytext"&gt;$2,376.34&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;T&amp;T&lt;/td&gt;&lt;td&gt;BIG RIVER - #4205 - HAMILTON PL&lt;/td&gt;&lt;td class="rightjustifytext"&gt;$424.74&lt;/td&gt;&lt;td class="rightjustifytext"&gt;26.00&lt;/td&gt;&lt;td class="rightjustifytext"&gt;$1,698.95&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class="bold"&gt;TOTAL&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td class="bold rightjustifytext"&gt;3,770.42&lt;/td&gt;&lt;td class="bold rightjustifytext"&gt;23.50&lt;/td&gt;&lt;td class="bold rightjustifytext"&gt;$1,592.60&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;script&gt;window.onload = function(){var btnGetData = document.getElementById('btnGetData');btnGetData.addEventListener("click", 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")',data: { unit: unitval, begdate: begdateval, enddate: enddateval},contentType: 'application/json',cache: false,success: function (returneddata) {},error: function () {alert('hey, boo-boo!');}});});&lt;/script&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;
</code></pre>

<h2>UPDATE 4</h2>

<p>Just to try to verify that the problem is that I'm dynamically creating the html (and javascript) with C#, I added the script to the Index.cshtml file (which is the initial page and does not get modified at runtime):</p>

<pre><code>. . .
&lt;/style&gt;
    &lt;script&gt;
        $(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!');
                    }
                });
            });
        });

    &lt;/script&gt;
&lt;/head&gt;
. . .
</code></pre>

<p>Here is the method in the <em>LandingPageController : ApiController</em> class I'm trying to call with that AJAX:</p>

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

<p>Doing this, I <em>do</em> see the "It works" alert, and then the "hey, boo-boo!" too, from the javascript button click event handler. The breakpoint on the "_unit = unit;" is never reached. That's why I see the "boo-boo" message, I reckon, but I don't know <em>why</em> it's not getting reached.</p>

<h2>UPDATE 5</h2>

<p>The Url.Action args are still being transformed/translated wrong; in Chrome Dev Tools it shows:</p>

<pre><code>&lt;script&gt;
    $(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
&lt;/script&gt;
</code></pre>

<p>...so this:</p>

<pre><code>url: '@Url.Action("GetQuadrantData", "LandingPage")',
</code></pre>

<p>...is being seen in CDT as this:</p>

<pre><code>url: '/LandingPage/GetQuadrantData',
</code></pre>

<p>...and I am not reaching the breakpoint which is set at the last line below:</p>

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

<h2> UPDATE 6</h2>

<p>It was tripping over this line in the middle of the ajax call:</p>

<pre><code>console.log(url);
</code></pre>

<p>...but even when I stripped that out so that the jQuery became this (adding some random data values to the args/data):</p>

<pre><code>$(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
</code></pre>

<p>...I still get the "boo-boo" msg written to the console and the breakpoint in my controller is not hit, presumably because the incorrect url is being generated via the Url.Action() method.</p>

<h2>UPDATE 7</h2>

<p>If I kludgily/experimentally change the ajax call to this, replacing the Url.Action and data with the raw url:</p>

<pre><code>$(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
</code></pre>

<p>..I <em>do</em> reach the breakpoint in the Controller, but the url on the page does not change, and the data (html) on the page is not updated.</p>

<p>BTW, I did change the jquery reference to this, as nyedidikeke recommended:</p>

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

<h2>UPDATE 8</h2>

<p>With this (after moving the javascript references to the bottom, just above "" BTW):</p>

<pre><code>. . .
&lt;/style&gt;
    &lt;script&gt;
    $(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
    &lt;/script&gt;
&lt;/head&gt;
. . .
</code></pre>

<p>...I get this in Chrome Dev Tools' console:</p>

<pre><code>http://localhost:52194/LandingPage/GetQuadrantData?unit=ABUELOS&amp;begdate=2016-08-25&amp;enddate=2016-08-31&amp;_=1473095349071 Failed to load resource: the server responded with a status of 404 (Not Found)

hey, boo-boo!
</code></pre>

<h2>UPDATE 9</h2>

<p>This is my Register method in \App_Start\WebApiConfig.cs:</p>

<pre><code>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());
}
</code></pre>

<p>Is there anything wrong here?</p>