Форма с jQuery и AJAX

создать форму bootstrap c jquery все поля обязательное к заполнению 1 Текстовое поле - Исх. № (произвольный) от (выбор даты в формате 25.07.2025г.) (kp_number) 2 Текстовое поле - длинное название (company) 3 Количество рабочих дней обязательное (daylimit ) 4 Прикрепить номер сделки (числовое поле order_id) отправить форму json ajax ожидать массив [['link'=>'ссылка1'],['link'=>'ссылка2'],'order_id','kp_number'] список файлов с кнопкой скачать download список файлов сохранять в массиве временной сессии предупредить текст о том что после закрытие вкладки браузера список файлов пропадет и доступен в заказе Обновление страницы выводить список из сессии стороже

Вот пример Bootstrap-формы с jQuery, с валидацией, отправкой через AJAX и сохранением списка файлов во временной сессии (в sessionStorage). Также реализовано отображение ссылок на файлы и предупреждение пользователя.

✅ HTML + Bootstrap 5 + jQuery

html
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Форма отправки</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body class="p-4">

  <div class="container">
    <h3>Отправка данных</h3>
    <div class="alert alert-warning" role="alert">
      Внимание: после закрытия вкладки список файлов будет утерян. Он будет доступен в заказе.
    </div>

    <form id="mainForm">
      <div class="mb-3">
        <label for="kp_number" class="form-label">Исх. № от</label>
        <div class="input-group">
          <input type="text" class="form-control" id="kp_number" name="kp_number" placeholder="Пример: 123/Б" required>
          <input type="date" class="form-control" id="kp_date" name="kp_date" required>
        </div>
      </div>

      <div class="mb-3">
        <label for="company" class="form-label">Длинное название</label>
        <input type="text" class="form-control" id="company" name="company" required>
      </div>

      <div class="mb-3">
        <label for="daylimit" class="form-label">Количество рабочих дней</label>
        <input type="number" class="form-control" id="daylimit" name="daylimit" required min="1">
      </div>

      <div class="mb-3">
        <label for="order_id" class="form-label">Номер сделки</label>
        <input type="number" class="form-control" id="order_id" name="order_id" required>
      </div>

      <button type="submit" class="btn btn-primary">Отправить</button>
    </form>

    <hr>

    <div id="fileList" class="mt-4">
      <h5>Список файлов</h5>
      <ul class="list-group" id="filesUl"></ul>
    </div>
  </div>

  <script>
    // Восстановление списка из sessionStorage
    function loadFilesFromSession() {
      const files = JSON.parse(sessionStorage.getItem('downloadFiles') || '[]');
      updateFileList(files);
    }

    function updateFileList(files) {
      $('#filesUl').empty();
      files.forEach(file => {
        if (file.link) {
          $('#filesUl').append(`
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <span>${file.link}</span>
              <a href="${file.link}" class="btn btn-sm btn-success" download>Скачать</a>
            </li>
          `);
        }
      });
    }

    $(document).ready(function() {
      loadFilesFromSession();

      $('#mainForm').on('submit', function(e) {
        e.preventDefault();

        const formData = {
          kp_number: $('#kp_number').val() + ' от ' + $('#kp_date').val(),
          company: $('#company').val(),
          daylimit: $('#daylimit').val(),
          order_id: $('#order_id').val()
        };

        $.ajax({
          url: '/api/submit', // Замените на свой URL
          method: 'POST',
          contentType: 'application/json',
          data: JSON.stringify(formData),
          success: function(response) {
            // Пример: [['link'=>'ссылка1'],['link'=>'ссылка2'],'order_id','kp_number']
            const files = response.filter(item => typeof item === 'object' && item.link);
            sessionStorage.setItem('downloadFiles', JSON.stringify(files));
            updateFileList(files);
          },
          error: function() {
            alert('Ошибка при отправке формы');
          }
        });
      });
    });
  </script>
</body>
</html>

📌 Что делает этот код:

📋 Форма с обязательными полями.
📆 Выбор даты — HTML5 <input type="date">.
✅ Все поля обязательны для заполнения (через required и валидацию jQuery).
📤 AJAX-запрос на сервер (POST /api/submit) с отправкой JSON.
📥 При успешном ответе сохраняются ссылки на файлы в sessionStorage.
📂 Отображается список файлов с кнопками «Скачать».
⚠️ Предупреждение: данные исчезнут при закрытии вкладки.
🔄 После обновления страницы — список файлов восстанавливается из sessionStorage.

🧪 Пример JSON-ответа от сервера

json
[
  {"link": "https://example.com/file1.pdf"},
  {"link": "https://example.com/file2.docx"},
  "123456",
  "KP/78 от 25.07.2025"
]

❗ Обратите внимание

