1

When using jQuery's .post() function to submit my form data, I'm getting an Uncaught RangeError: Maximum call stack size exceeded.

I know this generally means recursion but I can't see where the recursion is happening.

I've put the post request into a function ( submitRequest() ) so I can submit data from 2 different points in the code. It originally resided inside the submit event and at that point worked perfectly. The error came as soon as I moved it outside.

Any ideas?

JavaScript code (with commented logs so you can see the flow) :

$(document).ready(function() {
    var downloadLink = '',
        downloadName = '',
        details,
        detailsSaved = false;

    $('.js--download').click(function(event) {
        var self = $(this);
        event.preventDefault();
        downloadLink = self.data('filePath'); // Store clicked download link
        downloadName = self.closest('.brochure').find('.brochure__name').html().replace('<br>', ' ');
        if (!detailsSaved) {
            $('#brochure-section').addClass('hide');
            $('#capture-section').removeClass('hide');
            $('html, body').animate({
                scrollTop: $("#capture-section").offset().top
            }, 500);
        } else {
            submitRequest();
        }
        return false;
    });

    $(".submit-btn").click(function(event) {
        var antiSpam = $('input[name=url]').val();
        if (antiSpam != "") {
            outputResultText('Error - Please leave the spam prevention field blank', 'error');
            proceed = false;
            event.preventDefault();
            return false;
        }        

        var name = $('input[name=name]').val(),
            company = $('input[name=company]').val(),
            email = $('input[name=email]').val(),
            phone = $('input[name=phone]').val(),
            proceed = true;

        if(name==""){
            $('input[name=name]').addClass("error");
            proceed = false;
        }
        if(phone==""){
            $('input[name=phone]').addClass("error");
            proceed = false;
        }
        if(email==""){
            $('input[name=email]').addClass("error");
            proceed = false;
        }

        if(!proceed) {
            outputResultText('Please check all required fields', 'error');
            event.preventDefault();
            return false;
        }

        event.preventDefault();
        if(proceed) {
            console.log('About to request'); // Logged out
            submitRequest();
        }

        return false;
    });

    //reset previously set border colors and hide all message on .keyup()
    $("input, textarea").keyup(function() {
        $(this).removeClass("error");
        $(".form-result").fadeOut(100);
    });

    function submitRequest () {
        console.log('Start submitRequest'); // Logged out

        if (!detailsSaved) {
            console.log('Details are NOT saved');
            post_data = {
                'name': name,
                'company': company,
                'phone': phone,
                'email': email,
                'brochure': downloadName,
                'brochure_url': downloadLink
            };
            details = post_data;
        } else {
            console.log('Details are saved');
            post_data = details;
            post_data['brochure'] = downloadName;
            post_data['brochure_url'] = downloadLink;
        }
        console.log('Posting data'); // Logged out
        // CRASH: Uncaught RangeError: Maximum call stack size exceeded 

        $.post(bcf_local_args['post_url'], post_data, function(response){ 
            console.log('Response received');
            if(response.type != 'error') {
                if (detailsSaved) {
                    outputAlert("Thank you for your request to receive our <strong>'"+downloadName+"'</strong> brochure.<br>We'll send you a copy soon to <strong>'"+email+"'</strong>, so please check your inbox.<br>Want it sent to a different email? Simply refresh the page and try again.");
                } else {
                    //reset values in all input fields
                    $('#brochure-capture-form input').val('');
                    $('#brochure-capture-form textarea').val('');
                    $('#capture-section').addClass('hide');
                    $('#brochure-section').removeClass('hide');
                    outputAlert("Thank you for your request to receive our <strong>'"+downloadName+"'</strong> brochure.<br>We'll send you a copy soon to <strong>'"+email+"'</strong>, so please check your inbox.");
                }
                if (!detailsSaved) {
                    detailsSaved = true;
                }
                $('html, body').animate({
                    scrollTop: $(".brochure__alert").offset().top
                }, 500);
            } else {
                outputResultText(response.text, response.type); 
            }
        }, 'json');
    }

    function outputResultText (text, status) {
        var output = '';
        if(status == 'error') {
            output = '<div class="error">'+text+'</div>';
        } else {
             output = '<div class="success">'+text+'</div>';
        }
        $(".form-result").hide().html(output).fadeIn(250);
    }

    function outputAlert (text) {
        var output = '<div>'+text+'</div>';
        $('.brochure__alert').hide().removeClass('hide').html(output).slideDown(250);
        setTimeout( function() {
            $('.brochure__alert').slideUp(250);
        }, 6500);
    }

    // function accessStorage(action, dataKey, dataValue) {
    //     if(typeof(Storage) === "undefined") {
    //         // No support for localStorage/sessionStorage.
    //         return false;
    //     } 
    //     if (action == 'store') {
    //         localStorage.setItem(dataKey, dataValue);
    //     } else if (action == 'retrieve') {
    //         return localStorage.getItem(dataKey);
    //     }
    // }
});

1 Answer 1

1

I don't know if you already found a solution but I was having the "same" problem.

In my code I had this function where I was calling after an upload of images, and I was passing the images name as paramaters along with others parameters required to my POST data.

After some research I found out that browsers has some limitations on passing parameters so the problem wasn't AT $.post but in my function calling.

I don't know the technical term but I was 'overusing the stack parameters'.

So maybe your problem isn't at your $.post either, but something else exceeding the stack.

Hope this helps.

[]'s

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.