pass HTML link id to js AJAX function through modal plugin

Question

I have over 1.5 million dynamically created (php/html/js) web pages that contain lists of up to 300 people, to whom I need to allow visitors to send messages by using a popup form that is triggered by link next to each person's name. I'm using the PopEasy jquery modals plugin http://thomasgrauer.com/popeasy/ .

All these modals/forms are identical, except for a unique recipient ID associated with each link that needs to be passed through to the AJAX code that fires to save the message to that person's record when the modal's form's Send Message btn is clicked (e.g. "1001', '1002' in the examples below).

For each page, I could dynamically create up to 300 form DIVs, one for each link, but would rather find a clever way to transfer the recipient ID with just one modal/form DIV, to cut down the bandwidth. I should be ok, if I can reference the ID of the link from within the AJAX code (as the "u" var in the example below).

Ideas? (my competencies: js: "barely any" / html and php: "average".

Here is the code that works for just two links/divs/forms:

<a id="1001" class="modalLink" href="#modal_1001">Send msg</a>
<a id="1001" class="modalLink" href="#modal_1002">Send msg</a>
// the plugin uses the class to fire, and the href to know which of several DIVs of 
// that class to use; if the a#id isn't needed, I can strip the "modal_" part out of
// the href to save having to parse it

<div id="modal_1001" class="modal">
    <form method="post" action="">
    <textarea>(write your msg here)</textarea>
    <button type="button" onclick="storeMsgAjax(1001,1234)">Send message</button>
    </form>
    <a href="#" class="closeBtn">Close Form</a>
</div>
<div id="modal_1002" class="modal">
    <form method="post" action="">
    <textarea>(write your msg here)</textarea>
    <button type="button" onclick="storeMsgAjax(1002,1234)">Send message</button>
    </form>
    <a href="#" class="closeBtn">Close Form</a>
</div>

And here is the js modal plugin function:

$(document).ready(function(){
    $('.modalLink').modal({
        trigger: '.modalLink',          // id or class of link or button to trigger modal
        olay:'div.overlay',             // id or class of overlay
        modals:'div.modal',             // id or class of modal
        animationEffect: 'slideDown',   // overlay effect | slideDown or fadeIn | default=fadeIn
        ...(other options)...
    close:'.closeBtn'               // id or class of close button
    });
});

And here is the AJAX code:

function storeMsgAjax(s,u)
    {
    var m = document.getElementById("msgtxt").value;
    var url = "http://ifinallyfoundu.com/storeMsg.php?s="+s+"&m="+m+"&u="+u+"&t=" + Math.random();
    xmlHttp2 = GetXmlHttpObject();
    if (xmlHttp2 == null) {alert("Browser does not support HTTP Request"); return;}
    xmlHttp2.onreadystatechange = function()
        {
        if (xmlHttp2.readyState == 4 && xmlHttp2.status == 200)
            {
            var formSaveResults = xmlHttp2.responseText;
            document.getElementById("modal_"+s).innerHTML = formSaveResults+'<br><br><a href="#" class="closeBtn">Close Form</a>' ;
            }
        }
    xmlHttp2.open("GET", url, true);
    xmlHttp2.send(null);
}

Answer 1

Looks like I can add an onclick script to each link to put the ID in the innerHTML of a hidden page element, which should be accessible to the AJAX routine. I'm sure there is probably a more elegant solution, but this seems to work.