JQuery Восстановление контроля над внешним всплывающим окном - PullRequest
Новая
       41

JQuery Восстановление контроля над внешним всплывающим окном

0 голосов
/ 08 января 2020

В рамках процесса оплаты я должен открыть модал twitter- bootstrap, вызвав форму, эта форма, в свою очередь, открывает внешнее окно, чтобы начать процесс с банковским каналом, направляя пользователя для ввода своих данных и выполнения покупка.

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

window.open("", "payment_method_page", "width=8, height=6");

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

Я уже пробовал: 

$('#paymentModal').modal('hide');

и: 

setTimeout(function(){
    $('#paymentModal').modal('hide')
}, 10000);

и даже: 

$('#paymentModal').on('click', 'a', function(event) {event.preventDefault(); window.open("", "payment_method_page", "width=800, height=600");});

, думая, что из-за того, что мой модал инициировал процесс, я мог его закрыть; но внешнее окно безразлично к этой команде.

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

Javascript Inicial action 

$(document).ready(function() {
      $('#payment_button_id_copy').val(#{@order.payments.first.payment_button["codigoMedioPago"]})
      $('#payment_frequency_copy').val("#{@order.payments.first.payment_frequency}")
      //window.open("", "payment_method_page", "width=800, height=600"); 
      $('#paymentModal').modal('show');     
      $('#params_form').submit();
    });

Params_Form 

.hide
  = simple_form_for @order, url: main_app.payment_jump_path, html: { id: 'params_form'}, data: {target: "#paymentModal", toggle: "modal"} do
    - @order.available_payment_methods.each do |method|
      = hidden_field_tag "order[payments_attributes][][payment_method_id]", method.id, id: "payment_method_id_copy"
    = hidden_field_tag "order[payments_attributes][][payment_button_id]", nil, id: "payment_button_id_copy"
    = hidden_field_tag "order[payments_attributes][][payment_frequency]", nil, id: "payment_frequency_copy"
    button.submit-btn data-target="#paymentModal" data-toggle="modal" type="submit"

Javascript в ожидании закрытия внешнего окна 

 $(document).ready(function(event){
    start_at = +new Date();
    $.poll(10000, function(retry){
      $.get('/payments/check.json', function(response, status){
        if (response['completed'] == true) {
          $('#paymentModal').modal('hide');
          $('.payment-message-waiting').hide();
          $('.payment-message-success').removeClass('hide');
          $('form#checkout_form_payment_button').submit();
        } else {
          if (response['failed'] == true) {
            $('.payment-message-waiting').hide();
            $('.payment-message-error').removeClass('hide')
          } else {
            retry_at = +new Date();

            delta = retry_at-start_at

            // 5 min => 300000 miliseconds => 5 * 60 * 1000
            if ( delta > 300000 ){
              window.location = '/content/session-expired';
            } else {
              retry();
            }
          }
        }
      })
    })

    $.poll(5000, function(retry) {
      $.get('/payments/check_payment_presence.js', function(response, status){
        var payment_info = document.getElementById('payment-info').hasChildNodes();
        if(!payment_info) {
          retry();
        }
      })
    })
  });

1 Ответ

0 голосов
/ 15 января 2020

Решение, которое я реализовал (спасибо @hermes_sandoval за помощь) в том, чтобы заставить другую страницу открываться в Iframe внутри модала, таким образом, мой пользователь всегда контролирует, долго ли обрабатывается служба. 

javascript:
  $(document).ready(function() {
    $('#payment_button_id_copy').val(#{@order.payments.first.payment_button["codigoMedioPago"]})
    $('#payment_frequency_copy').val("#{@order.payments.first.payment_frequency}")
    $('#iframeRedirect').html('');
    var iframe = "<iframe name='payment_method_page'  style='height: 660px;'/>";
    $('#iframeRedirect').append(iframe);
    $('#paymentModal').modal('show');
    $('#params_form').submit();
  });
...