我有超過150萬個動態創建的(php/html/js)網頁,其中包含多達300人的列表,我需要允許訪問者通過使用由每個人姓名旁邊的鏈接觸發的彈出窗體。我正在使用PopEasy jquery模塊插件http://thomasgrauer.com/popeasy/。將HTML鏈接ID傳遞給js通過模態插件的AJAX功能
所有這些模式/形式都是相同的,除了與每個鏈接相關聯的唯一收件人ID需要傳遞給AJAX代碼時,當模式的表單的發送消息btn是啓動時將消息保存到該人員的記錄(例如下面示例中的「1001」,「1002」)
對於每個頁面,我可以動態地創建多達300個表格DIV,每個鏈接一個,但寧可找到一個聰明的方式來傳送收件人如果我可以從AJAX代碼中引用鏈接的ID(如下面示例中的「u」var),那麼我應該沒問題,
想法? (我的能力:js:「幾乎沒有任何」/ html和php:「平均」。
下面是對於只有兩個鏈接/分隔/表格的工作代碼:
<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);
}