Why is my jQuery button handler not being fired?

Question

I have this jQuery to respond to a button being clicked and call a REST method:

$(document).ready(function() {
    $(\"#btnGetData\").click(function() {
             


        

Answer 1

In order to successfully reach the click event on your button, you first need to address the issues reported in your console (mainly resource 'integrity' error).

Let's begin by resolving the Subresource Integrity error:

Open up your command-line with openssl at the jQuery file location and run:

cat FILENAME.js | openssl dgst -sha384 -binary | openssl enc -base64 -A

where, FILENAME.js is the name of your jQuery file (either: jquery.min.js, in your case.)

or

make use of SRI Hash Generator (by providing the URL to your desired content delivery network (CDN) script and clicking on the HASH button) to generate a Subresource Integrity (SRI) hash.

As such, your expected output should be as follow:

Note: The integrity attribute enables browsers to check and ensure that your referenced resource file does not get loaded should its content differ from what it used to be at the time of the SRI hash generation.

You should then consider a graceful failover by hosting a copy of the jQuery file on your server for use should the content of your referenced CDN version have been altered.

Do so checking whether jQuery has been defined and reference your failover if it hasn't.

Remember to stick to this priority order when referencing your JavaScript (JS) files:

1. jQuery library,
2. Bootstrap JS file, then
3. your custom JS file, should there be.

Note: your JS references SHOULD preferably be located the end of your page content, before the close of the body tag ().

Once the fixes above applied, you will successfully get in your console: The button was clicked. when you click on the button (refer to the snippets below).

Your button:

SUBMIT

Your script:

$(document).ready(function() {
    $("#btnGetData").click(function() {
        console.log("The button was clicked.");
    }); // button click
}); // ready




window.onload = function() {
    var btnGetData = document.getElementById('btnGetData');
    btnGetData.addEventListener("click", function () {
        console.log("The button was clicked.");
    }); // button click
}; // ready

Both jQuery and pure JavaScript approach can now work and enable you reach your button while running an integrity test on your intended external resource (jQuery library) and this, with a graceful failover option, to proceed further.

Note: the jQuery approach was failing because the jQuery library wasn't declared owing to the fact that your SRI check failed with no available failover to still load a jQuery library. That accounts for neither The button was clicked. nor hey, boo-boo! being successfully reached for either a click event on the button and or a click event through, to your jQuery AJAX error function.

Proceeding further, use contentType: 'text/plain' in your jQuery AJAX call instead of contentType: 'application/json' since you are expecting pure HTML, not a JSON response and set withCredentials: false (unless your server must respond with the header) as additional property under xhrFields declaration (refer to the snippets below).

xhrFields: {
    withCredentials: false
},

In summary:

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