uncaught exception: out of memory in Ajax Process

Question

I got a problem I am submitting a simple form that has a small data and when I checked in the console tab the URL of ajax seems to be working but after the ajax was processed it will alert an error and it is redirected to my homepage and from the console tab I have this weird error:

Uncaught exception: out of memory

In my ajax I have this simple code only:

$("#add-comment").on('click', function() {

    var id = $('input[name=\'review_id\']').val();
    var customer_id = $('input[name=\'customer_id\']').val();
    var $comment = $('textarea[name=\'user_comment\']').val();

    var sample = "test";

    $.ajax({
        url: 'index.php?route=product/product/writeSubComment',
        type: 'post',
        dataType: 'json',
        data: { text: sample },
        beforeSend: function() {

        },
        success: function(data) {
            console.log(data.test);
        },
        error: function() {
            alert('ERROR!!!');
        }
    });

});

In my PHP controller I have this function

public function writeSubComment() {

    $json = array();

    $json['test'] = $this->request->post['text'];

    $this->response->addHeader('Content-Type: application/json');
    $this->response->setOutput(json_encode($json));

}

Answer 1

From your description of being redirected to your homepage, but having no code in your ajax response sections to do this, I suspect that the element #add-comment is a submit button in your form.

If this is the case, then your form may be submitting at the same time the ajax code is running when you click the #add-comment submit button. This would explain the out of memory error as the ajax javascript is being expunged while the page redirects.

You would need to prevent your form from submitting, and let the success() or failure sections handle the next step (i.e. refreshing the page, updating the comments box). One way to do this would be to change

$("#add-comment").on('click', function() {
     ... 

to

$('#add-comment').on('click', function(event){ 
    event.preventDefault();
    ...

or change the submit button from

<button type="submit" ...>Add comment</button>

to

<button type="button" ...>Add comment</button>

or change the form tag like this

<form onsubmit="return false;">

This is my best guess from the information I have available.

Answer 2

I was having a similar problem while testing in Firefox. Changing the button's type from submit to button worked for me.

<button type="submit" ...>Add comment</button>

to

<button type="button" ...>Add comment</button>