在ajax調用的頁面內創建一個彈出式菜單

Question

我一直試圖在ajax函數調用的php頁面內創建一個按鈕，點擊一段時間後彈出菜單，但我似乎無法形象出來。 PHP頁面被一個div貼下通過名爲postAll一個Ajax方法稱爲CBOX：

<script src="jquery-1.7.1.min.js" type="text/javascript"></script> 
<script src="jquery-latest.js"></script> 
<script type="text/javascript"> 
function toggleElement(id) 
{ 
    var element=document.getElementById(id); 
    if(element.style.display=="block") 
    { 
     element.style.display="none"; 
    } 
    else 
    { 
     element.style.display="block"; 
    } 
} 
function postAll() 
{ 
    if(String(window.location).indexOf("?")==-1) 
    { 
     var location=window.location.href; 
    } 
    else 
    { 
     var location=window.location.href.substring(0,window.location.href.indexOf("?")); 
     var clength=(window.location.href.length-1)-(window.location.href.indexOf("currentpage"))-11; 
     var currentpage=window.location.href.substr(window.location.href.length-clength,clength); 
    } 
    xmlhttp=new XMLHttpRequest(); 
    xmlhttp.onreadystatechange=function() 
     { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      document.getElementById("cbox").innerHTML=xmlhttp.responseText; 
     } 
     } 
    xmlhttp.open("GET","dynamic.php?location="+location+"&currentpage="+currentpage,true); 
    xmlhttp.send(); 
} 

$(document).ready(function() 
{ 
    document.getElementById("option").addEventListener("click",function(){alert("Success");}); 
    postAll(); 
}); 
</script> 

我使用addEventListener嘗試，但我不知道我在正確使用。我用下面的代碼也試過，但它沒有工作，要麼：

$("#cbox").delegate("a","click", function() { 
    toggleElement('option_toggle'); 
}); 
$("#cbox").on("click", "a", function() { 
    toggleElement('option_toggle'); 
}); 

有關。對方法我得到了一個未捕獲的錯誤類型爲好。 下面是實際的按鈕，我試圖去彈出一個菜單：

<div id="option"><p><a href="#"><img class="select" src="cog.png"></img></a></p></div> 
<div id="option_toggle" style="display:none;"> Random Text </div> 

任何幫助將非常感激。

Answer 1

我看不到在您的示例中打開對話框的代碼。無論如何 - 我添加了一個非常小的例子。 對於此代碼，我下載jquery-ui，我跟着jquery dialog的樣本。

我甚至添加了Ajax，即使沒有連接，並且我用JQuery編寫了所有東西 - 作爲對所得到的評論的迴應。

下面是文件＃1 - 包含一個按鈕調用Ajax調用一些更多的內容

<button onclick="loadAjaxContent()">Load ajax content</button> 


<div id="ajaxContentContainer"> 

</div> 


<script type="text/javascript"> 
    function loadAjaxContent() 
    { 
     $.ajax({ 
      url:'/Application/content', 
      data:{param1:"value1"}, 
      success:function(result){$("#ajaxContentContainer").html(result)}, 
      error:function(result){$("#ajaxContentContainer").html(result.responseText)} 

     }) 
    } 
</script> 

現在這裏是頁＃2 - 將其注入到第一個。這個頁面有另一個按鈕，打開一個對話框。

<button onclick="openPopup()">open popup</button> 


<div id="dialogContent"> 
    this is a dialog content 
</div> 
<script type="text/javascript"> 
    $("#dialogContent").dialog({autoOpen:false}); 
    function openPopup() 
    { 

     $("#dialogContent").dialog('open'); 
    } 
</script> 

請確保您正確導入所有js和css文件。要導入的文件列表是：

1. 的jQuery-UI-1.8.16.custom.css（版本可能會有所不同） - 這個文件應該有一個「圖片」文件夾就在旁邊
2. jquery- 1.6.2.min.js（版本可能會有所不同）
3. 的jQuery-UI-1.8.16.custom.min.js（版本可能會有所不同）

您必須導入後的 「jQuery的UI」 文件「jquery」文件。順序很重要。

這應該工作，或者至少給你一個良好的踢球開始。 讓我知道是否需要更多。