Question

I’m trying to make a dataTable expand on a click to show more information. The problem is that I’m populating the table through around 1000 records so the only way I can keep the more details data (what expands) is to send the data through a link during the looping process like so…

var imgCell = '<a href="javascript:storeInfo(&quot;'+theFilePath+'&quot;,&quot;'+theWebAddress+'&quot;,&quot;'+projectStatus+'&quot;);"><img src="https://cubistmediagroup.sharepoint.com/sites/canvas/PublishingImages/details_open.png"></a>';

So that makes a image link that calls this function on click…

function storeInfo (filePath, webAddress, projectStatus)
{
theFilePath = filePath;
theWebAddress = webAddress;

switch(projectStatus){
case "New Work - Waiting Activation":
    controlButton("NewWork", NewWorkTable);
break;
case "Active Projects":
    controlButton("ActiveProjects", ActiveProjectsTable);
break;
case "Waiting for Assets or Approvals":
    controlButton("WaitingAssets", WaitingAssetsTable);
break;
 //AND A WHOLE LOT MORE CASES
    }   
}

Basically this function saves the filepath and webaddress to global variables to be used later one and then calls the controlButton Function…

function controlButton (projectStatus, theTable){
$('#'+projectStatus+' tbody td img').live('click', function () {
     
    var nTr = this.parentNode.parentNode.parentNode;
    if ( this.src.match('details_close') )
        {
            // This row is already open - close it 
            this.src = "https://cubistmediagroup.sharepoint.com/sites/canvas/PublishingImages/details_open.png";
            theTable.fnClose( nTr );
        }
    else
        {
            // Open this row 
            this.src = "https://cubistmediagroup.sharepoint.com/sites/canvas/PublishingImages/details_close.png";
            theTable.fnOpen( nTr, fnFormatDetails(theTable, nTr), 'details' );
        }
     });
}

What this does is get the img in the html table then find the row its in then calls a function that opens or closes the expandable data… This is done with fnOpen and fnClose and using fnFormatDetails to populate the expandable row…

This all works fine and dandy and everything gets passed in properly and loads great but the only problem is that it requires two clicks to open and close the expandable row… Once for the link on the image then another to call the jQuery function. I need a way to get around this and just have it be one click while still loading the data for each individual entry… I was thinking the best way would be to find a way to call the jQuery function without the .live('click', function() because that would eliminate the need for a second click.

Any Suggestions?

Answer 1

Update your functions as follows

declaration of storeInfo():

function storeInfo (filePath, webAddress, projectStatus, elem)
{ //code }

call on link:

<a href="javascript:storeInfo("'+theFilePath+'","'+theWebAddress+'","'+projectStatus+'", this);"><img src="..."></a>

The calls for controlButton() inside while:

controlButton("ActiveProjects", ActiveProjectsTable, elem);

and updated controlButton() function:

function controlButton (projectStatus, theTable, elem){
    img = elem.getElementsByTagName("img")[0]; //alternatively: $(elem).find('img');
    var nTr = elem.parentNode.parentNode;
    if ( img.src.match('details_close') )
    {
        // This row is already open - close it 
        img.src = "https://cubistmediagroup.sharepoint.com/sites/canvas/PublishingImages/details_open.png";
        theTable.fnClose( nTr );
    }
    else
    {
        // Open this row 
        img.src = "https://cubistmediagroup.sharepoint.com/sites/canvas/PublishingImages/details_close.png";
        theTable.fnOpen( nTr, fnFormatDetails(theTable, nTr), 'details' );
    }
}

Can’t test, but should work.