By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,384 Members | 1,886 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,384 IT Pros & Developers. It's quick & easy.

Pass ID to function?

P: 5
I'm attempting display a DIV when clicking on a list item. This works, but only for the first list item. I realized that this was due to the ID not being unique so I made the IDs unique. My question is how do I pass this unique ID from each list item to the relevant javascript function so that it displays the DIV when clicked?

Here's the javascript:
Expand|Select|Wrap|Line Numbers
  1. // Create XmlHttp object.
  2. function createXHR()
  3. {
  4.     try { return new XMLHttpRequest(); } catch(e) {}
  5.     try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {}
  6.     try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {}
  7.     try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
  8.     try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
  9.     alert("XMLHttpRequest not supported");
  10.     return null;
  11. }
  12.  
  13. function sendRequest()
  14. {
  15.     var xhr = createXHR(); // cross browser XHR creation
  16.     if (xhr) // if created run request
  17.     {
  18.         xhr.open("GET","moreContent.php",true);
  19.         xhr.onreadystatechange = function(){handleResponse(xhr);};
  20.         xhr.send(null);
  21.     }
  22. }
  23.  
  24. function handleResponse(xhr)
  25. {
  26.     if (xhr.readyState == 4  && xhr.status == 200)
  27.     {
  28.         var responseOutput = document.getElementById("responseOutput");
  29.         responseOutput.innerHTML = xhr.responseText;
  30.         responseOutput.style.display = "";
  31.     }
  32. }
  33.  
  34. window.onload = function () 
  35. {
  36.     document.getElementById(uniqueId).onclick = sendRequest;   
  37. }
The HTML:
Expand|Select|Wrap|Line Numbers
  1.         foreach($rs as $k => $row)
  2.         {
  3.  
  4.             if (checkFlag($row[flags], TEST_FAILED))
  5.             {
  6.                 echo "<li id=\"failContent\">";
  7.             }
  8.             else
  9.             {
  10.                 echo "<li id=\"$row[id]\">";
  11.             }
  12.  
  13.                 echo "Summary data";
  14.  
  15.                 echo "<div id=\"responseOutput\"></div>";
  16.  
  17.             echo "</li>";
  18.  
  19.             echo "\n";
  20.         }
  21.  
Jul 31 '08 #1
Share this Question
Share on Google+
7 Replies


acoder
Expert Mod 15k+
P: 16,027
You need to add an onclick to each element. You can add that by getting all the elements via document.getElementsByTagName("li") and looping over them to add the onclick. To get the target of the event, see this link.
Jul 31 '08 #2

P: 5
It now works after changing the following:
Expand|Select|Wrap|Line Numbers
  1. window.onload = function () 
  2. {
  3.     var arr = document.getElementsByTagName("li");
  4.     for(var i = 0; i < arr.length; i++)
  5.     {
  6.         document.getElementsByTagName("li")[i].onclick = sendRequest;       
  7.     }
  8. }
  9.  
And added:
Expand|Select|Wrap|Line Numbers
  1. var theId
  2. function getId(e)
  3. {
  4.     var targ;
  5.     if (!e)
  6.     {
  7.         var e = window.event;
  8.     }
  9.     if (e.target)
  10.     {
  11.         targ = e.target;
  12.     }
  13.     else if (e.srcElement)
  14.     {
  15.         targ = e.srcElement;
  16.     }
  17.     if (targ.nodeType == 3) // defeat Safari bug
  18.     {
  19.         targ = targ.parentNode;
  20.     }
  21.     theId=targ.id
  22.     //alert(theId)
  23. }
  24.  
  25. document.onclick = getId;
  26.  
How difficult would it be to modify this now to hide/show this DIV? Thanks for your suggestions.
Jul 31 '08 #3

P: 5
I may have spoken too soon. While the following code works well in Firefox, it fails with large sets of data in Internet Explorer 6 & 7 pinning the CPU at 100%. Is there something in there causing this issue?

Expand|Select|Wrap|Line Numbers
  1. // Create XmlHttp object.
  2. function createXHR()
  3. {
  4.     try { return new XMLHttpRequest(); } catch(e) {}
  5.     try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {}
  6.     try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {}
  7.     try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
  8.     try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
  9.     alert("XMLHttpRequest not supported");
  10.     return null;
  11. }
  12.  
  13. function sendRequest()
  14. {
  15.     var xhr = createXHR(); // cross browser XHR creation
  16.     if (xhr) // if created run request
  17.     {
  18.         url = "moreContent.php?id=" + theId;
  19.         xhr.open("GET",url,true);
  20.         xhr.onreadystatechange = function(){handleResponse(xhr);};
  21.         xhr.send(null);
  22.     }
  23. }
  24.  
  25. function handleResponse(xhr)
  26. {
  27.     if (xhr.readyState == 4  && xhr.status == 200)
  28.     {
  29.         newId = "div" + theId;
  30.         var responseOutput = document.getElementById(newId);
  31.         responseOutput.innerHTML = xhr.responseText;
  32.         responseOutput.style.display = "";
  33.     }
  34. }
  35.  
  36. window.onload = function () 
  37. {
  38.     var arr = document.getElementsByTagName("li");
  39.     for(var i = 0; i < arr.length; i++)
  40.     {
  41.         document.getElementsByTagName("li")[i].onclick = sendRequest;       
  42.     }
  43. }
  44.  
  45. var theId
  46. function getId(e)
  47. {
  48.     var targ;
  49.     if (!e)
  50.     {
  51.         var e = window.event;
  52.     }
  53.     if (e.target)
  54.     {
  55.         targ = e.target;
  56.     }
  57.     else if (e.srcElement)
  58.     {
  59.         targ = e.srcElement;
  60.     }
  61.     if (targ.nodeType == 3) // defeat Safari bug
  62.     {
  63.         targ = targ.parentNode;
  64.     }
  65.     theId=targ.id
  66.     //alert(theId)
  67. }
  68.  
  69. document.onclick = getId;
  70.  
Jul 31 '08 #4

P: 5
Upon further inspection the following function is causing Internet Explorer to hang.

Expand|Select|Wrap|Line Numbers
  1. window.onload = function () 
  2. {
  3.     var arr = document.getElementsByTagName("li");
  4.     for(var i = 0; i < arr.length; i++)
  5.     {
  6.         document.getElementsByTagName("li")[i].onclick = sendRequest;       
  7.     }
  8. }
  9.  
This is getting seriously frustrating. If anyone had any idea as to why the function would be causing IE 6 & 7 to hang please let me know. Firefox has no issue...
Jul 31 '08 #5

acoder
Expert Mod 15k+
P: 16,027
How many list items do you have?
Aug 1 '08 #6

P: 5
How many list items do you have?
Varies, but in this case ~15,000.
Aug 1 '08 #7

acoder
Expert Mod 15k+
P: 16,027
Well, that is a lot. That's probably what's causing it to hang.

Try including the onclick inlinea and see if that makes a difference.
Aug 1 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.