-1
モーダルを終了した後にアラートメッセージを非表示にして、ユーザーがモーダルを開いたときに再び警告メッセージを表示しないようにしたいとします。だから私はフォームをリセットすることができましたが、警告メッセージは問題のままです。モーダルがjQueryを終了した後に警告メッセージを表示させない方法は？
これが私のHTMLです：
<div id="locationModal" class="modal fade" tabindex="-1" role="dialog">
<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">×</span></button>
<h4 class="modal-title">Location name</h4>
</div>
<div class="modal-body">
<form id="locationForm">
<div class="form-group ">
<label class="control-label " for="locationName">
Name
</label>
<input class="form-control" id="locationName" name="name" type="text" autofocus/>
</div>
<div class="form-group">
<div class="modal-footer">
<input type="submit" class="btn btn-primary" id="locationBtn" value="Add new location"/>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<div id="locationAlert" style='float: left; color: red'></div>
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="roleModal" class="modal fade" tabindex="-1" role="dialog">
<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">×</span></button>
<h4 class="modal-title">Role name</h4>
</div>
<div class="modal-body">
<form id="roleForm">
<div class="form-group ">
<label class="control-label " for="roleName">
Name
</label>
<input class="form-control" id="roleName" name="name" type="text" autofocus/>
</div>
<div class="form-group">
<div class="modal-footer">
<input type="submit" class="btn btn-primary" id="roleBtn" value="Add new role"/>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<div id="roleAlert" style='float: left; color: red'></div>
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="departmentModal" class="modal fade" tabindex="-1" role="dialog">
<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">×</span></button>
<h4 class="modal-title">Department name</h4>
</div>
<div class="modal-body">
<form id="departmentForm">
<div class="form-group ">
<label class="control-label " for="departmentName">
Name
</label>
<input class="form-control" id="departmentName" name="name" type="text" autofocus/>
</div>
<div class="form-group">
<div class="modal-footer">
<input type="submit" class="btn btn-primary" id="departmentBtn" value="Add new department"/>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<div id="departmentAlert" style='float: left; color: red'></div>
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
とJS：
var locationModal = $('#locationModal');
var roleModal = $('#roleModal');
var departmentModal = $('#departmentModal');
var holidayModal = $('#officialHolidayModal');
$(document).ready(function() {
$('#addLocation').click(function() {
locationModal.modal('show');
});
$('#addDepartment').click(function() {
departmentModal.modal('show');
});
$('#addRole').click(function() {
roleModal.modal('show');
})
$('#addOfficialHoliday').click(function() {
holidayModal.modal('show');
})
// fill location select with options
$.ajax({
method: "GET",
url: "/api/locations"
}).done(function (locations) {
$.each(locations, function (i, location) {
$('#locations').append($('<option>', {
value: location.locationId,
text : location.name
}));
});
});
});
$('#locationBtn').click(function (e) {
e.preventDefault();
var location = JSON.stringify($('#locationForm').serializeObject());
if ($("#locationName").val().length < 1) {
$("#locationAlert").text("Please insert a location!");
} else {
$.ajax({
url: "/api/locations",
method: 'POST',
data: location,
contentType: "application/json",
dataType: "html"
}).success(function() {
$('#successMessage').text("Location added successfully");
locationModal.modal('hide');
});
$("#locationForm")[0].reset();
}
});
$('#roleBtn').click(function (e) {
e.preventDefault();
var location = JSON.stringify($('#roleForm').serializeObject());
if ($("#roleName").val().length < 1) {
$("#roleAlert").text("Please insert a role!");
} else {
$.ajax({
url: "/api/roles",
method: 'POST',
data: location,
contentType: "application/json",
dataType: "html"
}).success(function() {
$('#successMessage').text("Role added successfully");
roleModal.modal('hide');
});
$("#roleForm")[0].reset();
}
});
$('#departmentBtn').click(function (e) {
e.preventDefault();
var location = JSON.stringify($('#departmentForm').serializeObject());
if ($("#departmentName").val().length < 1) {
$("#departmentAlert").text("Please insert a department!");
} else {
$.ajax({
url: "/api/departments",
method: 'POST',
data: location,
contentType: "application/json",
dataType: "html"
}).success(function() {
$('#successMessage').text("Department added successfully");
departmentModal.modal('hide');
});
$("#departmentForm")[0].reset();
}
});
ので#locationAlert、#roleAlertと#departmentAlertモーダル閉じた後消えるはずです。どうやってするか？