SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    May 2005
    Location
    London, ON
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Weird Problem - function not being called...

    Hello,

    I am trying to debug a basic script I am running in IE. It works fine in firefox, but it seems that the function being called onClick() is not actually being called in IE.

    Here is the code (we're looking at the showPreview() function):
    Code:
    <script type="text/javascript">
    
    function resetScreen() {
    document.getElementById("announcementPreview").innerHTML='<?php echo $info; ?>';
    }
    
    function showUpload() {
    document.getElementById("announcementPreview").innerHTML='<center><img src="images/loadingAnimation.gif" alt="..." border="0" /><br /><b>Uploading...</b></center>';
    }
    
    function showEmail() {
    document.getElementById("announcementPreview").innerHTML='<center><img src="images/loadingAnimation.gif" alt="..." border="0" /><br /><b>Sending Emails...</b></center>';
    }
    
    function showPreview(spnsr, pgm, cmp) {
    	var xmlHttp;
    	alert("I'm here!");
    	try {
    		// Firefox, Opera 8.0+, Safari
    		xmlHttp=new XMLHttpRequest();
    	} catch (e) {
    		// Internet Explorer
    		try {
    			alert("Trying IE 1");
    			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    		} catch (e) {
    			try {
    				alert("Trying IE");
    				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    			} catch (e) {
    				alert("Your browser does not support AJAX!");
    			return false;
    			}
    		}
    	}
    
    	xmlHttp.onreadystatechange=function() {
    		if(xmlHttp.readyState==4) {
    			document.getElementById("announcementPreview").innerHTML=xmlHttp.responseText;
    		}
    /*		if(xmlHttp.readyState==1 || xmlHttp.readyState==2 || xmlHttp.readyState==3) {
    			var loadingImg = '<img src="images/loadingAnimation.gif" alt="Loading.." style="margin:auto;">';
    			document.getElementById("announcementPreview").innerHTML=loadingImg;
    		}
    */
    	}
    
    	var appendString = "?spnsr="+spnsr+"&pgm="+pgm+"&cmp="+cmp;
    	xmlHttp.open("GET","AJAX_showAnnouncement.php" + appendString,true);
    	xmlHttp.send();
    
    }
      
    </script>
    The problem is the showPreview() function. As you can see I currently have an alert box there to let me know that the browser has at least entered the function. This alert never displays in IE.

    Here is the code that SHOULD be calling this function (it happens in the <option> tags...):

    Code:
    <form action="index.php" method="post">
    <select name="choices[]" size="10" multiple>
    <option onclick="resetScreen()" value="">Clear Preview</option>
    <option value="">- - - - - - - - - - - -</option>
     <option onclick="showPreview('RES000000', '1200', '200706');" value="RES000000-1200-200706">RES000000-1200-200706.html</option>
    <option onclick="showPreview('RES000678', '0100', '20071101');" value="RES000678-0100-20071101">RES000678-0100-20071101.html</option>
    <option onclick="showPreview('RES000678', '0400', '20070101');" value="RES000678-0400-20070101">RES000678-0400-20070101.html</option>
    <option onclick="showPreview('RES000678', '1101', '20071101');" value="RES000678-1101-20071101">RES000678-1101-20071101.html</option></select><br />
    <input name="submit" type="submit" value="Generate These Announcements" style="width:225px;"/><br /><br />
    <input name="submit" type="submit" value="Generate All Announcements" style="width:210px;" /><br /><br />
    <input name="submit" type="submit" value="Generate Listings Page" /><br /><br />
    <input name="submit" type="submit" value="Upload Files" onclick="showUpload();" /><br /><br />
    <input name="submit" type="submit" value="Send Emails" onclick="showEmail();" />
    </form>
    Any ideas?

    A few notes:
    - javascript is enabled
    - the alert box works if I put it outside the functions (that is, it runs when the page is loaded)

    Much appreciating to anyone who can solve this!
    Ryan Price
    Subscribe to my blog for regular tips and tricks

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think OPTIONs have click events - at least, I've never used them. I always use the change event of the SELECT and test the value of it.

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE doesn't support any non-proprietary (e.g. normal HTML) events on <option> elements. You'll need to use an onchange handler on the <select> and string.split().

    It's best to avoid using inline event handlers. I suggest you read up on Unobtrusive JavaScript and other JavaScript Best Practices.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •