1

I can't figure out why JSON isn't working in my comment system. Any help would be much appreciated.

Currently when I submit the comment form, the ajax-loader flashes and spins, but the comment doesn't load and I get the "unexpected token" syntax error. When I refresh the page however the comment appears.

Here is my AJAX event handler that goes directly to my controller (following code snippet):

($('document').ready(function(){
    $("button.submit").bind('click', function (e){
        e.preventDefault();

        var form = $('form');
        var submit = $('button#submit');

            $("#flash").show();
            $("#flash").fadeIn(400).html('<img src="/img/ajax-loader.gif" />');

        $.ajax({
            type: 'POST',
            cache: false,
            url: '?comment='+comment+'&item='+item+'&author='+author+'&rating='+rating,
            data: form.serialize(),
            dataTYPE: 'json',
            success: function( data ){

                comment_insert( jQuery.parseJSON( data ) );
                console.log( "ResponseText: " +data );

                form.trigger('reset');

                $("#flash").hide();

            }
        });

    });
});

function comment_insert( data )
{
    var insert = '';
    insert += '<article>';
    insert += '<p>';
    insert += ''+data.comment+'';
    insert += '&mdash;';
    insert += ''+data.author+'';
    insert += ' | <a href="/item/reply"> Reply</a>';
    insert += '</p>';
    insert += '</article>';

    $('.comment_block').prepend( insert );
}

Controller:

 if($this->request->is('post')) {
            $comments = ItemComments::create($this->request->data);
            $comments->author_id = $this->user->id;

            $comments->comment = $this->request->data['comment'];
            $comments->item_id = $this->request->data['item'];
            $comments->author_id = $this->request->data['author'];
            $comments->rating = $this->request->data['rating'];
            $comments->save();

            echo json_encode($comments);

        }

view page:

<div class="col-lg-12">
    <h4>Comments and questions:</h4>

        <?php if (count($comments)): foreach ($comments as $feedback): ?>
        <article>
            <p>
            <?=$feedback->comment?>
            &mdash;
            <a href="/users/<?=$feedback->author->url?>">
                <?=$feedback->author->firstname?>
                <?=$feedback->author->lastname?>
                <?=$feedback->id?>
            </a>|
            <a href="/item/reply">Reply</a>
            </p>
        </article>
        <?php endforeach;?>

        <?php else: ?>

            <div class="col-lg-12">
                <div class="well-sm text-center">
                    <i class="fa fa-comments fa-2x"></i>
                    <h4>No comments yet.</h4>
                </div>
            </div>

        <?php endif; ?>

    <div class="comment_block"></div>
    <div id="flash"></div>

</div>
Teoman Kirac
  • 748
  • 3
  • 8
  • 16
  • 1
    what is this `print_r( $_REQUEST);` statement doing here?? I suspect this is the issue. – code-jaff Oct 14 '14 at 08:24
  • @code-jaff thanks for the suggestion, but no that doesn't fix it. forgot to remove that earlier... – Teoman Kirac Oct 14 '14 at 16:32
  • 1
    `jQuery.ajax` will automatically convert the response to a useable format for you where possible, by setting both `dataTYPE: 'json'` in the options and using `jQuery.parseJSON(data)` in the success handler, you are parsing the data twice. Try removing one of these. – steveukx Oct 14 '14 at 16:52
  • while @steveukx is correct I could find a typo there in the source. `dataTYPE` should be `dataType`. – code-jaff Oct 14 '14 at 17:01
  • @steveukx when I remove JQuery.parse.JSON from "comment_insert( jQuery.parseJSON( data ) );", "undefined—undefined | Reply". appears in the .comment_block. When I remove DataTYPE: 'json', and keep the success handler one, I get the ajax-loader flash and syntax error still. Have tried this too, failed to mention the undefined bit in the original post...Am i missing something here? Thanks for your help. – Teoman Kirac Oct 14 '14 at 17:05
  • @code-jaff just fixed that and now the syntax error is gone, but still spinning the ajax-loader to no resolve. It works like it did, where refresh would make the comment appear. I removed the [code](JQuery.parseJSON) bit in the success handler and left the [code](dataType: 'json',) part in this version. – Teoman Kirac Oct 14 '14 at 17:14
  • Is the `console.log` in the success handler printing out a valid JSON string? – steveukx Oct 14 '14 at 17:16

0 Answers0