Ricarica il contenuto in modalità modale (bootstrap di twitter)

Sto usando il popup modale di bootstrap di Twitter.

<div id="myModal" class="modal hide fade in">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Header</h3>
    </div>
    <div class="modal-body"></div>
    <div class="modal-footer">
        <input type="submit" class="btn btn-success" value="Save"/>
    </div>
</div>

Posso caricare contenuti usando ajax con questo elemento a:

<a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a>

Ora devo aprire la stessa modale ma utilizzando un URL diverso. Sto usando questo modale per modificare un'entità dal mio database. Quindi, quando faccio clic su Modifica su un'entità, devo caricare il modale con un ID.

<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=1">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=2">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=3">Open modal</a>

Se clicco sul collegamento numero 1, funziona bene. Ma se poi clicco sul link numero 2 il contenuto modale è già caricato e quindi mostrerà il contenuto dal link numero 1.

Come posso aggiornare o ripristinare il contenuto caricato ajax in un popup modale bootstrap di Twitter?

Sto riscontrando lo stesso problema e immagino che il modo per farlo sarà rimuovere l'attributo data-toggle e avere un gestore personalizzato per i collegamenti.

Qualcosa nelle linee di:

$("a[data-target=#myModal]").click(function(ev) {
    ev.preventDefault();
    var target = $(this).attr("href");

    // load the url and show modal on success
    $("#myModal .modal-body").load(target, function() { 
         $("#myModal").modal("show"); 
    });
});

Lo proverò più tardi e pubblicherò commenti.

Per scaricare i dati quando il modale è chiuso puoi usarlo con Bootstrap 2.x:

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

