Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

$(...).getJSON is not a function

I'm trying to develop a simple API call that returns my comments in a JSON response but when I click on it I get the error

$(...).getJSON is not a function

My idea is, when I click on the button "Comment"(id=showarea) it immediately prints the comments from that answer and the textarea.

I'm "hardcoding" on the file just for testing.

I had this file (javascript/askme/comment.js)

function initCommentReloader() {
    $('#textarea').on('click', 'a', function() {
        $.getJSON("/controller/api/comments/comment.php", {answerid: answerid}, function(data) {
            $.each(data, function(i, comment) {
                console.log(comment);
            });
        });
    });
}

but when nothing happens that way, it doesn't even recognize the click, then I changed to an hardcode way and the error happened. I checked my jquery include and everything seems properly included.

This is the file where I'm trying to load the comments. Can you find anything wrong?

I'm sorry if this is extreme newbie, but I've been stressing this way too much.

Kind regards

 <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>AskMe</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
        $( function() {
            $( "#tabs" ).tabs();
        } );
    </script>

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="{$BASE_URL}css/fonts/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="{$BASE_URL}css/fonts/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="{$BASE_URL}css/styles/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="{$BASE_URL}css/styles/main.css">
    <link rel="stylesheet" type="text/css" href="{$BASE_URL}css/styles/responsive.css">
    <link rel="stylesheet" type="text/css" href="{$BASE_URL}css/styles/clean-blog.min.css">

    <!-- JS -->
    <script type="text/javascript" src="{$BASE_URL}javascript/vendor/bootstrap.js"></script>
    <script type="text/javascript" src= "{$BASE_URL}javascript/Chart.js"></script>
    <script type="text/javascript" src="{$BASE_URL}javascript/main.js"></script>
    <script src="https://cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>

</head>


<div class="post-button clearfix">
                <button class="btn icon-chat" title="Add a comment on this answer"
                        type="submit" id="showarea" name="showarea" value="Show Textarea">
                    Comment</button>
                <div id="textarea">
                    {include file="comment.tpl"}
                    {include file="comment_form.tpl"}
                </div>
            </div>

<script>
    answerid = {$answer['answerid']};
    console.log();
    $("#showarea").click(function() {
        $("#showarea").getJSON("/controller/api/comments/comment.php", function (data) {
            console.log(data);
        });
    });
</script>
{HTML::script('askme/comment.js')}
like image 881
vftw Avatar asked Apr 24 '17 22:04

vftw


2 Answers

It may not be the particular issue here, but the same confusing error comes up if using the "slim" version of jQuery which excludes ajax, animations, etc. If ".slim" appears in the line which includes jQuery, try taking that out.

Also, check the browser console to be sure jQuery is loading properly and not getting a 404 or similar error.

like image 180
WBT Avatar answered Sep 27 '22 20:09

WBT


Maybe change

$("#showarea").getJSON

to

$.getJSON
like image 37
psalaets Avatar answered Sep 27 '22 19:09

psalaets