JavaScript RangeError - Przekroczono maksymalny rozmiar stosu wywołań przy użyciu jQuery.post - javascript, jquery, formularze, post

Gdy używam funkcji .post () jQuery do przesłania danych formularza, otrzymuję błąd Uncaught RangeError: Przekroczono maksymalny rozmiar stosu wywołań.

Wiem, że ogólnie oznacza to rekurencję, ale nie widzę, gdzie ma miejsce rekurencja.

Umieściłem żądanie postu w funkcji (SubmitRequest ()), dzięki czemu mogę przesyłać dane z 2 różnych punktów w kodzie. Pierwotnie znajdował się w zdarzeniu przesyłania i w tym momencie działał idealnie. Błąd pojawił się, gdy tylko wyprowadziłem go na zewnątrz.

Jakieś pomysły?

Kod JavaScript (z komentowanymi dziennikami, aby zobaczyć przepływ):

$(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);
//     }
// }
});

Odpowiedzi:

Nie wiem, czy już znalazłeś rozwiązanie, ale miałem ten sam problem.

W moim kodzie miałem tę funkcję, do której dzwoniłem po przesłaniu obrazów, i przekazywałem nazwę obrazu jako parametry wraz z innymi parametrami wymaganymi do moich danych POST.

Po kilku badaniach dowiedziałem się, że przeglądarki mają pewne ograniczenia dotyczące przekazywania parametrów, więc problemem nie było AT $ .post, ale wywołanie funkcji.

Nie znam terminu technicznego, ale „nadużywałem parametrów stosu”.

Więc może twoim problemem nie jest także $ .post, ale coś więcej niż stos.

Mam nadzieję że to pomoże.

[] "s