Internet Explorer не выполняет Javascript в порядке

Я занимаюсь разработкой веб-приложения, которое должно выполнять некоторую обработку, сохраняя при этом информацию на экране. Очевидно, что это лучше всего подходит для AJAX, который я использую. Однако, до начала запроса AJAX, я делаю несколько визуальных изменений через Javascript. В частности:Internet Explorer не выполняет Javascript в порядке

document.getElementById('calc').innerHTML = 'Calculating...'; document.getElementById('calc').disabled = true;

я затем, чтобы вызвать сервлет с помощью AJAX.

Это прекрасно работает в Firefox. Однако в Internet Explorer (версия 8) визуальные изменения никогда не вступают в силу. Приложение просто сидит там минут или два, пока обработка AJAX не будет выполнена. Кажется, что код AJAX выполняется до изменения страницы, но я не знаю, почему это было бы.

Любая помощь будет принята с благодарностью.

EDIT: Вот мои лучшие усилия по Короткому, самодостаточные, Correct, пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<meta http-equiv="Pragma" content="no-cache"> 
<meta http-equiv="Cache-Control" content="no-cache"> 
<script> 
var inEdit = 0; 
var calcCurrent = false; 
function recalc() { 
var xmlhttp=new XMLHttpRequest(); 
if (xmlhttp==null) 
{ 
    var tmp = "Your browser does not support XML! "; 
    tmp += "Please contact your Technical Support division for information on how to upgrade."; 
    alert(tmp); 
} 
else 
{ 
    document.getElementById('calc').innerHTML = 'Calculating...'; 
    document.getElementById('calc').disabled = true; 
    var url = "http://www.nzherald.co.nz/"; 
    xmlhttp.open("GET",url,false); 
    xmlhttp.send(null); 
    if (xmlhttp.responseText.indexOf("Success")>=0) { 
    alert(xmlhttp.responseText); 
    } 
    else 
    alert(xmlhttp.responseText); 
    document.getElementById('calc').value = 'Recalculate'; 
    document.getElementById('calc').disabled = false; 
} 
} 
</script> 
</head> 
<body> 
<a id='calc' class='Button' href="javascript:recalc()" >Recalculate</a> 
</body> 
</html>

Единственный пример проблемы с этим состоит в том, что этот URL возвращает почти мгновенно. В моем приложении это указывает на страницу, которая обрабатывает базу данных около минуты, и поэтому проблема намного более очевидна.

источник

2012-01-18 enjiner

Какой у вас элемент 'calc'? Он может не поддерживать 'innerHTML' в IE8 – Phil

, убедитесь, что в javascript не указаны какие-либо инструкции console.log, или IE может не запускать код после них. Это будет, если вы откроете инструменты разработчика во время его запуска. Если это проблема – rncrtr

Больше кода будет оценено. – j08691

Вы передаете «false» для параметра async для вызова xmlhttp.open(). Поскольку стек не разматывается, поскольку вы устанавливаете свойство innerHTML элемента calc, IE не имел возможности перерисовать изображение.

У вас есть несколько вариантов.

Перестройте свой код таким образом, чтобы вы делали асинхронный вызов асинхронным и получали результат через уведомление об обратном вызове.
ИЛИ .... Задайте свойство innerHTML на этапе calc, затем вызовите setTimeout с задержкой 0 и функцией обратного вызова, которая написана для вызова xmlhttp.open, как у вас есть сейчас. Это позволит стеку разматывать, а IE будет перерисовывать изменения DOM, за которыми следует выполнение вызова ajax. Ниже приведена взломанная версия вашего кода, чтобы продемонстрировать, о чем я говорю.

Ниже приведен взломанный код, демонстрирующий # 2.

var xmlhttp; 

function recalc() { 
    xmlhttp=new XMLHttpRequest(); 
    if (xmlhttp==null) 
    { 
     var tmp = "Your browser does not support XML! "; 
     tmp += "Please contact your Technical Support division for information on how to upgrade."; 
     alert(tmp); 
    } 
    else 
    { 
     document.getElementById('calc').innerHTML = 'Calculating...'; 
     document.getElementById('calc').disabled = true; 
     setTimeout(recalc_start, 0); 
    } 
} 

function recalc_start() { 
    var url = "http://www.nzherald.co.nz/"; 

    xmlhttp.open("GET",url,false); 
    xmlhttp.send(null); 
    if (xmlhttp.responseText.indexOf("Success")>=0) { 
    alert(xmlhttp.responseText); 
    } 
    else { 
    alert(xmlhttp.responseText); 
    } 
    document.getElementById('calc').value = 'Recalculate'; 
    document.getElementById('calc').disabled = false; 
}

источник

2012-01-18 04:50:32 selbie

Если приведенный выше код snippit не работает, попробуйте изменить таймаут с «0» на «1» или что-то большее. – selbie

Удивительный! Эта опция (с использованием тайм-аута) полностью решает мою проблему. Приятно знать, почему это происходит. Спасибо. – enjiner

@enjiner - Рад, что это сработало. в идеале вы идете с опцией №1. В противном случае очень длинная задержка в запросе ajax скорее всего заставит вашу веб-страницу «заморозить» (или, по крайней мере, другой код javascript) работать до тех пор, пока не завершится вызов ajax. – selbie

Я предполагаю, что это <input id='calc' type='text' /> элемент:

document.getElementById('calc').value = 'Calculating...'; 
document.getElementById('calc').setAttribute('disabled','disabled');

Для лучшей совместимости многоплатформенный браузера, попробуйте использовать JQuery:

$("#calc").val('Calculating...').attr('disabled','disabled');

источник

2012-01-18 01:01:49

Не могу вспомнить браузер, который бы затронул первый пример. jQuery здесь не делает ничего полезного. – Phil

@ ron-for «лучшая совместимость с браузером» просто устанавливает свойство напрямую, нет необходимости в setAttribtue или jQuery (или его беспорядочной * attr * функции). – RobG

Эти две строки кода очень проста. Это две вещи, которые приходят на ум:

У вас есть идентификатор, определенный для другого элемента. Можете ли вы дважды проверить, что calc не используется нигде на странице? Предпочтительно, сделав Ctrl + F в View Source.
Подтвердите свой HTML. Убедитесь, что в атрибуте отсутствуют какие-либо закрывающие теги или кавычки.

источник

2012-01-18 03:19:21 epignosisx

Спасибо за предложения epignosisx. Я проверил обе эти проблемы. Проверка выявила много несоответствующих HTML, включая отсутствующие теги. К сожалению, проблема, которую я описал, все еще присутствует, но было хорошо определить проблемы проверки! Еще раз спасибо. – enjiner

Internet Explorer не выполняет Javascript в порядке

ответ

Смежные вопросы