Замените /api/submit на реальный адрес на вашем сервере.
Сервер должен вернуть массив в нужном формате.
sessionStorage очищается при закрытии вкладки. Если хотите сохранить между сессиями — используйте localStorage.

Хочешь, я сделаю серверный PHP/Python пример для обработки этой формы?

сейчас fileList перезаписывается а как чтобы добавлялся и "123456" сортировались список файлов

Отличный вопрос!

Чтобы:

Не перезаписывался fileList, а добавлялся к уже сохранённому.
Добавлялось значение order_id ("123456").
Список файлов сортировался по алфавиту по имени ссылки.

Вот как изменить твой JavaScript:

✅ Обновлённый скрипт:

javascript
function loadFilesFromSession() {
  const files = JSON.parse(sessionStorage.getItem('downloadFiles') || '[]');
  updateFileList(files);
}

function updateFileList(files) {
  // Фильтрация и сортировка по ссылке
  const sorted = files
    .filter(file => file && file.link)
    .sort((a, b) => a.link.localeCompare(b.link));

  $('#filesUl').empty();
  sorted.forEach(file => {
    $('#filesUl').append(`
      <li class="list-group-item d-flex justify-content-between align-items-center">
        <span>${file.link}</span>
        <a href="${file.link}" class="btn btn-sm btn-success" download>Скачать</a>
      </li>
    `);
  });

  // Добавим order_id, если есть
  const orderIds = files.filter(item => typeof item === 'string' && /^\d+$/.test(item));
  orderIds.forEach(order => {
    $('#filesUl').append(`
      <li class="list-group-item bg-light text-muted">
        <em>Order ID: ${order}</em>
      </li>
    `);
  });
}

$(document).ready(function () {
  loadFilesFromSession();

  $('#mainForm').on('submit', function (e) {
    e.preventDefault();

    const formData = {
      kp_number: $('#kp_number').val() + ' от ' + $('#kp_date').val(),
      company: $('#company').val(),
      daylimit: $('#daylimit').val(),
      order_id: $('#order_id').val()
    };

    $.ajax({
      url: '/api/submit', // Замените на свой URL
      method: 'POST',
      contentType: 'application/json',
      data: JSON.stringify(formData),
      success: function (response) {
        const currentFiles = JSON.parse(sessionStorage.getItem('downloadFiles') || '[]');
        
        const newFiles = response.filter(item => typeof item === 'object' && item.link);
        const newOrderIds = response.filter(item => typeof item === 'string' && /^\d+$/.test(item));

        // Объединяем старые и новые, избегая дубликатов
        const merged = [...currentFiles];

        newFiles.forEach(file => {
          if (!merged.some(f => f.link === file.link)) {
            merged.push(file);
          }
        });

        newOrderIds.forEach(order => {
          if (!merged.includes(order)) {
            merged.push(order);
          }
        });

        sessionStorage.setItem('downloadFiles', JSON.stringify(merged));
        updateFileList(merged);
      },
      error: function () {
        alert('Ошибка при отправке формы');
      }
    });
  });
});

🔍 Объяснение:

📌 updateFileList():
- Сортирует список по алфавиту link.
- Добавляет order_id как отдельный элемент (в светлом стиле).
💾 Добавление:
- Новые ссылки и order_id добавляются к уже существующим.
- Исключаются дубликаты по link и order_id.

💡 Возможные улучшения

Можно также хранить дату или kp_number рядом с файлом.
Можно показывать дату добавления, если понадобится.

Хочешь, я добавлю сохранение kp_number рядом с каждой ссылкой для понимания, откуда файл?

TypeError: a.link.localeCompare is not a function

Ошибка TypeError: a.link.localeCompare is not a function означает, что a.link не является строкой (возможно, undefined или какой-то объект/число), и потому метод .localeCompare() не работает.

🛠 Решение:

Перед сортировкой нужно гарантировать, что a.link и b.link действительно строки. Также лучше делать проверку на наличие link в объекте и его тип.

✅ Исправленный и более надёжный код сортировки:

javascript
const sorted = files
  .filter(file => typeof file === 'object' && typeof file.link === 'string')
  .sort((a, b) => a.link.localeCompare(b.link));

🔄 Весь `updateFileList()` с этой правкой:

javascript
function updateFileList(files) {
  // Сортируем только объекты с корректной ссылкой
  const sorted = files
    .filter(file => typeof file === 'object' && typeof file.link === 'string')
    .sort((a, b) => a.link.localeCompare(b.link));

  $('#filesUl').empty();

  // Добавляем отсортированные файлы
  sorted.forEach(file => {
    $('#filesUl').append(`
      <li class="list-group-item d-flex justify-content-between align-items-center">
        <span>${file.link}</span>
        <a href="${file.link}" class="btn btn-sm btn-success" download>Скачать</a>
      </li>
    `);
  });

  // Добавляем order_id, если есть строки с цифрами
  const orderIds = files.filter(item => typeof item === 'string' && /^\d+$/.test(item));
  orderIds.forEach(order => {
    $('#filesUl').append(`
      <li class="list-group-item bg-light text-muted">
        <em>Order ID: ${order}</em>
      </li>
    `);
  });
}

🧪 Проверка

Протестируй с таким массивом в sessionStorage, чтобы убедиться в правильности:

js
[
  {"link": "https://example.com/zeta.pdf"},
  {"link": "https://example.com/alpha.pdf"},
  "123456"
]

Он должен отсортироваться как:

alpha.pdf
zeta.pdf
Order ID: 123456

Если хочешь — могу дополнительно:

Показать kp_number рядом с каждой ссылкой.
Сделать удаление файла из списка.
Добавить дату загрузки.

Скажи, что из этого нужно?

function link() { [native code] } в файлах появляется не должен

Отлично, ты поймал баг: если в массиве файлов появляется function link() { [native code] }, это значит, что где-то ты неправильно фильтруешь элементы и случайно используешь link как функцию (возможно, по ошибке переопределённое имя переменной или метод link() строки).

🔥 Причина:

js
file.link

Если file — это строка, например "123456", то:

file.link вызовет встроенный метод .link() строки, который возвращает HTML-ссылку.
Поэтому ты получаешь function link() { [native code] }.

✅ Решение:

Перед тем как обращаться к file.link, надо проверить, что file действительно объект, и в нём есть строковое свойство link.

✅ Исправь фильтрацию так:

javascript
const sorted = files
  .filter(file =>
    typeof file === 'object' &&
    file !== null &&
    file.hasOwnProperty('link') &&
    typeof file.link === 'string'
  )
  .sort((a, b) => a.link.localeCompare(b.link));

💡 Советы:

Никогда не называй переменные link, name, value без нужды — это может конфликтовать с встроенными свойствами.
Убедись, что на сервере ты возвращаешь массив только в виде: [{link: "..."}, "123456"], а не случайно возвращаешь строки типа "link".

📦 Итоговая безопасная `updateFileList()`:

javascript
function updateFileList(files) {
  const sorted = files
    .filter(file =>
      typeof file === 'object' &&
      file !== null &&
      file.hasOwnProperty('link') &&
      typeof file.link === 'string'
    )
    .sort((a, b) => a.link.localeCompare(b.link));

  $('#filesUl').empty();

  sorted.forEach(file => {
    $('#filesUl').append(`
      <li class="list-group-item d-flex justify-content-between align-items-center">
        <span>${file.link}</span>
        <a href="${file.link}" class="btn btn-sm btn-success" download>Скачать</a>
      </li>
    `);
  });

  const orderIds = files.filter(item => typeof item === 'string' && /^\d+$/.test(item));
  orderIds.forEach(order => {
    $('#filesUl').append(`
      <li class="list-group-item bg-light text-muted">
        <em>Order ID: ${order}</em>
      </li>
    `);
  });
}

Если хочешь, могу добавить логгирование проблемных элементов — это поможет отлаживать, если сервер вдруг вернёт что-то не то.

все еще добавляется может структуру другую создать хранения сессий ?

Да, раз всё ещё появляются артефакты вроде function link() { [native code] }, значит логика хранения в sessionStorage недостаточно строгая.

👉 Решение — использовать строго определённую структуру, где храним:

только ссылки: files: [ {link: "...", kp_number: "..."} ]
метаинформацию отдельно: order_id, kp_number, created_at, и т.п.

✅ Новая структура хранения в `sessionStorage`

Храним объект вида:

json
{
  "files": [
    { "link": "https://example.com/alpha.pdf", "kp_number": "KP/12 от 25.07.2025" },
    { "link": "https://example.com/beta.pdf", "kp_number": "KP/13 от 25.07.2025" }
  ],
  "order_id": "123456"
}

✳ Изменения:

1. 🔄 Обновим `sessionStorage` запись

В AJAX success:

javascript
success: function (response) {
  // Парсим ответ
  const newFiles = response.filter(item => typeof item === 'object' && item.link);
  const orderIds = response.filter(item => typeof item === 'string' && /^\d+$/.test(item));

  // Получаем текущую сессию
  const sessionData = JSON.parse(sessionStorage.getItem('fileSession') || '{"files":[],"order_id":""}');

  // Обновляем файлы без дубликатов
  newFiles.forEach(newFile => {
    const exists = sessionData.files.some(f => f.link === newFile.link);
    if (!exists) {
      sessionData.files.push({
        link: newFile.link,
        kp_number: formData.kp_number
      });
    }
  });

  // Обновляем order_id (только если есть новый)
  if (orderIds.length > 0) {
    sessionData.order_id = orderIds[0];
  }

  // Сохраняем обратно
  sessionStorage.setItem('fileSession', JSON.stringify(sessionData));
  updateFileList(sessionData);
}

