CODEWITHSUNDEEP
jqueryhtmlhide
David
David

Reputation: 1191

jQuery to close a loaded div

I load a div with POST content from an external php page in a <div> called #ajaxContent when I click a table row in the table #tblStudents like this:

$("#tblStudents").on("click", "tr", function(e){
var row_id = $("td:first a.ajaxCall", this).attr("rel");
$("#ajaxContent").html("<div id='wait'></div>");
$.ajax({
    url: "/page/editstudent.php",
    data: { 'student_id':row_id },
    success: function(data){
        $("#ajaxContent").html(data);
    }
  });
 });

Now I want to add a close button inside the loaded #ajaxContentdiv.
It somewhat works when I add this code outside the #ajaxContent div. It hides the div but it also makes my $("#tblStudents").on("click", "tr", function(e) stop working until a full page refresh...

<button id='hide'>Hide</button>

<script>
  $("#hide").click(function(){
  $("#ajaxContent").hide();
 });
</script>

Is it possible to add a close function to my current jQuery script? And still be able to toggle through the #tblStudent- table rows and load #ajaxContentwithout a page refresh?

Upvotes: 1

Views: 1154

Answers (1)

charlietfl
charlietfl

Reputation: 171669

It seems the only issue is that if you click the hide button you don't have anything to show the container on next row click.

Just adding show() method to the elemnt within row click should resolve issue

 $("#ajaxContent").show().html("<div id='wait'></div>");

If it is already visible show() will not cause any problems

Upvotes: 1

Related Questions