it-swarm.com.de

Twitter bootstrap remote modal zeigt jedes Mal den gleichen Inhalt an

Ich benutze Twitter Bootstrap, ich habe ein Modal angegeben

<div class="modal hide" id="modal-item">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h3>Update Item</h3>
    </div>

    <form action="http://www.website.com/update" method="POST" class="form-horizontal">

    <div class="modal-body">
        Loading content...
    </div>

    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <button class="btn btn-primary" type="submit">Update Item</button>
    </div>

    </form>

</div>

Und die Links

<a href="http://www.website.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a>
<a href="http://www.website.com/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a>
<a href="http://www.website.com/item/3" data-target="#modal-item" data-toggle="modal">Edit 2</a>

Wenn ich zum ersten Mal auf einen dieser Links klicke, wird der korrekte Inhalt angezeigt. Wenn ich jedoch auf andere Links klicke, wird der Inhalt nicht aktualisiert, wenn derselbe Inhalt zum ersten Mal geladen wird.

Ich möchte, dass es jedes Mal aktualisiert wird, wenn es angeklickt wird.

PS: Ich kann es einfach über die benutzerdefinierte jQuery-Funktion zum Laufen bringen, aber ich möchte wissen, ob es mit der systemeigenen Bootstrap modalen Remote-Funktion möglich ist, da es einfach genug sein sollte und ich es nur kompliziere Dinge.

261
Dhruv Kumar Jha

Das Problem ist zweifach.

Zunächst wird ein einmal instanziiertes Modal-Objekt dauerhaft an das durch data-target Und nachfolgende Aufrufe angegebene Element angehängt, um den Modal-Willen anzuzeigen Rufen Sie nur toggle() auf, aktualisieren Sie jedoch nicht die Werte in options. Obwohl sich die href Attribute in Ihren verschiedenen Links unterscheiden, wird der Wert für remote nicht aktualisiert, wenn das Modal umgeschaltet wird. Bei den meisten Optionen können Sie dies umgehen, indem Sie das Objekt direkt bearbeiten. Zum Beispiel:

$('#myModal').data('bs.modal').options.remote = "http://website.com/item/7";

In diesem Fall funktioniert das jedoch nicht, weil ...

Zweitens lädt das Modal-Plugin die ferne Ressource im Konstruktor des Modal-Objekts, was leider bedeutet dass, auch wenn eine Änderung am options.remote vorgenommen wird, es wird niemals neu geladen.

Eine einfache Abhilfe besteht darin, das Modal-Objekt vor dem anschließenden Umschalten zu zerstören. Eine Möglichkeit ist, es einfach zu zerstören, nachdem es sich versteckt hat:

$('body').on('hidden.bs.modal', '.modal', function () {
  $(this).removeData('bs.modal');
});

Hinweis: Stellen Sie die Wahlschalter nach Bedarf ein. Dies ist die allgemeinste.

Plunker

Oder Sie könnten versuchen, ein komplizierteres Schema zu finden, um zu prüfen, ob sich die Verknüpfung, über die das Modal gestartet wird, von der vorherigen unterscheidet. Wenn es so ist, zerstöre es. Wenn dies nicht der Fall ist, muss das Gerät nicht neu geladen werden.

447
merv

Für bootstrap 3 solltest du folgendes benutzen:

$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});
171
Camilo Nova

Für Bootstrap 3.1 möchten Sie Daten entfernen und das modal-content anstatt des gesamten Dialogfelds (3.0), um das Flimmern zu vermeiden, während auf das Laden von Remote-Inhalten gewartet wird.

$(document).on("hidden.bs.modal", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});

Wenn Sie nicht-entfernte Modals verwenden, entfernt der obige Code natürlich deren Inhalt, sobald er geschlossen ist (fehlerhaft). Möglicherweise müssen Sie diesen Modalen etwas hinzufügen (z. B. ein .local-modal Klasse), damit sie nicht betroffen sind. Ändern Sie dann den obigen Code in:

$(document).on("hidden.bs.modal", ".modal:not(.local-modal)", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});
50
slopapa

Danke merv. Ich habe angefangen, an bootstrap.js herumzubasteln, aber Ihre Antwort ist eine schnelle und saubere Umgehung. Folgendes habe ich letztendlich in meinem Code verwendet.

$('#modal-item').on('hidden', function() {
    $(this).removeData('modal');
});
30

Die akzeptierte Antwort hat bei mir nicht funktioniert, deshalb habe ich mich für JavaScript entschieden.

<a href="/foo" class="modal-link">
<a href="/bar" class="modal-link">

<script>
$(function() {
    $(".modal-link").click(function(event) {
        event.preventDefault()
        $('#myModal').removeData("modal")
        $('#myModal').modal({remote: $(this).attr("href")})
    })
})
21
James Ward

Dies funktioniert mit Bootstrap 3 FYI

$('#myModal').on('hidden.bs.modal', function () {
  $(this).removeData('bs.modal');
});
14
Dave Sag

Mein Projekt ist in Yii & verwendet das Bootstrap-Yii-Plugin, daher ist diese Antwort nur relevant, wenn Sie Yii verwenden.

Der obige Fix hat funktioniert, aber erst nach dem ersten Mal wurde das Modal gezeigt. Das erste Mal war es leer. Ich denke, das liegt daran, dass ich nach der Initiierung des Codes Yii die Ausblendfunktion des Modals aufrufe und damit meine Initiierungsvariablen lösche.

Ich habe festgestellt, dass der Aufruf von removeData unmittelbar vor dem Code ausgeführt wurde, der das Modal gestartet hat. Mein Code ist also so aufgebaut ...

