IE not responding to onclick event.

[Pbear74]

Ive got a page that has several dynmically created links and each on has an onclick event to open a modal popup with further details on that item.

The problem I have is that it works perfectly in FF but not in IE (I'm using v7). There are no javascript errors, it just does not respond to the click event.

I can see that it creates the onclick in event for each item in the source, is there anything special I have to do to make this work in IE?

Here is a part of the rendered code:

<table cellspacing="0" cellpadding="4" border="0" id="gvNewsItems" style="color:#333333;border-collapse:collapse;">

		<tr align="left" style="color:White;background-color:#990000;font-size:Small;font-weight:bold;">
			<th scope="col"> </th><th scope="col"><a href="javascript:__doPostBack('gvNewsItems','Sort$postdate')" style="color:White;">Date</a></th><th align="left" scope="col"><a href="javascript:__doPostBack('gvNewsItems','Sort$Subject')" style="color:White;">Subject</a></th>
		</tr><tr style="color:#333333;background-color:#FFFBD6;font-size:Small;">
			<td>
                                <a id="gvNewsItems_ctl02_HyperLink1" onclick="ShowModalPopup('1629'); animate('divPreview');" style="color:Blue;text-decoration:underline;">Preview</a>
                            </td><td>07/28/2009          </td><td style="width:350px;">Test 1</td>

		</tr><tr style="color:#333333;background-color:White;font-size:Small;">
			<td>
                                <a id="gvNewsItems_ctl03_HyperLink1" onclick="ShowModalPopup('1628'); animate('divPreview');" style="color:Blue;text-decoration:underline;">Preview</a>
                            </td><td>07/28/2009          </td><td style="width:350px;">Test 3</td>
		</tr><tr style="color:#333333;background-color:#FFFBD6;font-size:Small;">
			<td>
                                <a id="gvNewsItems_ctl04_HyperLink1" onclick="ShowModalPopup('1600'); animate('divPreview');" style="color:Blue;text-decoration:underline;">Preview</a>

                            </td><td>06/30/2009          </td><td style="width:350px;">Test 4</td>
		</tr><tr style="color:#333333;background-color:White;font-size:Small;">
			<td>
                                <a id="gvNewsItems_ctl05_HyperLink1" onclick="ShowModalPopup('1599'); animate('divPreview');" style="color:Blue;text-decoration:underline;">Preview</a>
                            </td><td>06/24/2009          </td><td style="width:350px;">Test 5</td>
		</tr><tr style="color:#333333;background-color:#FFFBD6;font-size:Small;">

			<td>
                                <a id="gvNewsItems_ctl06_HyperLink1" onclick="ShowModalPopup('1598'); animate('divPreview');" style="color:Blue;text-decoration:underline;">Preview</a>
                            </td><td>06/22/2009          </td><td style="width:350px;">Test 6</td>
		</tr>
	</table>

[natepizzle]

can we see the javascript code?

[Sterling Isfine]

The links probably need href="#" and the onclick handler should end with return false.

[Pbear74]

each link gets the onclick event added in the RowDataBound event:

                HyperLink HyperLink1 = (HyperLink)e.Row.FindControl("HyperLink1");
                HyperLink1.Attributes.Add("onclick", "ShowModalPopup('" + gvNewsItems.DataKeys[e.Row.RowIndex].Value + "'); animate('divPreview');");

and this is the javascript code:

<script language="javascript" type="text/javascript">
        function ShowModalPopup(id) {
            
            var modal = $find('mpePopup');
            modal.show();
            SubmitNews2009.getNewsItem.FetchPublishedNews(id, DisplayResult);
        }

        function DisplayResult(result) {
            var doc;
            if (window.ActiveXObject) {
                doc = new ActiveXObject("Microsoft.XMLDOM");
                doc.async = "false";
                doc.loadXML(result);
            }
            else {
                var parser = new DOMParser();
                var doc = parser.parseFromString(result, "text/xml");
            }

            var root = doc.documentElement.childNodes;
            var tags;

            for (var i = 0; i < root.length; i++) {
                if (root[i].nodeType == 1) {
                    tags = root[i].childNodes;
                }
            }

            for (var i = 0; i < tags.length; i++) {
                if (tags[i].nodeType == 1) {
                    var xmlvalue = tags[i].childNodes[0].nodeValue;

                    switch (tags[i].nodeName) {
//                        case "ID":
//                            var label = document.getElementById('lblID');
//                            label.innerHTML = xmlvalue;
//                            document.getElementById('hidID').innerHTML = xmlvalue;
//                            break;
                        case "name":
                            document.getElementById('lblName').innerHTML = xmlvalue;
                            break;
                        case "email":
                            var email = document.getElementById('divEmail');
                            email.innerHTML = "Email: <a href=" + "mailto:" + xmlvalue + ">" + xmlvalue + "</a>";
                            break;
                        case "subject":
                            document.getElementById('mpeTitle').innerHTML = "Plaza News - " + xmlvalue;
                            break;
                        case "message":
                            document.getElementById('divContent').innerHTML = xmlvalue;
                            break;
                    }
                }
            }
        }

[natepizzle]

I noticed your passing your numbers in as strings instead of integers eg onclick="ShowModalPopup('1629'); and I have had numerous errors with doing something like this. Take out the ' from around the 1629 and see if IE7 likes it better.

[Pbear74]

The links probably need href="#" and the onclick handler should end with return false.

adding return false made no difference.
adding the href broke it in FF.

[natepizzle]

did you try removing the single quotes?

[Pbear74]

I noticed your passing your numbers in as strings instead of integers eg onclick="ShowModalPopup('1629'); and I have had numerous errors with doing something like this. Take out the ' from around the 1629 and see if IE7 likes it better.

nope, no difference

[Pbear74]

did you try removing the single quotes?

yes, single quotes are gone. still works in FF but not IE

[natepizzle]

Can you give me the link to your page? Im gonna check it out in ie7 and ie8. No one has answered my post yet so i have some spare time...lol

[Pbear74]

sorry nate, this is an intranet app.

[natepizzle]

Ok. The onclick has been supported in ie since v3 for the a tag. I suggest removing each of the functions in the onclick one at a time and seeing if you can narrow down the problem to a single function. If that works then you could put the animate function inside the ShowModalPopup function at the end. If not then try changing onclick="ShowModalPopup('1599'); animate('divPreview');" to href="javascript:ShowModalPopup('1599'); animate('divPreview');" and see what you get. Let me know your results.

[natepizzle]

I just tried the code you supplied in ie7 and the onclick is working fine altho I do not have the full code to test further so I'm betting something in your javascript is causing it to muck up somewhere.

[natepizzle]

var modal = $find(

Also are you sure the $ should be there?

[Pbear74]

should i use getElement ById instead of $find?