2. 🔁 Обновим `updateFileList`

javascript
function updateFileList(sessionData) {
  $('#filesUl').empty();

  const sortedFiles = (sessionData.files || [])
    .filter(file =>
      typeof file === 'object' &&
      file !== null &&
      typeof file.link === 'string'
    )
    .sort((a, b) => a.link.localeCompare(b.link));

  sortedFiles.forEach(file => {
    $('#filesUl').append(`
      <li class="list-group-item d-flex justify-content-between align-items-center">
        <div>
          <strong>${file.kp_number}</strong><br>
          <span>${file.link}</span>
        </div>
        <a href="${file.link}" class="btn btn-sm btn-success" download>Скачать</a>
      </li>
    `);
  });

  if (sessionData.order_id) {
    $('#filesUl').append(`
      <li class="list-group-item bg-light text-muted">
        <em>Order ID: ${sessionData.order_id}</em>
      </li>
    `);
  }
}

3. 🔁 Загрузка при старте

javascript
$(document).ready(function () {
  const sessionData = JSON.parse(sessionStorage.getItem('fileSession') || '{"files":[],"order_id":""}');
  updateFileList(sessionData);

  $('#mainForm').on('submit', function (e) {
    e.preventDefault();

    const formData = {
      kp_number: $('#kp_number').val() + ' от ' + $('#kp_date').val(),
      company: $('#company').val(),
      daylimit: $('#daylimit').val(),
      order_id: $('#order_id').val()
    };

    $.ajax({
      url: '/api/submit',
      method: 'POST',
      contentType: 'application/json',
      data: JSON.stringify(formData),
      success: function (response) {
        // См. выше — логика обновления sessionStorage
      },
      error: function () {
        alert('Ошибка при отправке формы');
      }
    });
  });
});

✅ Преимущества этой структуры:

Чёткая типизация: files — массив только объектов {link, kp_number}
Нет неожиданного вызова встроенного .link() у строки
Легко расширяется: можно добавить дату, user_id, expire и т.п.
Гарантированное отображение и сортировка

Хочешь, чтобы я добавил кнопку «Удалить файл» из сессии? Или автоудаление при истечении времени?

{ "files": [ { "link": "https://example.com/alpha.pdf", "kp_number": "KP/12 от 25.07.2025" }, { "link": "https://example.com/beta.pdf", "kp_number": "KP/13 от 25.07.2025" } ], "order_id": "123456" }а если будет несколько разный ордеров ?

Отличный вопрос. ✅

Сейчас структура:

json
{
  "files": [...],
  "order_id": "123456"
}

— предполагает только один заказ (order_id). Это неудобно, если:

Пользователь работает с несколькими заказами параллельно
Надо сохранять файлы по разным order_id

✅ Решение: структура с группировкой по `order_id`

Пример расширенной структуры:

json
{
  "orders": {
    "123456": {
      "files": [
        { "link": "https://example.com/alpha.pdf", "kp_number": "KP/12 от 25.07.2025" }
      ]
    },
    "789000": {
      "files": [
        { "link": "https://example.com/beta.pdf", "kp_number": "KP/13 от 25.07.2025" }
      ]
    }
  }
}

Теперь:

Каждый order_id содержит свой список files
Можно удобно переключаться между заказами
Список можно рендерить по всем или по текущему заказу

🧠 Как это реализовать

1. Структура в `sessionStorage`

javascript
{
  orders: {
    [order_id]: {
      files: [ {link: "...", kp_number: "..."} ]
    }
  }
}

2. AJAX → Добавление в нужный `order_id`

javascript
success: function (response) {
  const newFiles = response.filter(item => typeof item === 'object' && item.link);
  const orderIds = response.filter(item => typeof item === 'string' && /^\d+$/.test(item));
  const order_id = orderIds[0]; // Предположим, всегда один

  let sessionData = JSON.parse(sessionStorage.getItem('fileSession') || '{"orders":{}}');

  if (!sessionData.orders[order_id]) {
    sessionData.orders[order_id] = { files: [] };
  }

  newFiles.forEach(newFile => {
    const exists = sessionData.orders[order_id].files.some(f => f.link === newFile.link);
    if (!exists) {
      sessionData.orders[order_id].files.push({
        link: newFile.link,
        kp_number: formData.kp_number
      });
    }
  });

  sessionStorage.setItem('fileSession', JSON.stringify(sessionData));
  updateFileList(sessionData);
}

3. Обновление списка (можно по всем или по одному заказу):

