Chiusura modulo modale Bootstrap dopo una richiesta Ajax completata

Il modulo modale esegue correttamente una richiesta Ajax. I dati ricevuti vengono visualizzati in background. Il richiamo del modale viene eseguito dagli attributi data- * come esempi di bootstrap mostrano here. Ma il modal non viene licenziato. Ho provato ad aggiungereChiusura modulo modale Bootstrap dopo una richiesta Ajax completata

OnSuccess = "$('#searchForm').modal('hide');"

al mio Ajax.BeginForm. Ma questo non rimuove l'effetto di dissolvenza che il cast modale sullo sfondo.

La mia opinione è:

<div class="modal fade" id="searchForm" tabindex="-1" role="dialog" aria-labelledby="searchFormLabel"> 
    <div class="modal-dialog" role="document"> 
     <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="searchFormLabel">Search Here</h4> 
      </div> 
      <div class="modal-body"> 
       @using (Ajax.BeginForm(new AjaxOptions 
       { 
        HttpMethod = "GET", 
        InsertionMode = InsertionMode.Replace, 
        UpdateTargetId = "results", 
        OnSuccess = "$('#searchForm').modal('hide');" 
       })) 
       { 
        // input fields and submit button are here 
       } 
      </div> 

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

Mi sto perdendo qualcosa?

fonte

2015-12-29 Vivekanand P V

Dopo '$ ('# searchForm'). Modal ('nascondi');' aggiungi questo '$ ('. Modal-backdrop'). Hide();'. Vedi se funziona. –

@Alorika Funziona, ma la prossima volta che proverai ad aprire il modal verrà immediatamente respinto. –

Ciò potrebbe verificarsi a causa di bolle di eventi. Quindi puoi provare ad aggiungere 'e.stopPropagation()' dopo '$ ('# searchForm'). Modal ('nascondi');'. Guarda se questa soluzione funziona per te. –

In questo caso, si sta aprendo il modal tramite data-attributes e quindi si chiude usando jQuery. Quindi, in un certo senso si usano entrambi i metodi di commutazione modale, che sono in conflitto tra loro. Quindi, rimuovi gli attributi dei dati e mostra/nascondi lo modal usando solo jQuery.

Prova questo:

$('#searchForm').modal('show'); //for showing the modal

per nascondere l'OnSuccess:

OnSuccess = "unloadModal"

Funzione unloadModal saranno:

function unloadModal() { 
    $('#searchForm').modal('hide'); 
};

fonte

2015-12-29 07:24:27

Grazie @Aorika :) –

Sono contento che mi abbia aiutato :) –

Anche per me è stato utile :) –

mio scenario: Fornire contenuti di Bootstrap modale attraverso MVC vista parziale e usando Ajax POST-call in esso. Che risolto il mio caso con chiusura automatica modale dopo ajax-chiamata è terminata è un po ' "combo" di chiamate nella funzione di gestione OnComplete/OnSuccess:

function onAjaxCompleted() 
{ 
    $('#searchForm.close').click(); 
    $('body').removeClass('modal-open'); 
    $('.modal-backdrop').remove(); 
}

Spero che questo potrebbe aiutare pure.

fonte

2018-02-02 14:42:19

Chiusura modulo modale Bootstrap dopo una richiesta Ajax completata

risposta

Problemi correlati