H
H
Hayrat2019-05-29 14:05:37
JavaScript
Hayrat, 2019-05-29 14:05:37

How to load ReCaptcha V2 when opening a certain Modal window?

Good day!
I need help with a difficult task for me, but simple for those who understand JavaScript and Bootstrap.
Installed ReCaptcha V2 from Google on the site. All captchas - there are 5 of them, are in modal windows. They are loaded via bootstrap.js on a timer. Naturally, when I open one modal window, a slight freeze begins, because all 5 captchas are loaded at once.
In general, you need to do this:

Если модальное окно имеет название "Captcha1", то загружаем только 'var captcha1=...'

And so on for the rest. I hope I explained clearly.
My captcha code is like this:
spoiler
Modal.prototype.show = function (_relatedTarget) {
    var that = this
    var e    = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })	

    this.$element.trigger(e)

    if (this.isShown || e.isDefaultPrevented()) return

    this.isShown = true

    this.checkScrollbar()
    this.$body.addClass('modal-open')

    this.setScrollbar()
    this.escape()

    this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))

    this.backdrop(function () {
      var transition = $.support.transition && that.$element.hasClass('fade')

      if (!that.$element.parent().length) {
        that.$element.appendTo(that.$body) // don't move modals dom position
      }

      that.$element
        .show()
        .scrollTop(0)

      if (transition) {
        that.$element[0].offsetWidth // force reflow
      }

      that.$element
        .addClass('in')
        .attr('aria-hidden', false)

      that.enforceFocus()

      var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })

      transition ?
        that.$element.find('.modal-dialog') // wait for modal to slide in
          .one('bsTransitionEnd', function () {
            that.$element.trigger('focus').trigger(e)
          })
          .emulateTransitionEnd(300) :
        that.$element.trigger('focus').trigger(e)
    })
  setTimeout(function(){
    var captcha1 = grecaptcha.render('captcha1ID', {
      'sitekey': 'code',
      'theme': 'dark'
    });
    var captcha2 = grecaptcha.render('captcha2ID', {
      'sitekey': 'code',
      'theme': 'dark'
    });	
    var captcha3 = grecaptcha.render('captcha3ID', {
      'sitekey': 'code',
      'theme': 'dark'
    });		
    var captcha4 = grecaptcha.render('captcha4ID', {
      'sitekey': 'code',
      'theme': 'dark'
    });			
    var captcha5 = grecaptcha.render('captcha5ID', {
      'sitekey': 'code',
      'theme': 'dark'
    });			
  } , 1300);		
  }

Answer the question

In order to leave comments, you need to log in

1 answer(s)
H
Hayrat, 2019-05-30
@Hayrat

Found a manual. Problem solved.

$('#Test').on('shown.bs.modal', function () {
    var captcha = grecaptcha.render('captcha', {
      'sitekey': 'mycode',
      'theme': 'dark'
    });		
  });

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question