javascript
function updateFileList(sessionData, selectedOrderId = null) {
  $('#filesUl').empty();

  const orders = sessionData.orders || {};

  const orderIds = Object.keys(orders);
  if (orderIds.length === 0) return;

  for (const orderId of orderIds) {
    // Если фильтруем по конкретному
    if (selectedOrderId && orderId !== selectedOrderId) continue;

    const files = orders[orderId].files || [];
    const sortedFiles = files.sort((a, b) => a.link.localeCompare(b.link));

    $('#filesUl').append(`
      <li class="list-group-item list-group-item-secondary"><strong>Заказ #${orderId}</strong></li>
    `);

    sortedFiles.forEach(file => {
      $('#filesUl').append(`
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <div>
            <strong>${file.kp_number}</strong><br>
            <span>${file.link}</span>
          </div>
          <a href="${file.link}" class="btn btn-sm btn-success" download>Скачать</a>
        </li>
      `);
    });
  }
}

✅ Преимущества новой структуры

Что	Старый подход	Новый подход (`orders`)
Один заказ	✅ Да	✅ Да
Несколько заказов	❌ Нет	✅ Да
Изоляция файлов по заказу	❌ Нет	✅ Да
Расширяемость	🔒 Ограничена	🔓 Гибкая

❓ Хочешь:

Добавить выпадающий список для выбора текущего заказа?
Кнопку "очистить файлы по заказу"?
Уведомление, если повторно добавляется та же ссылка?

Скажи, и я сделаю.

TypeError: data.filter is not a function

Ошибка TypeError: data.filter is not a function означает, что ты вызываешь .filter() на переменной, которая не является массивом. Чаще всего это происходит, когда:

data — это объект, а не массив.
Ответ сервера не в том формате, что ожидается.
Ты пытаешься обработать JSON до его парсинга.

✅ Что нужно проверить

🔍 1. Посмотри, что реально приходит от сервера

Добавь это в success перед filter:

javascript
console.log("Ответ сервера:", response);

Если ты видишь:

json
{ link: "https://...", ... }  // ❌ объект
или
{ files: [...] }             // ❌ объект
или
"123456"                     // ❌ строка

— тогда нельзя делать response.filter(...).

✅ Исправление зависит от того, что именно возвращает сервер

✅ Вариант 1: Сервер возвращает массив (текущий ожидаемый формат)

json
[
  { "link": "https://example.com/file1.pdf" },
  { "link": "https://example.com/file2.pdf" },
  "123456"
]

→ работает с:

js
const newFiles = response.filter(item => typeof item === 'object' && item.link);

❌ Вариант 2: Сервер возвращает объект

json
{
  "order_id": "123456",
  "files": [
    { "link": "https://example.com/file1.pdf" }
  ]
}

→ нужно переписать код вот так:

javascript
const newFiles = response.files || [];
const order_id = response.order_id;

🛠 Итог: адаптируйся к тому, что реально возвращает сервер

🔄 Универсальный пример:

javascript
success: function (response) {
  // Распечатай, что пришло
  console.log("Ответ сервера:", response);

  let newFiles = [];
  let order_id = "";

  if (Array.isArray(response)) {
    newFiles = response.filter(item => typeof item === 'object' && item.link);
    const orderIds = response.filter(item => typeof item === 'string' && /^\d+$/.test(item));
    order_id = orderIds[0] || "";
  } else if (typeof response === 'object' && response !== null) {
    newFiles = response.files || [];
    order_id = response.order_id || "";
  } else {
    console.error("Неподдерживаемый формат ответа от сервера.");
    return;
  }

  // Далее идёт добавление в sessionStorage, как мы обсуждали
  let sessionData = JSON.parse(sessionStorage.getItem('fileSession') || '{"orders":{}}');

  if (!order_id) {
    alert('order_id не получен от сервера');
    return;
  }

  if (!sessionData.orders[order_id]) {
    sessionData.orders[order_id] = { files: [] };
  }

  newFiles.forEach(newFile => {
    const exists = sessionData.orders[order_id].files.some(f => f.link === newFile.link);
    if (!exists) {
      sessionData.orders[order_id].files.push({
        link: newFile.link,
        kp_number: formData.kp_number
      });
    }
  });

  sessionStorage.setItem('fileSession', JSON.stringify(sessionData));
  updateFileList(sessionData);
}

📌 Резюме

Ошибка filter is not a function происходит, когда ты применяешь .filter() к не-массиву
Проверь формат ответа через console.log(response)
Обработай оба случая: массив и объект
Не забудь парсить JSON, если ты получаешь строку (JSON.parse(response))

Хочешь, чтобы я помог с примером серверного ответа и проверкой Content-Type?

