ajax: how to reopen a div after closing using ajax

Question

Hello all;

I call a page with ajax in a div. when the page opens, there is a "close "button to hide the div. After clicking the close button, I need to refresh the page to reopen the div. What should I do to open and close the div as much as I like without refreshing the page?

code:

<script>
$(document).ready(function(){   

$('#close').click(function() {
  $('#show_options').hide();
  $(window).unload( function () { alert("Bye now!"); } );
});


});

</script>

 <a href="#" id="close">Close</a> <div id="show_options" style="position:absolute;     width:500px; padding:10px; left: 246px; top: 41px; z-index:900;"></div>My selection: <span     id="select-result" style="font-family:Arial, Helvetica, sans-serif;font-    size:10pt;color:#444;">leeg</span> </div>



<a ONClick="xmlhttpPost('selected_output_team.php', 'options', 'show_options'); return         false; " id="show_options"> edit</a>

Answer 1

I haven't tested this, but at the "close" anchor, try this:

<a href="#" id="close" onclick="closeDiv();">Close</a>
... stuff ...
<a href="#" id="open" onclick="openDiv();">Open</a>

Once you have that, you can, instead of removing the div, simply remove (and readd) its contents:

function closeDiv()
{
    document.getElementById("show_options").innerHTML = "";
}
function openDiv()
{
    document.getElementById("show_options").innerHTML = "...whatever...";
}

There are other ways of course, but this is one of them. Note that I haven't tested the code.

Answer 2

use toggle() instead of hide() or show()

Answer 3

I am not an expert but if you do not want to hide or show the div tag with animation, you can simply change the visibility of the div tag using CSS. You can have the following functions to close and open the div tag:

function close() {
    document.getElementById("show_options").style.display = "none";
}
function open() {
    document.getElementById("show_options").style.display = "block";
}

Nice thing about CSS is that you don't have to regenerate content, therefore I think it should work faster and your code could be shorter.

Answer 4

I'm not really sure that I understand your question. However, if you simply wants the close-link to execute the javascript function, and nothing else, replace the "#" with "javascript:;" in the link-tag. The anchor might give you some unexpected behavior at times.