JQuery скрипт проблема в другом браузере

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

Первая часть в порядке, но так как я не могу контролировать общую запись, так как она рассчитывается на бэкэнде (.confirmit-as-sum-field), я могу только захватить отображаемый текст и посмотреть, если он через край. Это прекрасно работает в Chrome, но не в IE, например, IE, кажется, задерживает смену цвета, есть два текстовых поля, если первое - 70, второе - 40, общее количество будет 110, общее количество будет по-прежнему черным шрифтом, он станет красным, пока я не добавлю еще одну цифру во 2-м блоке к 400, что в итоге составит 470. И он останется красным, если я добавлю больше цифр в любой из блоков. Однако, если я в первый раз доведу итоговое значение до 100, цвет шрифта будет по-прежнему красным, он станет черным, только если я во второй раз откорректирую цифру до другого числа ниже отметки 100.

Вот сценарий, не уверен, что вы могли увидеть какие-либо специфические проблемы браузера или альтернативные способы, которые я могу попробовать:

//flag numbers over 100%
$('.numberinput').each(function()
{
$(this).keyup(function(){
if($(this).val()>100){$(this).css('color','red');}
else{$(this).css('color','black');}

//flag total over 100%
var sum = $('.confirmit-as-sum-field').text();
if(parseInt(sum) >100){$('.confirmit-as-sum-field').css('color','red')}
else{$('.confirmit-as-sum-field').css('color','black')}
});
});

Большое спасибо, Рой


Вот бэкенд биты, не уверен, что это поможет:

 var args = ["wix-components","wix-numeric","wix-auto-sum","wix-focus-first","yui-later"],
            yui3 = YUI({
                loadErrorFn: showFieldsets,
                groups: {
                    wix: {
                        base: '/cf_clientutil/wix/',
                        combine: false,
                        modules: {"confirmit-cblib":{"fullpath":"/cf_clientutil/scripts/cblib-min.js?v=2891_P19c","requires":["dom","event","node","oop"]},"confirmit-dedchain":{"fullpath":"/cf_clientutil/scripts/dedchain-min.js?v=2891_P19c","requires":["confirmit-cblib"]},"wix":{"path":"wix-min.js?v=2891_P19c","requires":["node"]},"wix-components":{"path":"wix-components-min.js?v=2891_P19c","requires":["wix","confirmit-cblib","plugin","base","selector-css3"]},"wix-slider-base":{"path":"slider-base-min.js","requires":["wix","event-resize"]},"wix-numeric":{"path":"numeric-min.js?v=2891_P19c","requires":null},"wix-auto-sum":{"path":"auto-sum-min.js?v=2891_P19c","requires":null},"wix-focus-first":{"path":"wix-focus-first-min.js?v=2891_P19c","requires":["wix"]}}
                    }
                },
                allowRollup: false,
                filter: '',
                comboBase: '/wix/combo.aspx?',
                combine: true
            });

        args.push( function(Y) {
            var wix = Y.WixInstance = new Y.Wix( {"formId":"ctlform","debug":false,"capi":false,"offline":false,"defaultLanguage":9} );
            Y.WixInstance.addComponent({"type":"Numeric","hostId":"ps1_1","fieldsetId":"fieldset_ps1","digits":3,"decimals":0,"thousandSep":"%2C","decSep":"."});
            Y.WixInstance.addComponent({"type":"Numeric","hostId":"ps1_2","fieldsetId":"fieldset_ps1","digits":3,"decimals":0,"thousandSep":"%2C","decSep":"."});
            Y.WixInstance.addComponent({"type":"AutoSum","fieldsetId":"fieldset_ps1","questionType":"multi","inputPrefix":"","inputSuffix":"%","scale":0,"sumLabel":"Total"});
            window.wix = Y.WixInstance;
            window.wix.Y = Y;
        window.onerror = Y.WixInstance.handleError;

            Y.WixInstance.fire('ready');
        } );

        yui3.use.apply(yui3, args);


    } else {

        showFieldsets();
    }

})();

1 ответ

Решение

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

Вот что происходит:

  • вы вводите номер
  • AJAX звонок на бэкэнд
  • вы чекаете на сумму
  • AJAX возвращает и заполняет поле суммы
  • Ничего не произошло
  • вы вводите другой номер
  • AJAX звонок на бэкэнд
  • Вы проверяете сумму, находите результат предыдущего вызова AJAX
  • так далее...

Вот почему кажется, что ваша программа проверки сумм всегда "запаздывает на одну клавишу позже".

ОБНОВИТЬ

После быстрого взгляда на бэкэнд, он, кажется, делает несколько вызовов AJAX, и я не заметил, что он позволяет вам устанавливать обратные вызовы. Это, вероятно, то, что вызывает задержку. Вот что я сделаю: я бы установил слушатель onchange для вашего элемента поля суммы, проверил сумму и нарисовал число при каждом изменении. Что-то вроде этого:

$ ('. verify-as-sum-field').on('change', function(){ var sum = $('. verifymit-as-sum-field').text(); if(parseInt(sum) >100){$('. Accept-as-sum-field'). Css('color','red')} else{$('. Verifymit-as-sum-field'). Css('color','black')} });

Вот как это должно работать для неформальных элементов: http://jsfiddle.net/FUtb9/1/ (попробуйте изменить его значение с вашего DevTools)

$('p.confirmit-as-sum-field').bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function(event)    {
    var sum = + $('p.confirmit-as-sum-field').text();
    if(parseInt(sum) >100){$('.confirmit-as-sum-field').css('color','red')}
    else{$('p.confirmit-as-sum-field').css('color','black')}
    alert(sum);
});

Вот оно с полем ввода, которое вы можете использовать для изменения текста элемента поля суммы: http://jsfiddle.net/FUtb9/2/

Другие вопросы по тегам