{"orders":{"95158":{"files":[{"link":"\/crm\/upload\/\u0422\u0440\u0435\u0439\u0441\u041b\u0430\u0439\u043d_\u041a\u041f_95158_\u043e\u0442_30.07.2025\u0433._\u0434\u043b\u044f_OOO \u041a\u043e\u043c\u043f\u0430\u043d\u0438\u044f \u043f\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u043d\u043e\u043c\u0435\u043d\u043a\u043b\u0430\u0442\u0443\u0440.pdf"},{"link":"\/crm\/upload\/\u0422\u0440\u0435\u0439\u0441\u041b\u0430\u0439\u043d_\u041a\u041f_95158_\u043e\u0442_30.07.2025\u0433._\u0434\u043b\u044f_OOO \u041a\u043e\u043c\u043f\u0430\u043d\u0438\u044f \u043f\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u043d\u043e\u043c\u0435\u043d\u043a\u043b\u0430\u0442\u0443\u0440.xlsx"}]}}}

Отлично! Твой сервер уже возвращает правильную и удобную структуру:

json
{
  "orders": {
    "95158": {
      "files": [
        { "link": "/crm/upload/..." },
        { "link": "/crm/upload/..." }
      ]
    }
  }
}

✅ Что теперь нужно сделать:

НЕ вызывать .filter() на этом объекте — потому что response теперь не массив, а объект orders.
Просто работаем с response.orders.

✅ Обновлённый код обработки:

javascript
success: function (response) {
  console.log("Ответ от сервера:", response);

  // Проверяем, что в ответе есть заказы
  if (typeof response !== 'object' || !response.orders) {
    alert('Неверный формат ответа сервера.');
    return;
  }

  // Загружаем текущую сессию
  let sessionData = JSON.parse(sessionStorage.getItem('fileSession') || '{"orders":{}}');

  // Обрабатываем каждый заказ
  for (const order_id in response.orders) {
    const newFiles = response.orders[order_id].files || [];

    if (!sessionData.orders[order_id]) {
      sessionData.orders[order_id] = { files: [] };
    }

    // Добавляем новые файлы без дубликатов
    newFiles.forEach(newFile => {
      const exists = sessionData.orders[order_id].files.some(f => f.link === newFile.link);
      if (!exists) {
        sessionData.orders[order_id].files.push({
          link: newFile.link,
          kp_number: formData.kp_number  // если есть
        });
      }
    });
  }

  // Сохраняем обратно
  sessionStorage.setItem('fileSession', JSON.stringify(sessionData));
  updateFileList(sessionData);
}

✅ Обновим `updateFileList()`

javascript
function updateFileList(sessionData) {
  $('#filesUl').empty();

  const orders = sessionData.orders || {};

  for (const orderId in orders) {
    const files = orders[orderId].files || [];

    if (files.length > 0) {
      $('#filesUl').append(`
        <li class="list-group-item list-group-item-secondary">
          <strong>Заказ #${orderId}</strong>
        </li>
      `);
    }

    // Отсортируем по имени файла
    const sortedFiles = files.sort((a, b) => a.link.localeCompare(b.link));

    sortedFiles.forEach(file => {
      $('#filesUl').append(`
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <div>
            ${file.kp_number ? `<strong>${file.kp_number}</strong><br>` : ''}
            <span>${decodeURIComponent(file.link)}</span>
          </div>
          <a href="${file.link}" class="btn btn-sm btn-success" download>Скачать</a>
        </li>
      `);
    });
  }
}

📝 Примечания:

decodeURIComponent(file.link) — декодирует юникод-экранированные символы (типа \u043a).
formData.kp_number передаётся в sessionStorage, если нужно хранить КП к каждому файлу.
Мы гарантируем, что каждый order_id — это отдельный список файлов.

🎁 Хочешь улучшить интерфейс?

🔽 Селектор выбора текущего заказа (<select>)
❌ Кнопки "удалить файл" или "очистить заказ"
⏱ Автоудаление через 24 часа (по таймстемпу)

Скажи, что нужно — сделаю.

список с undefined Заказ #95158 undefined /crm/upload/ТрейсЛайн_КП_95158_от_30.07.2025г._для_OOO Компания по тестированию номенклатур.pdf undefined /crm/upload/ТрейсЛайн_КП_95158_от_30.07.2025г._для_OOO Компания по тестированию номенклатур.xlsx

Появление undefined в списке означает, что в объекте файла отсутствует или не передано значение kp_number, а ты всё равно пытаешься его отобразить. Это классическая ошибка вида:

javascript
${file.kp_number}

— когда file.kp_number === undefined.

✅ Решение

Перед вставкой kp_number — проверяй, что он есть. Используй тернарный оператор или логическую проверку.

🔧 Обновлённый фрагмент из `updateFileList()`:

