我正在尝试开发基于 jQuery 对话框表单的可重用函数,作为 JS 提示的替代品。我需要用户在执行其他JS代码之前输入数据(后面的AJAX请求取决于用户的输入)。
如果按下“确定”按钮或“返回”按钮,该函数应读取一个文本字段并返回输入的值。
我成功地创建了带有回调的函数,并且它正在工作,只是它不等待用户使用react以及函数执行后的代码。
我知道 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
}
最佳答案
由于我的评论有帮助,我将添加答案以方便快速访问。 基本上,您希望格式化代码,以便对话框之后的所有内容都直接在回调内运行或从回调启动。
因此假设一个简单的 getTxtField 提示方法接受消息和回调函数,而不是:
stuffBeforePrompt();
getTxtField('stuff', function() { });
stuffAfterPrompt();
您只需要:
stuffBeforePrompt();
getTxtField('stuff', function() {
stuffAfterPrompt();
});
也许您可以使用“线程”或工作人员制定一些解决方案,在单独的线程上运行提示并 sleep main 直到结果(反之亦然);但我怀疑这是否值得稍微使用方便。
关于javascript - 如何防止在 jquery 对话框表单中输入数据之前执行 javascript 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54544148/