Question

I have a web page that show a list of data feeds by name (the dataFeed variable below) and I am trying to simulate a pop-up window that contains more information about the data feed when the user clicks on the icon (dataFeed + ‘dataLink’) next to the data feed name. I have a hidden div (diagWindow) that contains a div (diagWindowContent) that is populated with this information about the feed. The getDiagData.php page returns this information that I want to display, using the dataFeed parameter passed to it.

At first I tried this…

for (i = 0; i < dataFeeds.length; i++) {
    dataFeed= dataFeeds[i];

    $('#' + dataFeed+ 'diagLink').click(function() {
        $('#diagWindow').toggle();
        $('#diagWindowContent').load('getDiagData.php?dataFeed=' + dataFeed);
    });
}

but that only displayed the page returned for the last dataFeed in the dataFeeds array.

Then I tried using a a callback method on the toggle(), like this…

for (i = 0; i < dataFeeds.length; i++) {
    dataFeed= dataFeeds[i];

    $('#' + dataFeed+ 'diagLink').click(function() {
        $('#diagWindow').toggle('fast', function(dataFeed) {
            return function() {
                $('#diagWindowContent').load('getDiagData.php?dataFeed=' + dataFeed);
            }(dataFeed)
        );            
    });
}

but that appeared to have the same result, displaying the information for the last data feed in the dataFeeds array.

I am seeking help on figuring out how to make the appropriate data feed information load from the getDiagData.php page when clicking on the icon next to the data feed name.

Thank you.

Answer 1

Try this.. You are not executing it in the correct context ..

for (i = 0; i < dataFeeds.length; i++) {
    (function(num){
        var dataFeed = num;

        $('#' + dataFeed + 'diagLink').click(function() {
            $('#diagWindow').toggle();
            $('#diagWindowContent').load('getDiagData.php?dataFeed=' + dataFeed);
         });
    })(dataFeeds[i])
}​