UIkit3: to confirm user input in UIkit.modal.prompt using UIkit.modal.confirm

Question

I want to use UIkit.modal.confirm to confirm users' input in UIkit.modal.prompt, if they confirm then proceed, otherwise then back to UIkit.modal.confirm.

UIkit.modal.prompt('Input','').then(function(input){
  UIkit.modal.confirm(input).then(function(){
    .... //proceed
  },function(){
    ..... // How do I got back to the previous prompt?
  })
})

moped · Answer 1 · 2019-06-28T15:23:01.663

This may not be the best solution, but it needs to be recursive so I basically divided your code into 2 separate functions, one for prompting (and asking for confirmation) and the other for confirmation (and showing prompt if needed).

Code is commented so you can understand what happens in what step.

// run prompt on page load
prompt();

// display confirmation, after confirming, value is printed, if not confirmed, prompt is displayed again
function confirm(input) {
  UIkit.modal.confirm('Confirm ' + input + ' ?').then(
    function() {
      // input confirmed, set value to the field
      document.getElementById('confirmed-value').value = input;
    },
    function() {
      // input not confirmed, show prompt again
      prompt(input);
    }
  );
}

// display prompt, after entering value ask for confirmation, if empty, prompt again, if cancelled, stop showing prompt, if after cancelled confirmation, shows previously entered value
function prompt(input = "") {
  UIkit.modal.prompt('Please enter your value', input).then(function(input) {
    // prompt submitted, input is not null
    if (input) {
      confirm(input);
    }
    // prompt submitted, input is not null but is empty
    else if (input === "") {
      prompt();
    }
  });
}

// trigger prompt with the button click (example)
UIkit.util.on('#trigger-prompt', 'click', function() {
  prompt();
});

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/css/uikit.min.css" integrity="sha256-sO/kKFCHPL4rhYHDyHC2dwGlaIBttifOfQ0ZaGLAheo=" crossorigin="anonymous" />

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/js/uikit.min.js" integrity="sha256-jN++RwBoYassp9qTuZDfQuptszFdL1Pm4dKZWS5KjjY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/js/uikit-icons.min.js" integrity="sha256-6pktS+jePPdXx9oCn8r4hS5jR1eq0Ry7vbifYtG0LDU=" crossorigin="anonymous"></script>

<button id="trigger-prompt" class="uk-button uk-position-top-center uk-button-primary uk-margin">PROMPT</button>
<output id="confirmed-value" class="uk-input uk-position-center" />

UIkit3: to confirm user input in UIkit.modal.prompt using UIkit.modal.confirm

1 Answers1