CODEWITHSUNDEEP
javascriptjquery
vftw
vftw

Reputation: 1687

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

Upvotes: 8

Views: 9208

Answers (4)

Ashiquzzaman
Ashiquzzaman

Reputation: 5284

you can try:

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

OR

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

OR

$(document).on('click', '#textarea>a', function() {
  $.ajax({
    dataType: "json",
    url: "/controller/api/comments/comment.php",
    data: {answerid: answerid},
    success: success
  }).done(function( data ) {
    $.each(data, function(i, comment) {
      console.log(comment);
    });
  });
});

Upvotes: 1

WBT
WBT

Reputation: 2485

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.

Upvotes: 9

Mostafa Abdelghffar
Mostafa Abdelghffar

Reputation: 21

May be due to jQuery version, you need to change

$.getJSON

to

jQuery.getJSON

Another option is droping $.getJSON and using $.ajax as (according to jQuery documentation) $.getJSON is a shorthand Ajax function, which is equivalent to:

$.ajax({
    dataType: "json",
    url: url,
    data: data,
    success: success
});

Upvotes: 1

psalaets
psalaets

Reputation: 717

Maybe change

$("#showarea").getJSON

to

$.getJSON

Upvotes: 2

Related Questions