Создание всплывающего меню на странице, вызванной ajax

Question

Я пытаюсь создать кнопку на php-странице, вызванную функцией ajax, которая появляется в течение некоторого времени при нажатии, но я не могу показаться это из. Страница PHP размещена под DIV называется CBOX через Ajax метод с именем postAll:

<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-щ-1.8.16.custom.css (версия может меняться) - этот файл должен иметь «изображение» папку прямо рядом с ним
2. jquery- 1.6.2.min.js (версия может меняться)
3. JQuery-UI-1.8.16.custom.min.js (версия может меняться)

Вы должны импортировать файл "JQuery-щ" ПОСЛЕ файл "jquery". Порядок важен.

Это должно сработать или, по крайней мере, дать вам хороший старт. Дайте мне знать, если потребуется больше.