Another Uncaught RangeError: Максимальный размер стека вызовов

Question

Я смотрел предыдущие вопросы и ответы по этой теме c, но я, возможно, просто не вижу ошибки ...

По сути, у меня есть форма с кнопкой внизу с надписью этот обработчик событий ...

(Вся установка представляет собой интерфейс JS / JQuery / Bootstrap, работающий на Chrome с узлом node.js / express. js, связанным с MySQL, но эти факторы здесь не имеют значения.)

    //create 
$('#createform').on('click', '.create', function (e) {
  e.preventDefault();

  var userid = $("#user_id1").val();
  var job_title = $("#job_title").val();
  var description = $("#description").val();
  var requirement = $("#requirement").val();
  var location = $("#location").val();
  var company_id = $("#company_id1").val()
  var oontact_id = $("#contact_id").val()
  var resume_id = $("#resume_id").val()
  var status = $("#status").val()
  var notes = $("#notes").val();
  var rating = $("#rating").val()
  console.log("create job button pushed [", userid, "] [", job_title, "] [", company_id, "] [", status, "] ");
  $.ajax({
    url: "/api/job",
    type: "POST",
    data: {
      user_id1: userid,
      job_title: job_title,
      description: description,
      requirement: requirement,
      location: location,
      company_id: company_id,
      contact_id: contact_id,
      resume_id: resume_id,
      status: status,
      notes: notes,
      rating: rating
    },
    dataType: "json",
    success: function (data) {
      console.log(data);
      //location.reload(); // force reload to see new entry
    },
    error: function (error) {
      console.log("Error ")
      console.log(error);
    }
  });
});

Не было ошибки с формой в консоли. После нажатия кнопки «создать» (которая вызывает этот раздел кода) я получаю журнал консоли «кнопка создания задания нажата ...» и правильный ввод, подтверждающий заполнение переменных. Затем браузер завис, и на сервер не было передано ни одного звонка.

В стеке ошибок браузера отображаются

"Uncaught RangeError Максимальный размер стека вызовов, превышенный при Dt (jquery 3.5.0.min. js: 2)", повторяется до бесконечности

И это подтверждается собственным профилировщиком Chrome (в процессе проверки / производительности)

Я проверял этот раздел кода несколько раз. ОЧЕНЬ похожий код (другая таблица, разные поля) работал нормально без происшествий вчера, но моя попытка создать этот код / ​​эту таблицу потерпела неудачу. Я думал, что это было location.reload, но это никогда не заходило так далеко. Отказ находится в пределах jQuery, и я, честно говоря, не понимаю, где я все испортил.

Я проверил типичное, например, передачу val () ... (я передавал переменные, считанные из val (), никогда напрямую).

Я пробовал с или без предустановки по умолчанию, но его там нет.

Что-то в этом Ajax звонке, но что?

Answer 1

Я нашел проблему. Это действительно неясно.

Оказывается, jQuery запутался, когда я назвал несколько вещей одинаковыми. Это было одно из моих полей ввода:

          <div class="form-group">
            <input type="text" name="job_title" 
             id="job_title" class="form-control" 
             placeholder="job title" required="required">
          </div>

Как вы заметили выше, у меня есть переменная с таким же именем.

 var job_title = $("#job_title").val();

и подается в бит данных ajax.

   data: {
      user_id1: userid,
      job_title: job_title,
...

Каким-то образом, когда код выглядит так, jQuery очень запутался, пытаясь отменить ссылку на имя против идентификатора против поля против остальных. Вот что вызвало исчерпание стека.

Каким-то образом, когда есть только 3-4 поля, это не было проблемой. Но когда у вас есть более 10 полей в форме, она должна была повторяться каждые несколько раз, и пространство стека исчерпывается.

Эта проблема была решена путем 1) удаления атрибута «name» из полей формы (они не нужны с уже установленным «id») и 2) устранения конфликта переменных. До тех пор, пока ajax получает правильные имена ключей и значений, на самом деле все равно, какие данные туда попадают.

Ваше конкретное решение будет отличаться, но, по крайней мере, так я решил эту проблему.