Question

I have a table of data being produced with JavaScript. At the end of each row is an image, which is clickable. When clicked, a popup appears containing information based on the row.

I am using the second example on here: http://www.abidibo.net/projects/js/moopopup/demo

Basically, how I have it setup now is this:

The function;

    function popup() {

    var mp_instance = new moopopup({ 
        overlay: true, 
        title: 'Copy server address', 
        html_node: 'mynode',
    }); 
    mp_instance.display();
}

make the popup, appear, using a div which is initially hidden

<div id="mynode" style="display:none">Content.</div>

The image then uses onclick to make the popup run.

onclick='popup();'

Now this works with static data, however each row has different content I want to put in to the popup. So i’m confused about how I would make each popup individual to the row, without creating loads of functions with an ID on the end, which basically all do the same thing.

http://www2.lethal-zone.eu/servers/tf2-servers

The image at the end of each row; when clicked shows some extra content…

Answer 1

You generally would want to pass some information to the one function as parameters and then use those parameters to choose the content. For example, pass some ID to the function:

onclick="popup(1);"

function popup(id) {
    // do something with id to choose the content
    // snip...
}