2017-06-23 3 views
0

Ich erstelle eine Gruppe von Seiten, deren Abschnitte dynamisch von Ajax geladen werden.Modaliste neu erstellen

Jede geladene Ajax-Seite ist nur HTML-Inhalt und enthält ein Modal.

Ich habe tinyMCE-Editoren, die das gleiche Problem hatten, aber ich habe das behoben, indem ich alle Editoren aus dem Editoren-Array lösche und sie neu lade.

tinyMCE.editors = []; 
tinyMCE.init(); 

Ich möchte mit Bootstrap Modals etwas ähnliches tun. Ich verstehe, dass das aktualisierte DOM nicht durch Bootstrap bekannt ist und dass das Platzieren eines Skript-Tags am Ende dieses Problem lösen würde, aber dadurch werden auch Probleme eingeführt, da die Skripte zuvor für vorherige Teile der Seite geladen wurden (mehrere Lasten des gleichen Skripts).

Der Grund, warum ich das suche, ist dies.

  • Schaltfläche Erstellen öffnen modale
  • Modal öffnet
  • Klicken Sie auf Schließen oder die x auf den Modal, passiert nichts

Schlusscode:

<button type="button" class="close" data-dismiss="modal">&times;</button> 

Meine Öffnungscode:

<a href="#" id="adminAdd" class="adminClicks btn btn-sm btn-success" data-toggle="modal" data-target="#addModal">Add<span class="glyphicon glyphicon-plus"></span></a> 

Dialog div:

<div id="addModal" class="modal fade" role="dialog"> 

Jede Beratung wäre toll. Ich habe ein Modal verwendet, das korrekt auf der höchsten Ebene funktioniert, wo die Seite nicht durch Ajax geändert wird.

Antwort

0

Ich habe stattdessen eine Abhilfe gefunden.

So im statischen Code, der durch jquery betroffen isnt Ich habe dies erstellt:

<div id="customModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title" id="customModalHeader"></h4> 
      </div> 
      <div class="modal-body" id="customModalBody"> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-primary pull-left">Add</button> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 

    </div> 
</div> 

Dann jQuery Ich beantrage nur mit Änderungen ich brauche. Ich fügte hinzu, Ids auf die änderbaren Felder, damit ich durch einstellen:

$("customModalHeader").html("My custom header"); 

in der Ajax geladen Abschnitt zwischen Script-Elementen. Ich könnte wahrscheinlich auch eine Skriptdatei hinzufügen, aber das ändert sich doch im Laufe der Zeit.

Verwandte Themen