I use Bootstrap Modals for multiple functions on our admin website. These pages are secured behind our admin login so if someone gets a URL, they cannot execute code, etc. Pretty standard. The issue is that we are dynamiclly generating the body like this:
$.get("/edit-item?id=" + $(this).data("id"), function(data){
$("#modal-edit-item").find(".modal-body").html(data);
})
When we loaded /edit-item, we check to see if they are logged in. If not, they get sent to login screen. The issue is that the login screen (call it /login) is appearing in the modal and I want it to be in the _parent (main page). It's confusing with multple buttons and such when it is in the modal.
I checked the network inspector and you can see it loading /edit-item and then loading /login right after since it is redirecting in the "get".
I thought about generating "<!--login-->" as the first HTML on the page and checking to see if that is the first part of "data" returned, but I think there has to be a better way. Ideally, check the response and if not logged in, refresh the parent (parent.location.reload();)
Thanks for the help in advance!
I was able to fix this by adding a session variable at the top of my secure page BEFORE any redirect happens. If the variable is present when I check access, i write to the page "modal" and end the script. When I check the response after the GET in the code above, I wrap with IF statement. If it was from a modal, I just refresh the page and the secureity script will grab the main page URL now instead of the modal URL.
Works well. Just had to adjust every page on my site...
if (data == "modal") {
parent.location.reload();
} else {
$("#modal-edit-item").find(".modal-body").html(data);
}