Как скрыть модал и показать еще один после перезагрузки страницы?

Question

У меня есть модальная форма. При отправке формы я хочу, чтобы модальное окно закрывалось, страница перезагружалась, а затем отображался модальный успех.

Но то, что произошло, когда я нажал "Отправить", было то, что модальный успех отображается поверх модальной формы,и затем страница перезагружается без модального.

Это мой код:

$.ajax({
    type: "POST",
    url: "includes/handlers/ajax_submit_profile_post3.php",
    data: $('form.profile_post3').serialize(),
    success: function(msg) {
        $("#post_form3").modal('hide');
        location.reload();
        $("#successModal").modal('show');
    },
    error: function() {
        alert('Failure');
    }
});

Answer 1

location.reload уже обновили вашу страницу, поэтому последняя строка в вашем успешном обратном вызове больше не выполняется (или, по крайней мере, она не влияет на перезагруженную страницу). Таким образом, после перезагрузки модальное состояние не будет отображаться

Что вы можете сделать, чтобы заархивировать свою цель, это обновить страницу специальным параметром и проверить этот параметр при загрузке страницы (а затем показать модальное значение)

Поэтому вместо location.reload() сделайте что-то вроде ( Отредактировано ):

window.location.search = updateQueryStringParameter(window.location.search,"success","true")

На самой странице (при загрузке) сделайте что-то вроде ( Отредактировано ):

$(document).ready(function() {
    if(getParameterByName("success",window.location.href) == "true"){
        $("#successModal").modal('show');
    }
});

Таким образом, перезагруженная страница теперь будет содержать дополнительный URL-параметр, и сама страница проверяет это и открывает модал успеха при наличии параметра

Редактировать: код теперь работает со всеми URL-адресами (даже если параметры URL уже есть), поэтому вам также необходимо добавить две вспомогательные функции javascript:

//https://stackoverflow.com/a/6021027/1578780
function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = uri.indexOf('?') !== -1 ? "&" : "?";
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  }
  else {
    return uri + separator + key + "=" + value;
  }
}

//https://stackoverflow.com/a/901144/1578780
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}