jQuery Ajax is not a function

Question

I have a table with each row looking like this:

<tr id="ID" class="company_row">...</tr>

And a modal:

<div id="company_list_modal"class="modal">
    <p>TEST</p>
</div>

Clicking on the table row should cause a modal to open, done with this:

<script>
$(document).ready(function(){
    const modal = document.getElementById("company_list_modal");
    window.onclick = function(event) {
        if (event.target === modal) {
            modal.style.display = "none";
        };
    };

    $(".company_row").click(function() {
        $.ajax({
            url: "/company/company_info",
            data: {
                "company": $(this).attr('id'),
            },
            dataType: "json",
            success: function(data) {
                console.log(data);
                modal.style.display = "block";
            }
        });
    });
});

The error returned: TypeError: undefined is not a function (near '...$.ajax...')

Efforts to fix:

Selector definitely works - I added a console.log before the ajax bit, which confirmed that the selector and .click bit were fine. (Also confirms that jQuery is definitely loaded).

Have removed the $(this).attr('id'), and replaced it with "test", incase it were causing problems: no change.

Removed all references to the modal from the success function: No change

Tested in chrome and safari, both giving the same result

Update:

jQuery inclusion (in HTML head): <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

console.log($.ajax) returns 'undefined'

Please show us how and where exactly you have included jQuery. What does `console.log($.ajax);` reveal? — Sebastian Simon, Aug 10 '18 at 00:21
Don’t use the Slim version then. Use the full CDN resource. — Sebastian Simon, Aug 10 '18 at 00:27
@CertainPerformance The [`TypeError`: `$.ajax(…)` is not a function?](https://stackoverflow.com/q/18271251/4642212) question seems like a mess… That one is caused by a typo: an extra set of `()` after `$.ajax`, though lots of answers answer a different question that would’ve yielded a different error message: _“`TypeError`: `$.ajax` is not a function”_. — Sebastian Simon, Aug 10 '18 at 00:36
merely left the below snippet, because I wanted give one less messy example - which has the correct CDN added and functions migrated to jQuery ...and the question does not indicate, which version of jQuery had been used. it's down-votes for a minimal example (with some effort involved) - but not for a wild guess (with close to zero effort involved). — Martin Zeitler, Aug 10 '18 at 15:50

score 1 · Answer 1 · answered Aug 10 '18 at 00:36

1

You are using slim version of jquery, which does not include $.ajax method. In order to get it done you shall use full version.

answered Aug 10 '18 at 00:36

Umanda

4,159
3
20
27

This fixed the issue for me. – Gordon Smith Nov 06 '20 at 16:16

jQuery Ajax is not a function

1 Answers1