0

I have a form where user can enter some values in the beginning and from then onward all the values will be pre-filled whenever the user comes back on site. Input values are displayed fine on FF. However, I can not see the values if I use Chrome.

JS (I have included all the code, but the problematic part is in (Adding value to the input element piece of code)

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 markup

<ul id="bank_ul" class="list-unstyled">
    <!-- Dynamically populated in myaccOnLoad(); -->
</ul>
2
  • Have you tried putting autocomplete="off" attributes on all the input fields?
    – josephnvu
    May 15, 2014 at 9:01
  • what does it have to do with autocomplete="off" ???
    – 0xburned
    May 15, 2014 at 9:03

1 Answer 1

0

The underlying problem with Chrome display issue was because of the sync AJAX call.

When fetching the details from JSON I was using sync AJAX call. Since I had multiple tabs and under all tabs I had different forms. The one I posted in my question was in another tab and because of Sync ajax call only the 1st tab input values were populated/displayed on the page.

Changing sync to async in AJAX call solved the issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.