CODEWITHSUNDEEP
phpjquerylaravelfacebook-pixel
Jesse Luke Orange
Jesse Luke Orange

Reputation: 1999

uncaught RangeError: Maximum call stack size exceeded when using Facebook Pixel

In my Laravel application I use a Facebook Pixel to do some tracking. One such tracking metric is a form submission.

$("#emailConfirmation").on("submit", function(e) {
  var eventId = {{ $event->id }};

  if (eventId === 87 || eventId === 88 || eventId === 89) {
    e.preventDefault();

    fbq('track', 'Lead', {
      content_name: 'Email confirmation',
      content_category: 'Form submission'
    });

    $("#emailConfirmation").submit();
  }
});

What this is meant to do is prevent the form from submitting if the $event passed to the view has a particular ID, then send a lead to the Facebook Pixel analytics, and then submit the form.

Instead I get the following error:

uncaught RangeError: Maximum call stack size exceeded

Upvotes: 1

Views: 813

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337627

The issue is because you're creating infinite recursion by raising a submit event in the submit event handler.

To fix this, raise a submit event of the native form Element instead of on the jQuery object:

$("#emailConfirmation").on("submit", function(e) {
  var eventId = {{ $event -> id}};
  if (eventId === 87 || eventId === 88 || eventId === 89) {
    e.preventDefault();

    fbq('track', 'Lead', {
      content_name: 'Email confirmation',
      content_category: 'Form submission'
    });

    this.submit(); // change here
  }
});

Upvotes: 2

Related Questions