Introduction: My current project involves managing interns, and I am focusing on the employee side. Employees have the ability to add, edit, and delete interns through modal popups.
Strategy: To avoid unnecessary repetition of code, I decided to create a layout for the modals.
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3><span class="glyphicon glyphicon-pencil"></span>Intern</h3>
</div>
<div id="myModalContent"></div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-right" data-dismiss="modal"> Cancel
</button>
</div>
</div>
The layout includes a CANCEL button as it is considered best practice to include one in every modal popup.
<div id="myModalContent"></div>
The content of myModalContent is dynamically filled using JavaScript/AJAX. The script loads partial views into myModalContent and includes buttons like "Save Changes" and "Delete Intern".
Challenge: The Cancel button and other action buttons are located in separate divs which has led to some issues:
https://i.sstatic.net/0MPlN.png
Edit Button code:
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-right">
<span class="glyphicon glyphicon-floppy-disk"></span> Edit Intern
</button>
</div>
I am seeking assistance with aligning these buttons on the same row, as I am unable to access the parent div with CSS or HTML alone.
Any guidance or solutions would be greatly appreciated. Thank you
Edit:
Below is the jQuery code used:
$(function () {
$.ajaxSetup({ cache: false });
$("a[data-modal]").on("click", function (e) {
$('#myModalContent').load(this.href, function () {
$('#myModal').modal({
keyboard: true
}, 'show');
bindForm(this);
});
return false;
});
function bindForm(dialog) {
$('form', dialog).submit(function () {
$('#progress').show();
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
$('#myModal').modal('hide');
$('#progress').hide();
location.reload();
} else {
$('#progress').hide();
$('#myModalContent').html(result);
bindForm();
location.reload();
}
}
});
return false;
});