2014-03-03 73 views
0

我有超過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:「幾乎沒有任何」/ htmlphp:「平均」。

下面是對於只有兩個鏈接/分隔/表格的工作代碼:

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

回答

0

看起來我可以爲每個鏈接添加一個onclick腳本,將ID放入隱藏頁面元素的innerHTML中,這應該可以通過AJAX例程訪問。我相信可能有更優雅的解決方案,但這似乎有效。