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

Try this out, it simply uses vanilla JS to setup your listener then handles the rest with jQuery.

On the test page I made, I was getting my alert just fine.

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
}

Answer 2

Add button type like this if you are submitting a form:

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

UPDATE

From your "Update 2" change first line this :

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

to this:

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

we do not need to check integrity of jquery file here so by removing that you will be able to run jquery without any errors. Thanks

Answer 3

Your code works for me: http://codepen.io/danielvaughn/pen/jrNoko

Are you sure that you're properly importing jQuery? If not, run some jquery functions in your console to make sure it works.

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

Answer 4

Dude, one question: are you sure you included the jquery library correctly?

I tried this and it worked

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

Answer 5

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:

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

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.

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

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 (</body>).

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:

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

Your script:

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

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