Inhalt löschen - Bootstrap Modal

Question

Jedes Mal, wenn ich ein Bootstrap Modal Formular öffne, möchte ich eine neue Ladung von Inhalt, anstatt das vorhandene Formular (Standardverhalten) hinzuzufügen. Ich möchte also hello world einmal auf dem Formular anzeigen, anstatt sie anzuhängen. Ich habe nachgeschaut, wie ich das hier machen soll und habe alle Antworten ausprobiert, aber keiner von ihnen funktioniert für mich. Zum Beispiel reset() würde die Felder löschen, aber nicht entfernen, removeData('bs.modal') tut nichts, .html('') löscht das Formular vollständig und nicht nur die Felder. Ich brauche eine Methode, um das zu erreichen, was ich will, um jedes Mal eine neue Form zu haben und den Inhalt jedes Mal neu zu laden.

Auch Hallo Welt hier ist nur ein Beispiel, tatsächliche Formularfelder könnten viele sein. Ich möchte also kein neues Formular in einer Funktion erstellen, sondern es löschen und nur bestimmte Inhalte laden.

JS

function closeForm() { 
    $('#myform').removeData('bs.modal'); 
} 

function loadForm() { 
    $('#myform')[0].reset(); 

    var html = "<p>Hello world</p>"; 
    $("#myform").append(html); 
} 

HTML

<a href="#" class="right" data-toggle="modal" data-target="#myformDiv" onclick="loadForm()">Open form</a> 

<div class="modal fade" id="myformDiv" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog modal-lg" role="document"> 
     <div class="modal-content"> 

      <div class="modal-header"> 
       <button onclick="closeForm()" type="button" class="close right" data-dismiss="modal" aria-label="Close"> 
        <span aria-hidden="true" class="close">&times;</span> 
       </button> 
      </div> 

      <div class="modal-body"> 
       <form id="myform"> 

       </form> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

ein einfacher, aber nicht bester Weg:

1- einen div-Tag erstellen enthält alle Ihre Form fields.give es eine ID (zum Beispiel "myFields") und setzen style="display:none"

2- auf Modal Load Set $("#myform").html($("#myFields").html());

Answer 2

Bootstrap modal bietet die show und Ereignisse. Sie können Ihr Formular unter hidden löschen und Inhalte unter show hinzufügen.

$('#myformDiv').on('show.bs.modal', function() { 
 
    var html = "<p>Hello world</p>"; 
 
    $("#myform").append(html); 
 
}); 
 

 
$('#myformDiv').on('hidden.bs.modal', function() { 
 
    $('#myform').empty(); 
 
    console.log("modal closed and content cleared"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<!-- Code --> 
 
<a href="#" class="right" data-toggle="modal" data-target="#myformDiv">Open form</a> 
 

 
<div class="modal fade" id="myformDiv" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog modal-lg" role="document"> 
 
    <div class="modal-content"> 
 

 
     <div class="modal-header"> 
 
     <button type="button" class="close right" data-dismiss="modal" aria-label="Close"> 
 
        <span aria-hidden="true" class="close">&times;</span> 
 
       </button> 
 
     </div> 
 

 
     <div class="modal-body"> 
 
     <form id="myform"> 
 

 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>