$ ("#myModal").removeData ('modal');
$ ('#myModal').modal ({remote : 'path_to_remote'});
7
Sean Toru

In Bootstrap 3.2.0 muss sich das "on" -Ereignis im Dokument befinden und Sie müssen das Modal leeren:

$(document).on("hidden.bs.modal", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});

In Bootstrap 3.1.0 kann das "on" -Ereignis auf dem Body sein:

$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});
5
Romain

Warum nicht allgemeiner mit BS 3? Verwenden Sie einfach "[etwas] Modales" als ID des modalen DIV.

$("div[id$='modal']").on('hidden.bs.modal',
    function () {
        $(this).removeData('bs.modal');
    }
);
3
user2763645

Die einzige Arbeitsoption für mich ist:

$('body').on('hidden.bs.modal', '#modalBox', function () {
    $(this).remove();
});

Ich benutze Bootstrap 3 und ich habe eine Funktion namens popup('popup content'), die die modale Box html anfügt.

2
Orkun Tuzel

Hinzufügen eines $ (this) .html (''); auch sichtbare Daten zu löschen, und es funktioniert ziemlich gut

1
webstr

Ich habe so etwas hinzugefügt, weil der ältere Inhalt so lange angezeigt wird, bis der neue angezeigt wird. Mit .html ('') innerhalb des .modal-Inhalts wird der HTML-Inhalt gelöscht, hoffentlich hilft es

$('#myModal').on('hidden.bs.modal', function () {
   $('#myModal').removeData('bs.modal');
   $('#myModal').find('.modal-content').html('');
});
1
Mau GM

Wenn eine ferne URL angegeben wird, wird der Inhalt einmalig über die Methode load von jQuery geladen und in das Div .modal-content eingefügt. Wenn Sie die Daten-API verwenden, können Sie alternativ das href-Attribut verwenden, um die Remote-Quelle anzugeben. Ein Beispiel dafür ist unten gezeigt

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});
1
        $('#myModal').on('hidden.bs.modal', function () {
            $(this).removeData('modal');
        });

Dieser arbeitet für mich.

0
Shawn Ang

Dieser andere Ansatz funktioniert gut für mich:

$("#myModal").on("show.bs.modal", function(e) {
    var link = $(e.relatedTarget);
    $(this).find(".modal-body").load(link.attr("href"));
});
0
Rhys Stephens

Für Bootstrap 3 habe ich in modal.js geändert:

$(document)
  .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
  .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open'); })

zu

$(document)
  .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
  .on('hidden.bs.modal', '.modal', function () { 
    $(this).removeData('bs.modal').empty()
    $(document.body).removeClass('modal-open')
  })

(zusätzlicher Abstand zur Verdeutlichung hinzugefügt)

Dies verhindert ein unerwünschtes Aufblitzen alter modaler Inhalte, indem im modalen Container empty () aufgerufen und die Daten entfernt werden.

0
Stanton

Erweiterte Version der akzeptierten Antwort von @merv. Es prüft auch, ob verborgenes Modal von der Remote-Quelle geladen wurde und löscht alte Inhalte, um ein Flashen zu verhindern.

$(document).on('hidden.bs.modal', '.modal', function () {
  var modalData = $(this).data('bs.modal');

  // Destroy modal if has remote source – don't want to destroy modals with static content.
  if (modalData && modalData.options.remote) {
    // Destroy component. Next time new component is created and loads fresh content
    $(this).removeData('bs.modal');
    // Also clear loaded content, otherwise it would flash before new one is loaded.
    $(this).find(".modal-content").empty();
  }
});

https://Gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5

0

Dieser arbeitet für mich:

modal

<div class="modal fade" id="searchKaryawan" tabindex="-1" role="dialog" aria-labelledby="SearchKaryawanLabel" aria-hidden="true"> <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="SearchKaryawanLabel">Cari Karyawan</h4>
  </div>
  <div class="modal-body">
    <input type="hidden" name="location">
    <input name="cariNama" type="text" class="form-control" onkeyup="if (this.value.length > 3) cariNikNama();" />
    <div class="links-area" id="links-area"></div>
  </div>
  <div class="modal-footer">
  </div>
</div> </div></div>

skript

<script type="text/javascript">$('body').on('hidden.bs.modal', '.modal', function () {  $(".links-area").empty() }); </script>

links-Bereich ist der Bereich, in dem ich die Daten platziere und löschen muss

0
dewaz
$('body').on('hidden.bs.modal', '.modal', function () {
       $("#mention Id here what you showed inside modal body").empty()
});

Welches HTML-Element möchten Sie leeren (div, span whatever).

0
Atul

Ich habe ein einfaches Snippet geschrieben, das die Aktualisierung des Modals behandelt. Grundsätzlich speichert es den angeklickten Link in den Daten des Modals und überprüft, ob es derselbe Link ist, auf den geklickt wurde, und entfernt die modalen Daten oder nicht.

var handleModal = function()
{
    $('.triggeringLink').click(function(event) {
        var $logsModal = $('#logsModal');
        var $triggeringLink = $logsModal.data('triggeringLink');

        event.preventDefault();

        if ($logsModal.data('modal') != undefined
            && $triggeringLink != undefined
            && !$triggeringLink.is($(this))
        ) {
            $logsModal.removeData('modal');
        }

        $logsModal.data('triggeringLink', $(this));

        $logsModal.modal({ remote: $(this).attr('href') });
        $logsModal.modal('show');
    });
};
0
DevAntoine