I want to solve this problem, I have a modal window on my site that opens when I click on a certain product in the row of the table. In the modal window, I edit the data via ajax without rebooting, in addition to text data, I upload images for the product. For the images to be displayed for the user, I have a page reload via php

header("Location: /pr1.php");

On the one hand, yes, this method works. The data was successfully added and the user sees what he has done, but on the other hand I have a minus for the user, as soon as the modal window closes, the page reloads and that's it. It turns out the user loses his modal window in which he worked. Tell me how to make so that the photos are added to the modal window with the reloading of the page but at the same time the modal window itself does not close. That is, roughly speaking, a page with a modal window remains and the modal window does not close. When you click on the button (Delete the page will be reloaded and the modal window is closed.) On the one hand I tried on ajax to do that, for example, if the pictures were deleted, a message was displayed in the modal window that the action was performed without reloading.
Js

 $(document).ready(function() { $(".prosm").on("click", function(e) { var id = $(this).attr("id"); //получаем id текущей кнопки e.preventDefault(); $.post("/module/winmodal.php", { id: id }, function(result) { //передача id $("#modal-content1").html(result); //записываем полученые с обработчика данные с запроса в диалоговое окно $("#myModal").modal('show'); //открытие модального окна }); }); });

enter image description here


PS: bootstrap modal window

    2 answers 2

    I will list the most simple options in my opinion.

    The first option : it is to abandon the table that you now have to write a script on js that will build your table and after changing the data the table should be able to rebuild. Of course, you can take ready-made tables of this type such as Bootstrap table , Tablesorter jqGrid . All of them have the functionality you need and are easy to use. But I would certainly advise you to try to write yourself for studying simply.

    The second option: Transfer with the identifier of the edited product and after processing using the same AJAX to change a specific row in the table.

      If there is a problem in displaying the image, then after sending the request to download the image (using AJAX), send a response with the address to the already loaded image, having received the answer, you can already update the address of the image without reloading the page.