2

I have a modal form. When submitting the form, I want the modal to close, the page to reload, and then the success modal to show up.

But what happened when I clicked submit was that the success modal shows over the modal form, and then the page reloads with no modal on it.

This is my code:

$.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');
    }
});
sɐunıɔןɐqɐp
  • 3,332
  • 15
  • 36
  • 40
hasan hasan
  • 65
  • 7

1 Answers1

1

location.reload already refresh you page so, the last line in your success callback is not executed anymore (or at least it has no effect on the reloaded page). So no modal will be shown after reload

What you could do to archive your goal is refreshing the page with a special parameter and check for that parameter when the page is loading (and then show the modal)

So instead of location.reload() do something like (Edited):

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

On the page itself (on load) do something like (Edited):

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

So the reloaded page will now contain an additional url-parameter and the page itself checks for that and opens the success modal when the param is present

Edit: The code is now working with all urls (also if there are already url parameters), therefor you also need to add two javascript-helper functions:

//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, ' '));
}
Evil_skunk
  • 3,040
  • 4
  • 30
  • 42
  • thank you, it is a nice idea, but I have already URL parameters set already so the address will be something like this: `poem.php?ip=4496?success` Now I need to modify this line to make it work `if(window.location.search == "?success"){` but I am afraid that the ip function value will be changed and destroy my page any advice please – hasan hasan Nov 04 '19 at 06:24
  • I checked now, and yes, it destroyed my pages. Can't I archive the parameter anywhere (but not in the URL) and check it when loading the page to show the modal? please help me @Evil_skunk – hasan hasan Nov 04 '19 at 06:53
  • I updated my answer (see the 3 Edits), now it uses some helper functions and it will work with pages containing other url parameters (like you `id` param) too – Evil_skunk Nov 04 '19 at 19:08
  • And it works. thank you very much for your patience and help – hasan hasan Nov 05 '19 at 05:40
  • A small issue if you please, now every time I refresh the page after the modal submitting, it keeps showing the modal success message, can`t I show it for the 1st time only? – hasan hasan Nov 05 '19 at 09:06