Как предотвратить выполнение кода JavaScript перед вводом данных в диалоговом окне jquery - PullRequest
Новая
       21

Как предотвратить выполнение кода JavaScript перед вводом данных в диалоговом окне jquery

0 голосов
/ 06 февраля 2019

Я пытаюсь разработать повторно используемую функцию на основе диалоговой формы jQuery в качестве замены для приглашения JS.Мне нужно, чтобы пользователь вводил данные до того, как будет выполнен другой код JS (следующий запрос AJAX зависит от ввода пользователя).

Функция должна прочитать одно текстовое поле и вернуть введенное значение, если кнопка OK или Return

Мне удалось создать функцию с обратным вызовом, и она работает, за исключением того, что она не ждет реакции пользователя и кода после выполнения функции.

Я понимаючто вызовы jQuery являются асинхронными и пробными версиями с отложенной опцией, но это тоже не сработало.

Есть ли способ заставить мой код ждать ввода пользователя, прежде чем он продолжит выполнение?Конечно, идеальным решением было бы использовать, например, var userInput = getTxtField(....);

Обновление: Функция getTxtField запускается другими действиями пользователя (кнопками): renameFile, renameFolder, addFile и т. Д.

Обновление # 2 Проблема решена

Благодаря предложению @ SuperPrograman я начал думать с логикой асинхронного выполнения.Исходный код был разработан с использованием подхода value = prompt(...), а код AJAX был в нижней части одной функции.Я просто взял код AJAX в отдельной функции, и теперь он работает как положено.Я обновил код JS внизу.

Мой код следующий 

....
<div class='hidden' id='dialog-newName' title=''>
  <label id='label-txtField' for="txtField"></label>
  <input type="text" name="txtField" id="txtField" value="" class="text ui-widget-content ui-corner-all">
</div>        
....
function getTxtField (title, label, defVal, callBack) {
    $('#label-txtField').text(label);
    $('#txtField').val(defVal);
    $( '#dialog-newName' ).dialog({
        modal: true, closeOnEscape: false, 
        height: 200, width: 500,
        title: title, 
        buttons: {
            OK: function() {
                callBack('OK', $('#txtField').val());
                $(this).dialog( "close" );
            },
            Cancel: function() {
                $('#txtField').val('');
                //callBack('Cancel', ''); // not necessary
                $(this).dialog( "close" );
            }
        },
    });
}
...
    switch (action) {
      case 'action1':
       // user pressed button for Action1
       console.log('before dialog getTxtField ');
       getTxtField('Action1', 'Label1', 'defaultValue1', function(buttonP, result) {
         console.log(buttonP + ' value=' + result); // prints OK
       });
      // executed before input finished
      console.log('after dialog getTxtField returnVal=' + newName + ')');
      break;
    case 'action2':
     // ....
     break;
    }
    // proceed with AJAX request for selected action
...
//=========================
// working code
//=========================
$('.selector').click ( function() {
  var frmId = $(this).closest('form').attr('id');
  var action = $(this).attr('ajaxAction');
  var form = $('#theForm')[0];
  var ajaxData = new FormData(form);
  switch action {
    case 'actions that do not require function getTxtField':
      ajaxData.append(specific data for the action);
      ajaxCall (frmId, ajaxData);
      break;
    case 'actions that with function getTxtField':
      getTxtField('Titlexx', 'Labelxx', 'defaultValuexx', function(buttonP, result) {
        // process result
        ajaxData.append(specific data for the action);
        ajaxCall (frmId, ajaxData);
      });
      break;
  }
})

function ajaxCall (id, data) {
  // standard ajax code
}

1 Ответ

0 голосов
/ 07 февраля 2019

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

Итак, предполагая простой метод приглашения getTxtField, принимающий сообщение и функцию обратного вызова вместо: 

stuffBeforePrompt();
getTxtField('stuff', function() { });
stuffAfterPrompt();

Вам просто понадобится: 

stuffBeforePrompt();
getTxtField('stuff', function() {
    stuffAfterPrompt();
});

Возможно, вы могли бы найти какое-то решение, используя «потоки» или рабочие, где вы запускаете приглашение в отдельном потоке и спите в main до результата (или наоборот);но я сомневаюсь, что это стоило бы небольшого удобства использования.

...