Added highlight effect when removing an item from a list

- Uses jQuery UI
This commit is contained in:
Mcat12
2016-01-27 19:46:10 -05:00
parent 4b0e1d9ca2
commit d6fd5fb109
2 changed files with 8 additions and 6 deletions
+1
View File
@@ -11,6 +11,7 @@
</div>
<!-- ./wrapper -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
<script src="./js/app.min.js" type="text/javascript"></script>
+7 -6
View File
@@ -31,7 +31,7 @@ function getFullName() {
Adding to the <?php getFullName(); ?>...
</div>
<div id="alSuccess" class="alert alert-success" role="alert" hidden="true">
Success! It will probably take 2-10 minutes until the changes take effect. The list will refresh.
Success! The list will refresh.
</div>
<div id="alFailure" class="alert alert-danger" role="alert" hidden="true">
Failure! Something went wrong.
@@ -62,10 +62,10 @@ require "footer.html";
'<div class="alert alert-info" role="alert">Your <?php getFullName(); ?> is empty!</div>';
}
else {
data.forEach(function (entry) {
data.forEach(function (entry, index) {
list.innerHTML +=
'<li id="' + entry + '" class="list-group-item clearfix">' + entry +
'<button class="btn btn-danger btn-xs pull-right" type="button" onclick="sub(\'' + entry + '\')">' +
'<li id="' + index + '" class="list-group-item clearfix">' + entry +
'<button class="btn btn-danger btn-xs pull-right" type="button" onclick="sub(\'' + index + '\', \'' + entry + '\')">' +
'<span class="glyphicon glyphicon-trash"></span></button></li>';
})
}
@@ -98,13 +98,14 @@ require "footer.html";
});
}
function sub(entry) {
function sub(index, entry) {
$("#"+index).hide("highlight");
$.ajax({
url: "php/sub.php",
method: "get",
data: {"domain":entry, "list":"<?php echo $list ?>"},
success: function(response) {
document.getElementById("list").removeChild(document.getElementById(entry));
document.getElementById("list").removeChild(document.getElementById(index));
},
error: function(jqXHR, exception) {
alert("Failed to remove the domain!");