Question

我有超过150万个动态创建的（php / html / js）网页，其中包含最多300人的列表，我需要允许访问者通过使用由旁边的链接触发的弹出窗体来发送消息每个人的名字。我正在使用PopEasy jquery模态插件http://thomasgrauer.com/popeasy/。

所有这些模态/表单都是相同的，除了与每个链接相关联的唯一收件人ID，需要传递给AJAX代码，当单击模态的表单的发送消息btn时，该代码将触发以将消息保存到该人的记录中（例如，以下示例中的“1001”，“1002”）。

对于每个页面，我可以动态创建多达300个表单DIV，每个链接一个，但宁愿找到一种聪明的方法来传输只有一个模态/表单DIV的收件人ID，以减少带宽。我应该没问题，如果我可以从AJAX代码中引用链接的ID（如下例中的“u”var）。

想法？（我的能力： js ：“几乎没有”/ html 和 php ：“平均”。

以下是仅适用于两个链接/ div /表单的代码：

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

这是js模态插件函数：

$(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
    });
});

这是AJAX代码：

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

看起来我可以在每个链接上添加一个onclick脚本，将ID放在隐藏页面元素的innerHTML中，这应该是AJAX例程可以访问的。我确信可能有更优雅的解决方案，但这似乎有效。

通过模态插件将HTML链接ID传递给js AJAX函数

1 个答案: