Pass ID to function?

[renphi]

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:

// Create XmlHttp object.
function createXHR()
{
    try { return new XMLHttpRequest(); } catch(e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
    try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
    alert("XMLHttpRequest not supported");
    return null;
}
 
function sendRequest()
{
    var xhr = createXHR(); // cross browser XHR creation
    if (xhr) // if created run request
    {
        xhr.open("GET","moreContent.php",true);
        xhr.onreadystatechange = function(){handleResponse(xhr);};
        xhr.send(null);
    }
}
 
function handleResponse(xhr)
{
    if (xhr.readyState == 4  && xhr.status == 200)
    {
        var responseOutput = document.getElementById("responseOutput");
        responseOutput.innerHTML = xhr.responseText;
        responseOutput.style.display = "";
    }
}
 
window.onload = function () 
{
    document.getElementById(uniqueId).onclick = sendRequest;   
}

The HTML:

        foreach($rs as $k => $row)
        {
 
            if (checkFlag($row[flags], TEST_FAILED))
            {
                echo "<li id=\"failContent\">";
            }
            else
            {
                echo "<li id=\"$row[id]\">";
            }
 
                echo "Summary data";
 
                echo "<div id=\"responseOutput\"></div>";
 
            echo "</li>";
 
            echo "\n";
        }
 

[acoder]

You need to add an onclick to each element. You can add that by getting all the elements via document.getEle mentsByTagName( "li") and looping over them to add the onclick. To get the target of the event, see this link.

[renphi]

It now works after changing the following:

window.onload = function () 
{
    var arr = document.getElementsByTagName("li");
    for(var i = 0; i < arr.length; i++)
    {
        document.getElementsByTagName("li")[i].onclick = sendRequest;       
    }
}
 

And added:

var theId
function getId(e)
{
    var targ;
    if (!e)
    {
        var e = window.event;
    }
    if (e.target)
    {
        targ = e.target;
    }
    else if (e.srcElement)
    {
        targ = e.srcElement;
    }
    if (targ.nodeType == 3) // defeat Safari bug
    {
        targ = targ.parentNode;
    }
    theId=targ.id
    //alert(theId)
}
 
document.onclick = getId;
 

How difficult would it be to modify this now to hide/show this DIV? Thanks for your suggestions.

[renphi]

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?

// Create XmlHttp object.
function createXHR()
{
    try { return new XMLHttpRequest(); } catch(e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
    try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
    alert("XMLHttpRequest not supported");
    return null;
}
 
function sendRequest()
{
    var xhr = createXHR(); // cross browser XHR creation
    if (xhr) // if created run request
    {
        url = "moreContent.php?id=" + theId;
        xhr.open("GET",url,true);
        xhr.onreadystatechange = function(){handleResponse(xhr);};
        xhr.send(null);
    }
}
 
function handleResponse(xhr)
{
    if (xhr.readyState == 4  && xhr.status == 200)
    {
        newId = "div" + theId;
        var responseOutput = document.getElementById(newId);
        responseOutput.innerHTML = xhr.responseText;
        responseOutput.style.display = "";
    }
}
 
window.onload = function () 
{
    var arr = document.getElementsByTagName("li");
    for(var i = 0; i < arr.length; i++)
    {
        document.getElementsByTagName("li")[i].onclick = sendRequest;       
    }
}
 
var theId
function getId(e)
{
    var targ;
    if (!e)
    {
        var e = window.event;
    }
    if (e.target)
    {
        targ = e.target;
    }
    else if (e.srcElement)
    {
        targ = e.srcElement;
    }
    if (targ.nodeType == 3) // defeat Safari bug
    {
        targ = targ.parentNode;
    }
    theId=targ.id
    //alert(theId)
}
 
document.onclick = getId;
 

[renphi]

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

window.onload = function () 
{
    var arr = document.getElementsByTagName("li");
    for(var i = 0; i < arr.length; i++)
    {
        document.getElementsByTagName("li")[i].onclick = sendRequest;       
    }
}
 

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...

[acoder]

How many list items do you have?

[renphi]

How many list items do you have?

Varies, but in this case ~15,000.

[acoder]

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.