IE not responding to onclick event.

@Pbear74Aug 17.2009

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:

[code=html]<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> [/code]

to post a comment

JavaScript

16 Comments(s) _↴

@natepizzleAug 17.2009 — #can we see the javascript code?

@Sterling_IsfineAug 17.2009 — #The links probably need [i]href="#"[/i] and the onclick handler should end with [i]return false[/i].

@Pbear74authorAug 17.2009 — #each link gets the onclick event added in the RowDataBound event:

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

and this is the javascript code:

[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;
 }
 }
 }
 }
 [/CODE]

@natepizzleAug 17.2009 — #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.

@Pbear74authorAug 17.2009 — #The links probably need [i]href="#"[/i] and the onclick handler should end with [i]return false[/i].[/QUOTE]

adding return false made no difference.

adding the href broke it in FF.

@natepizzleAug 17.2009 — #did you try removing the single quotes?

@Pbear74authorAug 17.2009 — #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.[/QUOTE]

nope, no difference

@Pbear74authorAug 17.2009 — #did you try removing the single quotes?[/QUOTE]

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

@natepizzleAug 17.2009 — #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

@Pbear74authorAug 17.2009 — #sorry nate, this is an intranet app.

@natepizzleAug 17.2009 — #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.

@natepizzleAug 17.2009 — #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.

@natepizzleAug 17.2009 — #var modal = $find(

Also are you sure the $ should be there?

@Pbear74authorAug 17.2009 — #should i use getElement ById instead of $find?

@natepizzleAug 17.2009 — #To be honest im not a fan of asp and I think bill gates should burn his company to the ground but I did come across this http://forums.asp.net/t/1336800.aspx

Let me know.

@Pbear74authorAug 17.2009 — #ok, i figured it out. i loaded chrome and used their javascript console which displayed an error about a label control. once i commented out that section of code it started working in IE.

It's always the stupidest little things.

Thanks for you help guys.

Also in #JavaScript _↴

Javascripting Firefox [RESOLVED] Script working in IE but not FF or Saf Turning a table column into an array

Success!

Help @Pbear74 spread the word by sharing this article on Twitter...

Tweet This

IE not responding to onclick event.

16 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

IE not responding to onclick event.

16 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

16 Comments(s) _↴

Also in #JavaScript _↴