Odzyskiwanie danych z modemu Bootstrap

Mam stronę rejestracji, która uruchamia okno modalne (przy użyciu Bootstrap) zawierające na przykład login na Facebooku i chcę, aby ten modal przekazywał dane (błędy lub jeśli powodzenie tokena/dane użytkownika) do głównego okna, dzięki czemu mogę wypełnić odpowiednie pola formularza i pozwolić użytkownikowi zakończyć proces rejestracji (zaznacz pole "Zatwierdzam warunki" itp.).Odzyskiwanie danych z modemu Bootstrap

Wiem, jak to zrobić, poza bitem o wysyłaniu danych po zakończeniu modalu. Czy istnieje sposób przekazywania danych z modalu do głównego okna zdarzenia modalnego zamknięcia?

EDIT: tutaj jest wizualną reprezentacją tego, co chcę osiągnąć: flow

Źródło

2013-06-04 Davor

Co masz na myśli przez "odesłanie"? Jesteś w "głównym oknie" (modal to tylko element wewnątrz). Dlaczego nie przypisywać wartości, błędów itp. Do ukrytych danych wejściowych lub elementów na samej stronie? – davidkonrad

Modal wywołuje inny adres URL, w którym znajduje się mój autoryzowany kontroler. Tak więc w końcu mam tam tablicę php i chcę, żeby to było używane przez skrypt jquery, który następnie przypisze odpowiednie wartości do strony. To właśnie miałem na myśli przez "odesłany": jest to zasadniczo jak wywołanie ajax, z wyjątkiem tego, że użytkownik musi łączyć się z oknem modalnym. – Davor

Coś jak http://sptalks.wordpress.com/2013/03/12/sharepoint-modal-dialog-passing-values-back-and-forth/, ale z modem Bootstrap, jeśli to możliwe. – Davor

Dobrze. Masz dostęp zarówno do głównego okna, jak i do zawartości modalnej, więc po prostu wystarczy skopiować zawartość z elementów modalnych przed zamknięciem. Przykład robocza (skopiuj dwa CodeBlocks na dwa pliki):

auth.php (nie wiem jak auth swoje prace, ale może wywołać zdalne logowanie i uzyskać pewne rezultaty, można przechowywać w JSON tablicy)

<label for="modal-username">Username</label><input type="text" name="modal-username" id="modal-username"> 
<? 
$result = array(); 
$result['error']='error'; 
$result['auth']='auth'; 
$javascript_array = json_encode($result); 
?> 
<input type="hidden" id="modal-result" value='<? echo $javascript_array;?>'>

modal.html, główne okno

<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
</head> 
<body> 

<!-- button to trigger modal --> 
<a href="auth.php" data-target="#myModal" data-toggle="modal">remote modal</a> 

<!-- hidden fields to store modal result in --> 
<input type="hidden" id="main-username"> 
<input type="hidden" id="main-result"> 

<!-- modal --> 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Modal test</h3> 
    </div> 
    <div class="modal-body"> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> 
    <button class="btn btn-primary" onclick="login();">Login</button> 
    </div> 
</div> 

<script type="text/javascript"> 
//called when user clicks login 
function login() { 
    $("#main-username").val($("#modal-username").val()); 
    $("#main-result").val($("#modal-result").val()); 
    $("#myModal").modal("hide"); 
} 

//called when the modal is closed, logs values grabbed from the modal in login() 
$('#myModal').on('hidden', function() { 
    console.log('username : '+$("#main-username").val()); 
    console.log('result : '+$("#main-result").val()); 
}) 
</script> 

</body> 
</html>

Źródło

2013-06-04 12:17:19 davidkonrad

Wielkie dzięki za poświęcenie czasu na napisanie tak szczegółowej odpowiedzi! To bardzo pomogło. – Davor

Dzięki, było bardzo pomocne! – Willz

już nie działa z klasą ukrywania, której nigdy nie pokazano, zastąpiony stylem = "display: none"; – Sergey

Bootstrap zawiera następujące wbudowane obsługi do osiągnięcia tego wydarzenia:

show.bs.modal - Występuje przy modalnym ma być przedstawiony
shown.bs.modal - Występuje przy modalnym całkowicie pokazany na rysunku (po przejścia CSS ukończyli)
hide.bs .modal - Występuje, gdy modalne ma być ukryty
hidden.bs.modal - Występuje, gdy modalna jest całkowicie ukryty (po zakończeniu przejścia CSS)

Twoim przypadku można użyć hide. bs.modalne wydarzenie, aby uzyskać wartości atrybuty modalne po kliknięciu przycisku i zanim modal zostanie ukryty. W ten sposób przykład podany przez davidkonrad może zostać osiągnięty w jednej funkcji, eliminując potrzebę pośrednich ukrytych atrybutów.

$('#myModal').on('hide.bs.modal', function() {  
    console.log('username : '+$("#modal-username").val());  
    console.log('result : '+$("#modal-result").val());  
})

Źródło

2016-06-26 09:05:53 Srini

Odzyskiwanie danych z modemu Bootstrap

Odpowiedz

Powiązane problemy