Закрыть всплывающее окно JavaScript после отправки формы и обновить родительскую страницу? - PullRequest
Новая
       4

Закрыть всплывающее окно JavaScript после отправки формы и обновить родительскую страницу?

0 голосов
/ 05 октября 2019

У меня есть всплывающее окно из index.ejs, которое называется math.ejs. После нажатия кнопки «ОК», я хочу, чтобы всплывающее окно math.ejs закрылось и отображало рассчитанное значение на index.ejs. Но сейчас, когда я нажимаю кнопку отправки, всплывающее окно переходит к index.ejs и обновляет его там;это не близко. Он не обновляет его на обычной странице браузера index.ejs. Я должен обновить эту страницу для обновления.

Вот что я попробовал с моим кодом: 

<form class="" action="/index" method="post" name="mathform">
      <p>Value: <%= myValue %></p>
      <button class="btn btn-md" name="button" value="confirm" onclick="CloseAndRefresh();">Ok</button>
</form>

<script language="javascript">
      function CloseAndRefresh() {
      opener.location.reload(true);
      setTimeout(function() {
      window.close();
      }, 3000);
     }
</script>

Я был уверен, что это сработает, потому что он сообщает родительскому окну о перезагрузке, я даже установил таймер до закрытия всплывающего окна. Спасибо за любую помощь!

1 Ответ

1 голос
/ 06 октября 2019

Вот кое-что, с чего можно начать. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<form class="" action="/index" method="post" name="mathform" onsubmit="submitForm(event)">
      <p>Value: <%= myValue %></p>
      <button class="btn btn-md" name="button" value="confirm">Ok</button>
</form>

<script language="javascript">
    function submitForm(e) {
        e.preventDefault(); // Prevents the form from getting submitted and navigating to /index

        $.post("/index",{
            // add your post field values here
            field1: "value1",
            field2: "value2",   
        })
            .done(function(data){ // ajax request completed successfully
                CloseAndRefresh();
            })
            .fail(function(error) { // ajax request failed
                // TODO: handle error accordingly
                CloseAndRefresh();
            });
    }

    function CloseAndRefresh() {
        opener.location.reload(true);
        // this timeout can be removed since the page refresh has already started at this point
        setTimeout(function() {
            window.close();
        }, 3000);
    }
</script>

Запросы Ajax, как правило, проще с использованием jQuery. Я включил библиотеку в приведенный выше код, но в идеале вы должны добавить ее в <head>. Здесь я использую функцию $.post ( документация )

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...