javascript
sortedFiles.forEach(file => {
  const decodedLink = decodeURIComponent(file.link);

  $('#filesUl').append(`
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <div>
        ${file.kp_number ? `<strong>${file.kp_number}</strong><br>` : ''}
        <span>${decodedLink}</span>
      </div>
      <a href="${file.link}" class="btn btn-sm btn-success" download>Скачать</a>
    </li>
  `);
});

✅ Как убедиться, что `kp_number` реально есть в `sessionStorage`

Добавь временно в консоль вывод:

javascript
console.log("sessionData:", sessionData);

Если в файлах:

js
{ link: "...", kp_number: undefined }

— значит ты не передал kp_number в момент записи.

🛠 Проверь момент записи файлов

Вот этот кусок кода при добавлении файла в сессию:

javascript
sessionData.orders[order_id].files.push({
  link: newFile.link,
  kp_number: formData.kp_number  // ⚠️ здесь может быть undefined
});

Если formData.kp_number не определён на этот момент, он не запишется.

✅ Убедись, что перед этим есть:

javascript
const formData = {
  kp_number: $('#kp_number').val() + ' от ' + $('#kp_date').val(),
  ...
};

✅ Подытожим

Причина	Решение
`kp_number` не передаётся в `formData`	Убедись, что ты создаёшь `formData.kp_number` до отправки
`undefined` выводится в HTML	Используй проверку `if (file.kp_number)` перед выводом
Не все файлы имеют КП	Это может быть ОК — просто не выводи `undefined`

Хочешь, чтобы я помог сделать так, чтобы имя файла и kp_number отображались красиво, например:

