Created
May 19, 2018 05:03
-
-
Save Believe2Be/7f8aa8d406f03c58699294eabdbb16ab to your computer and use it in GitHub Desktop.
BS4 Modal - ajax
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<button | |
type="button" | |
class="btn btn-outline-primary" | |
data-toggle="modal" | |
data-target="#primaryWin" | |
data-whatever="@fName">Primary</button> | |
<div class="modal fade" id="primaryWin" tabindex="-1" role="dialog" aria-labelledby="primaryWinLabel" aria-hidden="true"> | |
<div class="modal-dialog" role="document"> | |
<div class="modal-content"> | |
<div class="modal-header"> | |
<h5 class="modal-title" id="primaryWinLabel">New message</h5> | |
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
<span aria-hidden="true">×</span> | |
</button> | |
</div> | |
<div class="modal-body"> | |
<!-- FORM --> | |
<form method="post" action="server.php" id="formMsg"> | |
<div class="form-group"> | |
<label for="recipient-name" class="col-form-label">Recipient:</label> | |
<input type="text" class="form-control" id="recipient-name"> | |
</div> | |
<div class="form-group"> | |
<label for="message-text" class="col-form-label">Message:</label> | |
<textarea class="form-control" id="message-text"></textarea> | |
</div> | |
</form> | |
<!-- FORM --> | |
</div> | |
<div class="modal-footer"> | |
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | |
<button type="button" id="btnSbt" class="btn btn-primary">Send message</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script src="js/jquery-3.3.1.min.js"></script> | |
<script src="js/popper.min.js"></script> | |
<script src="js/bootstrap.min.js"></script> | |
<script> | |
// Modal Win | |
$('#primaryWin').on('show.bs.modal', function (event) { | |
var button = $(event.relatedTarget); // Button that triggered the modal | |
var recipient = button.data('whatever') // Extract info from data-* attributes | |
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback). | |
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. | |
var modal = $(this); | |
modal.find('.modal-title').text('New message to ' + recipient); | |
modal.find('.modal-body input').val(recipient); | |
// On submit | |
$('#formMsg').on('submit',function(event){ | |
$.ajax({ | |
url: 'server.php', | |
context: document.body | |
}).done(function(data) { | |
alert(data); | |
}); | |
event.preventDefault(); | |
}); | |
// on click submit | |
$('#btnSbt').click(function () { | |
$('#formMsg').submit(); | |
}); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment