22

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));

}
Knelis
  • 6,782
  • 2
  • 34
  • 54
Jerielle
  • 7,144
  • 29
  • 98
  • 164
  • 2
    Do you mind marking an answer as accepted if any worked for you? If not, it's a general practice to post your own solution and mark it as accepted so that future visitors can understand the actual problem and identify a solution. – Fr0zenFyr Jun 08 '15 at 21:27

4 Answers4

41

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.

Drakes
  • 23,254
  • 3
  • 51
  • 94
  • Hello Jerielle, was this able to help you out at all? Were you successful in solving the problem with this? – Drakes Apr 08 '15 at 23:26
  • 1
    I wonder why OP has no accepted answer. This solution should have answered the issue and must have been marked as accepted. @drakes +1 for revealing the the key point to the solution - button type should not be `type="submit"` if you want to use ajax. Otherwise, the data tends to get posted twice, first from form submit button and then when ajax is called, an out of memory error is thrown. – Fr0zenFyr Jun 08 '15 at 21:24
  • Thanks, I use jQuery Steps and I can't change the submit to button but I added onsubmit="return false;" and it fixed. – Volkan Ozyilmaz Aug 20 '15 at 12:21
  • @VolkanOzyilmaz I am using jQuery Steps and having the same issue. Can you tell me where exactly did you add onsubmit="return false;"? – Half Blood Prince Mar 15 '16 at 08:19
  • @HalfBloodPrince I'm really sorry, I don't even remember which project I used it. – Volkan Ozyilmaz Mar 15 '16 at 13:48
  • @VolkanOzyilmaz No worries. I solved it. I made ajax request synchronous and it's working now. – Half Blood Prince Mar 16 '16 at 05:43
  • In Firefox, if you don't specify the type, it will be "submit" by default. https://developer.mozilla.org/en/docs/Web/HTML/Element/button – Harry Pehkonen May 03 '16 at 18:30
  • +1, I just stumbled upon this problem when using a primefaces poll with onerror in combination with submitting forms. I could not believe the error text "Uncaught exception: out of memory", but your post clearly explains the problem, thanks a lot! – Gunnar Aug 03 '16 at 14:22
5

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>
apaul
  • 16,092
  • 8
  • 47
  • 82
George Albertyn
  • 267
  • 4
  • 11
0

I have had this error in the implementation of a search via Ajax, when I tried to display the result in HTML DOM and solved the problem as follows:

$('..a place where the processed output Ajax request..').on('click', '#add-comment', function() {...});

Stephan Weinhold
  • 1,623
  • 1
  • 28
  • 37
0

my problem solved by changing

<button onClick="save_order_info_into_database()">Save</button>

into

<button type="button" onClick="save_order_info_into_database()">Save</button>

means by adding type="button" solved mine..

Md. Shafiqur Rahman
  • 2,878
  • 27
  • 24