CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
stack
stack

Reputation: 841

How to delete content after closing the jquery ui dialog

In my project, I use jquery ui dialog.

Before transmit_div closing, staff_div has John-Stack and sltStfId has Robert-Sansa. And after transmit_div closing, I want to delete the content of "John-Stack" and "Robert-Sansa". So I choose beforeclose parameter when init the transmit_div dialog.

Here is js code:

<script>
$(document).ready(function()
{ 
 $('#transmit_app').click(function(){
    $('#transmit_div').dialog("open");
    $('#transmit_div').dialog("option","title");
   });
});
$('#transmit_div').dialog({
  autoOpen:false,
  title:"selectUser",
  modal:true,
  height:500,
  width:600,
  show:{effect:"blind",duration: 1000},
  hide:{effect:"explode",duration: 1000},
  beforeclose: function() {
   staff_div.innerHTML="<input type='button' id='selAllButton'  value='selectAll'><br />";
   sltStfId.innerHTML=""; 
   }
  });
  </script>

Here is html code:

<input type="button" id="transmit_app" value="trsmit" />
<div id="transmit_div" >
<div id="staff_div" class="staff" >
 <input type="button" id="selAllButton"  value="selectAll"><br />
 John-Stack
</div>
 <div class="selected_staff" >
 <input type="button" onclick="delete_allStaff()" value="deleteAll">
 <div id="sltStfId">
   Robert-Sansa
 </div>
</div>
</div>

But unfortnately, it works fail.I colse transmit_div dialog, and open it again. "John-Stack" and "Robert-Sansa" are still exists.

Who can help me?

Upvotes: 0

Views: 59

Answers (3)

Master Yoda
Master Yoda

Reputation: 4412

You want to use the close event function, not the beforeclose event.

Also you want to target the container div to empty() all elements contained in it.

$("#transmit_div").empty();

Example

$(document).ready(function() {
  $('#transmit_app').click(function() {
    $('#transmit_div').dialog("open");
    $('#transmit_div').dialog("option", "title");
  });
});
$('#transmit_div').dialog({
  autoOpen: false,
  title: "selectUser",
  modal: true,
  height: 500,
  width: 600,
  show: {
    effect: "blind",
    duration: 1000
  },
  hide: {
    effect: "explode",
    duration: 1000
  },
  close: function() 
  {
     deleteAll();
  }
});

$("#delete-all").on("click", function()
{
   deleteAll();
});

function deleteAll()
{
  $("#transmit_div").empty();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<input type="button" id="transmit_app" value="trsmit" />
<div id="transmit_div">
  <div id="staff_div" class="staff">
    <input type="button" id="selAllButton" value="selectAll"><br /> John-Stack
  </div>
  <div class="selected_staff">
    <input id="delete-all" type="button" value="deleteAll">
    <div id="sltStfId">
      Robert-Sansa
    </div>
  </div>
</div>

Upvotes: 0

vicky patel
vicky patel

Reputation: 705

$(document).ready(function()
{ 
 $('#transmit_app').click(function(){
    $('#transmit_div').dialog("open");
    $('#transmit_div').dialog("option","title");
   });
     $("#delete").click(function(){
   $("#sltStfId,#staff_div").remove();
   })
});
$('#transmit_div').dialog({
  autoOpen:false,
  title:"selectUser",
  modal:true,
  height:500,
  width:600,
  show:{effect:"blind",duration: 1000},
  hide:{effect:"explode",duration: 1000},
  beforeclose: function() {
   staff_div.innerHTML="<input type='button' id='selAllButton'  value='selectAll'><br />";
   sltStfId.innerHTML=""; 
   
   }
 
  });
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="button" id="transmit_app" value="trsmit" />
<div id="transmit_div" >
<input type="button" id="selAllButton"  value="selectAll"><br />
<div id="staff_div" class="staff" >
 
 John-Stack
</div>
 <div class="selected_staff" >
 <input type="button" value="deleteAll" id="delete">
 <div id="sltStfId">
   Robert-Sansa
 </div>
</div>
</div>

Upvotes: 0

Miggy
Miggy

Reputation: 816

You might want to thy this code. Hope it helps.

    <script>
    $(document).ready(function(){ 
        $('#transmit_app').click(function(){
            $('#transmit_div').dialog("open");
            $('#transmit_div').dialog("option","title");
        });

        $('#transmit_div').dialog({
            autoOpen:false,
            title:"selectUser",
            modal:true,
            height:500,
            width:600,
            show:{effect:"blind",duration: 1000},
            hide:{effect:"explode",duration: 1000},
            beforeClose: function myCloseDialog() {
                $('#staff_div').html("<input type='button' id='selAllButton'  value='selectAll'><br />");
                $('#sltStfId').html("");
            }
        });
    });
</script>

Upvotes: 2

Related Questions