Question

我有一个表单，用户可以在开头输入一些值，从那时起，只要用户回到现场，所有值都将被预先填充。输入值在FF上正常显示。但是，如果我使用Chrome，则无法看到这些值。

JS（我已经包含了所有代码，但问题部分在于（为输入元素代码片添加值）

function drawPaymentDetailsTab(bankInfoMap, playerDetailsMap) {

    // Clear the bank_ul
    $.each(bankInfoMap, function(index, value) {
        var provider = value.provider,
            methodId = value.method;

        // Appending select option
        var option = document.createElement("option");
        option.text = getPaymentDetailsSelection(provider, methodId);
        option.value = provider + '_' + methodId;
        document.getElementById("selectedBankAccountType").appendChild(option);

        // Stylize bank account type dropdown (if needed)
        if(styledInputs) {
            setTimeout(function() {
                stylizeDropdown("#selectedBankAccountType",10);
            }, 10);
        }

        // Appending div element
        var selectionDiv = document.createElement('div');
        selectionDiv.id = provider + '_' + methodId;
        selectionDiv.style = "display:none";
        document.getElementById("bank_ul").appendChild(selectionDiv);

        // Appending li elements to div
        $.each(value.fields, function(index, fieldsMap) {
            var mainFieldName = fieldsMap.field,
                maxLength = fieldsMap.maxLength;

            var fieldLi = document.createElement('li');
            fieldLi.id = provider + '_' + methodId + '_' + mainFieldName + '_li';
            fieldLi.className = 'form-group has-feedback';
            document.getElementById(provider + '_' + methodId).appendChild(fieldLi);

            // Appending label for the input field
            var inputLabel = document.createElement('label');
            inputLabel.id = mainFieldName + '_label';
            inputLabel.className = 'control-label col-sm-3';
            inputLabel.for = mainFieldName;
            inputLabel.innerHTML = getProviderExtraInfo(provider, methodId, mainFieldName);
            if (!fieldsMap.optional) {
                inputLabel.innerHTML += (fieldsMap.dependent == null) ? ' *' : ' (*)';
            }
            document.getElementById(provider + '_' + methodId + '_' + mainFieldName + '_li').appendChild(inputLabel);

            // Appending wrapper for the input field (bootstrap)
            var inputWrapper = document.createElement('div');
            inputWrapper.id = mainFieldName + '_wrapper';
            inputWrapper.className = 'col-sm-9';
            document.getElementById(provider + '_' + methodId + '_' + mainFieldName + '_li').appendChild(inputWrapper);

            // Appending input element to wrapper
            if (fieldsMap.fieldType == "text") {
                var fieldInput = document.createElement('input');
                fieldInput.type = "text";
                fieldInput.id = mainFieldName;
                fieldInput.className = 'form-control';
                if (maxLength != null) fieldInput.maxLength = maxLength;
                // Uppercase for bic and account fields
                if (mainFieldName == "ibanAccount" || mainFieldName == "ibanBic" || mainFieldName == "bankBic") fieldInput.style.textTransform = "uppercase";
                document.getElementById(mainFieldName + '_wrapper').appendChild(fieldInput);

                // Adding value to the input element
                if(playerDetailsMap[mainFieldName] != null) $("#"+mainFieldName).val(playerDetailsMap[mainFieldName]);
                // Assigning default value
                if ($("#"+mainFieldName).val().length == 0 && fieldsMap.defaultValue != null) $("#"+mainFieldName).val(fieldsMap.defaultValue);
            }

            // Appending wrapper for the feedback (bootstrap)
            var feedbackWrapper = document.createElement('div');
            feedbackWrapper.id = mainFieldName + '_feedback_wrapper';
            feedbackWrapper.className = 'form-control-feedback';
            document.getElementById(mainFieldName + '_wrapper').appendChild(feedbackWrapper);

            // Appending additional elements for feedback wrapper
            var hintImg = document.createElement('img');
            hintImg.title = getProviderHintInfo(provider, methodId, mainFieldName);
            hintImg.alt = '?';
            hintImg.src = '/cms/images/icons/what.png';
            document.getElementById(mainFieldName + '_feedback_wrapper').appendChild(hintImg);

            var spanOk = document.createElement('span');
            spanOk.id = mainFieldName + '_validOK';
            document.getElementById(mainFieldName + '_feedback_wrapper').appendChild(spanOk);

            // Appending error div element to wrapper
            var errorDiv = document.createElement('div');
            errorDiv.className = "bankFieldError help-block error-field";
            errorDiv.id = mainFieldName + "_errorMess";
            document.getElementById(mainFieldName + '_wrapper').appendChild(errorDiv);
        });
    });

HTML标记

<ul id="bank_ul" class="list-unstyled">
    <!-- Dynamically populated in myaccOnLoad(); -->
</ul>

Answer 1

Chrome显示问题的根本问题是因为同步AJAX调用。

从JSON获取详细信息时，我使用的是同步AJAX调用。由于我有多个标签，并且在所有标签下我都有不同的表格。我在我的问题中发布的那个是在另一个标签中，由于同步ajax调用，只有第一个标签输入值被填充/显示在页面上。

在AJAX调用中将同步更改为异步解决了这个问题。

无法在Chrome上显示预填充的输入值 - FF正常工作

1 个答案: