Question

I’ve been trying to create a button within a php page called by ajax function that pops up a menu when clicked for quite some time but I can’t seem to figure it out. The php page is posted under a div called cbox through an ajax method named 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>

I’ve tried using addEventListener but I’m not sure I’m using that correctly. I’ve also tried using the following code but it didn’t work either:

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

For the .on method I got an uncaught type error as well.
Here’s the actual button I’m trying to get to pop up a menu:

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

Any help would be much appreciated.

Answer 1

I can’t see the code to open a dialog in your sample.
Anyway – I added a really small example.
For this code, I download jquery-ui and I followed the sample for jquery dialog.

I even added Ajax, even though there is no connection, and I wrote everything with JQuery – as a response to the comments you got.

Here is file #1 – contains a button that invokes an Ajax call to some more content

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

Now here is page #2 – which is injected into the first one. This page has another button that opens a dialog.

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

Please make sure you import all the js and css files correctly. The list of files to be imported is :

1. jquery-ui-1.8.16.custom.css (version may vary) – this file should have an “images” folder right next to it
2. jquery-1.6.2.min.js (version may vary)
3. jquery-ui-1.8.16.custom.min.js (version may vary)

You must import the “jquery-ui” file AFTER the “jquery” file. The order is important.

This should work, or at least give you a good kick start.
Let me know if more is needed.