Chupachar
@Chupachar
front-end dev

Как решить проблему с переходом между страницами при использовании кнопок сохранения в форме с AJAX?

Имеется форма с двумя кнопками:
<form id="form__edit" style="margin-top: 14px;" action="{{Route('AdminOrderSave')}}" method="POST">
    {{csrf_field()}}
    <input type="hidden" name="ID" value="{{$Order->GetID()}}">
    <input type="hidden" name="CostUpdate" id="CostUpdate" value="0">
    <div style="display: flex; justify-content: center; margin-top: 12px;">
      <button class="table__btn" id="save">{{Translate::GetTranslation('Save')}}</button>
      <button class="table__btn" id="save-and-back" name="Back">{{Translate::GetTranslation('Save and back')}}</button>
    </div>
</form>

и jquery код такого вида:
$(document).ready(function() {
        $("#save-and-back").on('click', function(e) {
            e.preventDefault();
            let serializeFormData = $("[id^='form__edit']").serialize();
            serializeFormData += '&Back=0';
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                },
            });
            $.ajax({
                url: '{{route('AdminOrderSave')}}',
                method: 'post',
                data: serializeFormData,
                success: function (result) {
                    if (result['result']) {
                        console.log('result.url: ', result['url']);
                        location.href = result['url'];
                    }
                },
            });
        });
       $("#save").on('click', function(e) {
            e.preventDefault();
            let serializeFormData = $("[id^='form__edit']").serialize();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                },
            });
            $.ajax({
                url: '{{route('AdminOrderSave')}}',
                method: 'post',
                data: serializeFormData,
                success: function (result) {
                    if (result['result']) {
                        location.reload()
                    }
                },
            });
        });
    });

При клике по кнопке save данные на странице сохраняются, при клике по кнопке save and back данные сохраняются и пользователя роутит на предыдущую ссылку: location.href = result['url']; https://мой_сайт/предыдущая_страница, то есть бэкенд возвращает предыдущую страницу. Функционал работает сносно, но проблема в том что если пользователь сначала нажмет save, а потом save and back то по какой то причине урл будет текущей страницы: location.href = result['url']; https://мой_сайт/текущая_страница, то есть страницу перезагрузит, но пользователь останется на текущей странице. Смею предполагать, что после отработки данного кода: location.reload() что то ломается, кэшируется или что-то еще. Подскажите пожалуйста в чем может быть проблема. Ответ при клике на save and back:{result: 1, url: '...'} ответ при клике на save:{result: 1}
  • Вопрос задан
  • 75 просмотров
Решения вопроса 1
@Arhangelx
Я думаю тут проблема на стороне сервера в возвращаемым url, если вы храните ссылку которую посещает пользователь в сессие поскольку неизвестно откуда берется эта ссылка для возврата назад у меня два варианта предположения
1) ссылка берется при открытии страниц и тогда нужно не запоминать ссылку на страницу формы (если не желаете туда возвращать пользователя) или лучше отправлять пользователя на фиксированный URL
2) вероятней всего ссылка берется из referrer и тогда нужно не запоминать ссылку когда происходит отправка формы

но как по мне если способов попасть на форму не так много то лучше самому определить фиксированную ссылку куда пользователь должен быть возвращен
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы