Bootstrap Modal Replace Platzhalter

Question

Ich habe schon eine Weile nach diesem gesucht, aber ich konnte nicht herausfinden, wie es funktioniert. Ich bin neu in jQuery/AJAX und Bootstrap und ich hoffe, es ist nicht leicht ....

Ich habe diesen Knopf in einer Schleife

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#info" data-added="<?php if(strtotime($ecp_code->added) > strtotime('2000-01-01 01:00:00')) { echo date('d.m.y H:i', strtotime($ecp_code->added)); } else { echo "-";} ?>" data-modified="<?php if(strtotime($ecp_code->changed) > strtotime('2000-01-01 01:00:00')) { echo date('d.m.y H:i', strtotime($ecp_code->changed)); } else { echo "-";} ?>"><i class="fa fa-info" style="width:14px;"></i></button> 

Das ist die Modal

<div class="modal fade" id="info" tabindex="-1" role="dialog" aria-labelledby="infoLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-sm"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       Informations 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
      </div> 
      <div class="modal-body"> 
       Added: PLACEHOLDER 
       Modified: PLACEHOLDER2 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>   
      </div> 
     </div> 
    </div> 
</div> 

Das Skript:

<script> 
    $(document).ready(function() { 
     $('#info').on('show.bs.modal', function (event) { 
      var button = $(event.relatedTarget); 
      var added = button.data('added'); 
      var modified = button.data('modified'); 

      var content = 'Added: ' + added + ' Modified: ' + modified + ''; 

      var modal = $(this); 
      modal.find('.modal-body').text(content); 
     }); 
    }); 
</script> 

Das funktioniert gut. Es ersetzt den gesamten Inhalt vom Modal-Body.

---

Aber jetzt möchte ich, dass nur ein einziges Wort ersetzt wird. PLACEHOLDER mit der var hinzugefügt und PLACEHOLDER2 mit der var geändert. (Es ist nur ein Beispiel)

<script> 
    $(document).ready(function() { 
     $('#info').on('show.bs.modal', function (event) { 
      var button = $(event.relatedTarget); 
      var added = button.data('added'); 
      var modified = button.data('modified'); 
      var modal = $(this); 
      var res = replace("PLACEHOLDER", (added)); 
      modal.find('.modal-body').text(res); 
     }); 
    }); 
</script> 

So etwas funktioniert nicht.

Noch eine Frage: Kennst du gute Ressourcen, wo ich jQuery und AJAX lernen kann?

Answer 1

Legen Sie zwei neue Elemente in den Modal-Körper

<div class="modal-body"> 
    <label>Added:</label> 
    <div id="Added"></div> 
    <label>Modified:</label>  
    <div id="Modified"></div> 
</div> 

modal.find('.modal-body #Added').text(your content added); 

Und:

modal.find('.modal-body #Modified').text(your content modified); 

Wenn der Inhalt, den Sie auf diese divs hinzufügen html Tags enthält können Sie besser nutzen .html() anstelle von .text()