How do we 'dispose' a Bootstrap modal?

Question

I have a small application I am developing to learn AJAX and JavaScript. In this I have method saveData() that is triggered when a save button is clicked. All is working fine, but I realized that the page was refreshing so I searched the web and found the JavaScript method event.preventDefault(). This method worked fine. But that got me into problem, my modal dialog was staying open instead of closing. Again, I found hide method to "close" the modal. That solved it, BUT when I click the to open the modal it is bringing me the recent data I sent to the DB. I am from Java background and I began to think that hidedid not kill the modal.

My question: Is there a method to completely destroy the modal the way is done with JFrame.dispose()method in Java?

The code I was using is below:

   function saveData(){
    var name=$('#nm').val();
    var email=$('#em').val();
    var phone=$('#hp').val();
    var address=$('#al').val();
    event.preventDefault();//prevent the page from refresh
    $.ajax({
       type:"post",
       url:"server.php?p=add",
       data:{nm:name,em:email,hp:phone,al:address},
       success: function(data){
        viewData();
        $('#addData').modal('hide');//close the modal.
       }
    });

  }

You never disposes a Bootstrap modal. All what you can is hide it and show it — Shalom Peles, Feb 19 '17 at 13:47

score 0 · Answer 1 · answered Feb 19 '17 at 13:29

0

You can just clear the values in your input tag every time you open the modal.

answered Feb 19 '17 at 13:29

Haze

195
7

You know how to use jquery, right? Put an id to your input tag. Then every time you open your modal include this code - `$('#idOfYourInput').val('');` to reset it. – Haze Feb 19 '17 at 13:41

score 0 · Answer 2 · edited May 23 '17 at 12:17

I already faced this problem with the modal for clear all value.but i using the follow code after hiding the modal.

My modal id is #modal

$('#modal').hide();
$('#modal')
    .find("input,textarea,select")
       .val('')
       .end()
    .find("input[type=checkbox], input[type=radio]")
       .prop("checked", "")
       .end();

if you have any prolem then you can refer the link that may help you : How to clear all input fields in bootstrap modal when clicking data-dismiss button?

How do we 'dispose' a Bootstrap modal?

2 Answers2