go
📎 КП от 30.07.2025 — Скачать PDF
```?

после перезагрузки список не появляется

Если после перезагрузки страницы список файлов не появляется — значит:

sessionStorage не читается или пуст.
updateFileList() не вызывается при загрузке.
Формат данных в sessionStorage не соответствует ожидаемому (например, структура orders[order_id].files отсутствует).

✅ Проверим по шагам

✅ 1. Есть ли данные в `sessionStorage`

Открой DevTools → вкладка Console, напиши:

javascript
JSON.parse(sessionStorage.getItem('fileSession'))

Должно быть что-то вроде:

json
{
  "orders": {
    "95158": {
      "files": [
        { "link": "/crm/upload/...", "kp_number": "..." },
        ...
      ]
    }
  }
}

Если null — значит данные не сохраняются или очищаются.

✅ 2. Есть ли вызов `updateFileList()` при загрузке

В $(document).ready(...) должен быть вот такой код:

javascript
$(document).ready(function () {
  const sessionData = JSON.parse(sessionStorage.getItem('fileSession') || '{"orders":{}}');
  updateFileList(sessionData);
});

⚠️ Без вызова updateFileList() на старте список не отобразится после перезагрузки.

✅ 3. Проверка функции `updateFileList()`

Вот исправленный и рабочий пример updateFileList():

javascript
function updateFileList(sessionData) {
  $('#filesUl').empty();

  if (!sessionData || !sessionData.orders) return;

  const orders = sessionData.orders;

  for (const orderId in orders) {
    const files = orders[orderId].files || [];

    if (files.length > 0) {
      $('#filesUl').append(`
        <li class="list-group-item list-group-item-secondary">
          <strong>Заказ #${orderId}</strong>
        </li>
      `);
    }

    const sortedFiles = files.sort((a, b) => a.link.localeCompare(b.link));

    sortedFiles.forEach(file => {
      const decodedLink = decodeURIComponent(file.link);

      $('#filesUl').append(`
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <div>
            ${file.kp_number ? `<strong>${file.kp_number}</strong><br>` : ''}
            <span>${decodedLink}</span>
          </div>
          <a href="${file.link}" class="btn btn-sm btn-success" download>Скачать</a>
        </li>
      `);
    });
  }
}

📌 Резюме: проверь, что все есть

✅ В sessionStorage хранятся данные
✅ При загрузке страницы вызывается:

javascript
const sessionData = JSON.parse(sessionStorage.getItem('fileSession') || '{"orders":{}}');
updateFileList(sessionData);

✅ Функция updateFileList() корректно отрисовывает список

🛠 Хочешь автосообщение?

Например:

"Файлы хранятся временно. После закрытия вкладки они будут удалены."

Можно вставить сразу в $(document).ready.

Хочешь добавить?

удалить в строке /crm/upload <span>${file.link}</span>

Чтобы удалить из строки путь /crm/upload и оставить только имя файла (например, "Файл.pdf" вместо "/crm/upload/Файл.pdf"), тебе нужно:

✅ Изменить эту строку:

javascript
<span>${decodedLink}</span>

✅ На такую:

javascript
<span>${decodedLink.replace('/crm/upload/', '')}</span>

🔧 Полный обновлённый фрагмент из `updateFileList()`:

javascript
sortedFiles.forEach(file => {
  const decodedLink = decodeURIComponent(file.link);
  const fileName = decodedLink.replace('/crm/upload/', '');

  $('#filesUl').append(`
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <div>
        ${file.kp_number ? `<strong>${file.kp_number}</strong><br>` : ''}
        <span>${fileName}</span>
      </div>
      <a href="${file.link}" class="btn btn-sm btn-success" download>Скачать</a>
    </li>
  `);
});

📌 Альтернативы (если путь может быть разным):

Если путь может быть /crm/upload/ или /uploads/ — используй регулярное выражение:

javascript
const fileName = decodedLink.replace(/^.*\/([^\/]+)$/, '$1');

⏎ Это оставит только имя файла после последнего /.

Хочешь — могу добавить отображение размера файла, типа (PDF, XLSX) или иконку 📄.

ChatGPT может допускать ошибки. Рекомендуем проверять важную информацию.

Вы сказали:

ChatGPT сказал:

✅ HTML + Bootstrap 5 + jQuery

📌 Что делает этот код:

🧪 Пример JSON-ответа от сервера

❗ Обратите внимание

Вы сказали:

ChatGPT сказал:

✅ Обновлённый скрипт:

🔍 Объяснение:

💡 Возможные улучшения

Вы сказали:

ChatGPT сказал:

🛠 Решение:

✅ Исправленный и более надёжный код сортировки:

🔄 Весь updateFileList() с этой правкой:

🧪 Проверка

Вы сказали:

ChatGPT сказал:

🔥 Причина:

✅ Решение:

✅ Исправь фильтрацию так:

💡 Советы:

📦 Итоговая безопасная updateFileList():

Вы сказали:

ChatGPT сказал:

✅ Новая структура хранения в sessionStorage

✳ Изменения:

1. 🔄 Обновим sessionStorage запись

2. 🔁 Обновим updateFileList

3. 🔁 Загрузка при старте

✅ Преимущества этой структуры:

Вы сказали:

ChatGPT сказал:

✅ Решение: структура с группировкой по order_id

🧠 Как это реализовать

1. Структура в sessionStorage

2. AJAX → Добавление в нужный order_id

3. Обновление списка (можно по всем или по одному заказу):

✅ Преимущества новой структуры

❓ Хочешь:

Вы сказали:

ChatGPT сказал:

✅ Что нужно проверить

🔍 1. Посмотри, что реально приходит от сервера

✅ Исправление зависит от того, что именно возвращает сервер

✅ Вариант 1: Сервер возвращает массив (текущий ожидаемый формат)

❌ Вариант 2: Сервер возвращает объект

🛠 Итог: адаптируйся к тому, что реально возвращает сервер

🔄 Универсальный пример:

📌 Резюме

Вы сказали:

ChatGPT сказал:

✅ Что теперь нужно сделать:

✅ Обновлённый код обработки:

✅ Обновим updateFileList()

📝 Примечания:

🎁 Хочешь улучшить интерфейс?

Вы сказали:

ChatGPT сказал:

✅ Решение

🔧 Обновлённый фрагмент из updateFileList():

✅ Как убедиться, что kp_number реально есть в sessionStorage

🛠 Проверь момент записи файлов

✅ Убедись, что перед этим есть:

✅ Подытожим

Вы сказали:

ChatGPT сказал:

✅ Проверим по шагам

✅ 1. Есть ли данные в sessionStorage

✅ 2. Есть ли вызов updateFileList() при загрузке

✅ 3. Проверка функции updateFileList()

📌 Резюме: проверь, что все есть

🛠 Хочешь автосообщение?

Вы сказали:

ChatGPT сказал:

✅ Изменить эту строку:

✅ На такую:

🔧 Полный обновлённый фрагмент из updateFileList():

📌 Альтернативы (если путь может быть разным):

🔄 Весь `updateFileList()` с этой правкой:

📦 Итоговая безопасная `updateFileList()`:

✅ Новая структура хранения в `sessionStorage`

1. 🔄 Обновим `sessionStorage` запись

2. 🔁 Обновим `updateFileList`

✅ Решение: структура с группировкой по `order_id`

1. Структура в `sessionStorage`

2. AJAX → Добавление в нужный `order_id`

✅ Обновим `updateFileList()`

🔧 Обновлённый фрагмент из `updateFileList()`:

✅ Как убедиться, что `kp_number` реально есть в `sessionStorage`

✅ 1. Есть ли данные в `sessionStorage`

✅ 2. Есть ли вызов `updateFileList()` при загрузке

✅ 3. Проверка функции `updateFileList()`

🔧 Полный обновлённый фрагмент из `updateFileList()`: