Ajax Call inside click event is not working

Question

I am trying to make an Ajax call work in a click event but it is giving me an error:

$.ajax is not a function

My call:

module.exports.doaction = (Identifier) => {
    $(Identifier).modal('show');
    $(`${Identifier} a`).click((event) => {
        $.ajax({
            type: 'POST',
            url: '/action',
            data: event.target.id
        });
    });
};

What I am missing?

On my main page the script has been included:

<script src="code.jquery.com/jquery-3.1.1.slim.min.js"></script>

on console of the browser, the error is coming Uncaught TypeError: $.ajax is not a function — Akki, Nov 13 '17 at 15:13
What `$` refers to? It probably should refer to jQuery, but does it really? — Teemu, Nov 13 '17 at 15:14
$ is by default jquery I guess because if I remove the ajax call the code is working fine, no error. — Akki, Nov 13 '17 at 15:15
You have use a build tool to make js app (module.exports.doaction webpack???) run on browser, you link a js lib in your html by `script` tag instead of require $ in your source code, out side of click event callback function `$` charactor refer to `jQuery`, but `$` binding in click callback function is not refer to `jQuery` because when build tool make `build`, it unknow `what dose $ mean?`. Try to require jQuery lib in your source code and remove `script` tag. Keyword `jQuery npm`. — hoangdv, Nov 14 '17 at 02:33

HerrGanzorig · Answer 1 · 2017-11-13T15:53:17.623

0

$.ajax is not a function means you didn't included jquery properly.

slim build of jquery doesn't include ajax function.

you can include jquery from

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

edited Nov 13 '17 at 15:53

answered Nov 13 '17 at 15:15

HerrGanzorig

51
1
14

@Teemu, updated – HerrGanzorig Nov 13 '17 at 15:19
When I do require('jQuery'), the error is changed to - Uncaught TypeError: $(...).modal is not a function – Akki Nov 13 '17 at 15:42
@Akki, updated,I think the problem was jquery type, you have to use not slim type but use full type. – HerrGanzorig Nov 13 '17 at 15:57

Ajax Call inside click event is not working

1 Answers1