IE executes JavaScript before AJAX updater runs

**matt1dmb** · Aug 9, 2007, 10:01

Even though the AJAX call is after I hide the DIV, by using an alert I was able to verify the IE is evaluating the JavaScript before running the AJAX update to pull in the new content. FF works fine.

Here's the calling page:

Code:

<script>
  function getPrices(id,p1){
  		p2 = p1;
		id2 = id;
  	var setID = id;
	var setPath = 'content.html';
   
	if (document.getElementsByClassName('dwp_2')){
			idToChange = document.getElementsByClassName('dwp_2')
			for(i=0; i <idToChange.length;i++)
			{ 
				new Effect.Fade(idToChange[i],{duration: .2,queue:'front'});
				idToChange[i].className='';
			}
		}
	
	new Ajax.Updater(setID,setPath, { // URL for next <IMG> tag 
		asynchronous: true,
		evalScripts:true,
		method:'get', 
		onSuccess: showAjax() 
		})
			 
		
  	function showAjax() { 
		new Effect.Appear(setID,{duration: .2,afterFinish: setNewID,queue:'end'});
		}
	function setNewID() {
		document.getElementById(setID).className='dwp_2';
	}
  	}
  
  </script>

</head>

<body>
<a href="#" onclick="getPrices('updateMe','395');">Make It</a>
<div id="updateMe" style="display:none;"></div>
<p>&nbsp;</p>
<a href="#" onclick="getPrices('updateMe2','895');">Make It</a>
<div id="updateMe2" style="display:none;"></div>

And here's the AJAX content:

Code:

<script>
p3 = p2 - 0;

document.getElementById('a1').innerHTML = '$'+p3;
document.getElementById('a2').innerHTML = '$'+(p3+100);
document.getElementById('a3').innerHTML = '$'+(p3+150);


alert(p3);

</script>
a1
	<div id="a1"></div>
a2
	<div id="a2"></div>
a3
	<div id="a3"></div>


<a id="closeLink" href="#" onclick="new Effect.toggle(id2,'appear',{duration: .2}); return false;">Click To Close</a>

Do I need to remove the previous AJAX content from the DOM or something?