E in Bootstrap 3 ( https://github.com/twbs/bootstrap/pull/7935#issuecomment-18513516 ):

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

//Edit SL: more universal
$(document).on('hidden.bs.modal', function (e) {
    $(e.target).removeData('bs.modal');
});

Puoi forzare Modal ad aggiornare il popup aggiungendo questa riga alla fine del metodo hide del plug-in Modal (se stai usando bootstrap-transizione.js v2.1.1, dovrebbe essere alla riga 836)

this.$element.removeData()

O con un ascoltatore di eventi

$('#modal').on('hidden', function() {
    $(this).data('modal').$element.removeData();
})

Con Bootstrap 3 puoi utilizzare il gestore di eventi 'hidden.bs.modal' per eliminare qualsiasi dato relativo alla modalità modale, costringendo il popup a ricaricarsi la volta successiva:

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

Basato su altre risposte (grazie a tutti).

Avevo bisogno di adattare il codice affinché funzionasse, poiché la semplice chiamata .html cancellava l'intero contenuto e il modale non si caricava con alcun contenuto dopo averlo fatto. Quindi ho semplicemente cercato l'area del contenuto del modale e lì ho applicato il ripristino dell'HTML.

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

Può ancora andare con la risposta accettata poiché sto facendo un brutto salto appena prima dei carichi modali poiché il controllo è con Bootstrap.

Un po 'più compresso rispetto all'esempio sopra accettato. Afferra il target dal data-target del corrente cliccato su qualsiasi cosa con data-toggle = modal on. In questo modo non devi sapere qual è l'id del modale di destinazione, basta riutilizzare lo stesso! meno codice = vinci! Puoi anche modificarlo per caricare titolo, etichette e pulsanti per il tuo modale se lo desideri.

 $("[data-toggle=modal]").click(function(ev) {
    ev.preventDefault();
    // load the url and show modal on success
    $( $(this).attr('data-target') + " .modal-body").load($(this).attr("href"), function() { 
         $($(this).attr('data-target')).modal("show"); 
    });
});

Link di esempio:

<a data-toggle="modal" href="/page/api?package=herp" data-target="#modal">click me</a>
<a data-toggle="modal" href="/page/api?package=derp" data-target="#modal">click me2</a>
<a data-toggle="modal" href="/page/api?package=merp" data-target="#modal">click me3</a>

Ho apportato una piccola modifica alla risposta di Softlion , quindi tutte le mie modali non si aggiorneranno su hide. Le modalità con l'attributo data-refresh = 'true' vengono solo aggiornate, altre funzionano come al solito. Ecco la versione modificata.

$(document).on('hidden.bs.modal', function (e) {
    if ($(e.target).attr('data-refresh') == 'true') {
        // Remove modal data
        $(e.target).removeData('bs.modal');
        // Empty the HTML of modal
        $(e.target).html('');
    }
});

Ora usa l'attributo come mostrato di seguito,

<div class="modal fade" data-refresh="true" id="#modal" tabindex="-1" role="dialog" aria-labelledby="#modal-label" aria-hidden="true"></div>

Questo assicurerà che solo i modali con data-refresh = 'true' vengano aggiornati. E sto anche resettando l'html modale perché i vecchi valori vengono mostrati fino a quando non vengono caricati nuovi, rendendo html vuoto che risolve quello.

Ecco una versione coffeescript che ha funzionato per me.

$(document).on 'hidden.bs.modal', (e) ->
  target = $(e.target)
  target.removeData('bs.modal').find(".modal-content").html('')

Funzionerà con tutte le versioni di twitterbootstrap

Codice Javascript:

<script type="text/javascript">
/* <![CDATA[ */
(function(){
   var bsModal = null;
   $("[data-toggle=modal]").click(function(e) {
      e.preventDefault();
      var trgId = $(this).attr('data-target'); 
      if ( bsModal == null ) 
       bsModal = $(trgId).modal;
      $.fn.bsModal = bsModal;
      $(trgId + " .modal-body").load($(this).attr("href"));
      $(trgId).bsModal('show');
    });
 })();
/* <![CDATA[ */
</script>

i collegamenti a modal sono

<a data-toggle="modal" data-target="#myModal" href="edit1.aspx">Open modal 1</a>
<a data-toggle="modal" data-target="#myModal" href="edit2.aspx">Open modal 2</a>
<a data-toggle="modal" data-target="#myModal" href="edit3.aspx">Open modal 3</a>

pop-up modale

<div id="myModal" class="modal hide fade in">
<div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Header</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
    <input type="submit" class="btn btn-success" value="Save"/>
</div>

Anche io ero bloccato su questo problema poi ho visto che gli id del modale sono gli stessi. Hai bisogno di ID diversi di modali se vuoi più modali. Ho usato l' ID dinamico . Ecco il mio codice in haml:

.modal.hide.fade{"id"=> discount.id,"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}

Puoi farlo

<div id="<%= some.id %>" class="modal hide fade in">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Header</h3>
  </div>
  <div class="modal-body"></div>
  <div class="modal-footer">
    <input type="submit" class="btn btn-success" value="Save" />
  </div>
</div>

e i tuoi collegamenti a modal saranno

<a data-toggle="modal" data-target="#" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>

Spero che questo funzioni per te.

Puoi provare questo:

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

Volevo che il contenuto caricato AJAX fosse rimosso quando il modale si chiudeva, quindi ho regolato la linea suggerita da altri (sintassi coffeescript):

$('#my-modal').on 'hidden.bs.modal', (event) ->
  $(this).removeData('bs.modal').children().remove()

var $ tabella = $ ('# miaTabella2');
$ table.bootstrapTable ('destroy');

Ha funzionato per me

passaggio 1: creare un wrapper per il modale chiamato clone-modal-wrapper.

passaggio 2: crea un div vuoto chiamato modal-wrapper.

Passaggio 3: copia l'elemento modale da clone-modal-wrappera modal-wrapper.

passaggio 4: attiva / disattiva il modale di modal-wrapper.

<a data-toggle="modal" class='my-modal'>Open modal</a>

<div class="clone-modal-wrapper">
   <div class='my-modal' class="modal fade">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <a class="close" data-dismiss="modal">×</a>
               <h3>Header</h3>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
               <input type="submit" class="btn btn-success" value="Save"/>
            </div>
         </div>
      </div>
   </div>
</div>

<div class="modal-wrapper"></div>


$("a[data-target=#myModal]").click(function (e) {
    e.preventDefault();
    $(".modal-wrapper").html($(".clone-modal-wrapper").html());
    $('.modal-wrapper').find('.my-modal').modal('toggle');
});