I'm new to coding and I am self-taught up to this point, so my scope for creativity is quite limited. As such I'm doing something in particular that I suspect isn't the "best" way of achieving this very simple task.
Basically, all I'm trying to do is remove a message notification which pops up after ajax has been performed. The div for this message is produced via a callback, and because of this, I cannot use .remove() on click of the "x" button, because this disables the div from appearing on the screen if any further ajax is performed.
The way I'm doing it is by simply changing the css display property to none on click of the "x". However like with the remove method, the display is set to none, making the message box no longer produced upon the execution of the ajax callback (which produces the message). So to overcome this, I ended up assigning the "update" and "delete" buttons to classes, which when clicked would reset the css display property of said message div back to inline.
The div i'm talking about is the green box of text you can see in this photo:
here is the javascript I'm using for this particular page (which is for dynamically editing and deleting nav-items from the front end of my site.)
Here is the code for deleting:
$(".nav-item-delete").on("click", function(){ //this is the delete button
var selected = $(this).attr("id");
var nav_item_id = selected.split("del_").join("");
var confirmed = confirm("Are you sure you wanted to DELETE this nav item?");
// IF CONFIRMED
if (confirmed == true) { //if i agree to delete
$.get("ajax/navigation.php?deleted="+nav_item_id, function( data ) {
$( "#callback" ).html( data ); // callback of the actual notification/message div
$("#remove-btn").on("click",function() { // the "x" which appears in the top left corner of the notification div
$('#callback').css({'display': 'none'}); // change it's display to none
});
}); // END $.get
$('.toggle-css-btn-red').on("click",function(){ // this is the delete button in the DOM environment
$('#callback').css({'display': 'inline'}); // change css back to inline on click
});
and here is for updating the nav-item:
// NAV ITEM - UPDATE
$(".nav-form").submit(function(event) {
var form = $(this);
var navData = form.serializeArray();
var navLabel = form.find('input[name=label]').val();
var navID = form.find('input[name=id]').val();
var chevron = " <i class='fa fa-chevron-down''></i>";
$.ajax({
url: "ajax/navigation.php",
type: "POST",
data: navData
}).done(function( data ){
$("#label_"+navID).html(navLabel+chevron);
$( "#callback" ).html( data );
$("#remove-btn").on("click",function() { //the "x" which removes the message div
$('#callback').css({'display': 'none'});
});
$('.toggle-css-btn-green').on("click",function(){ // the "save" button which updates the nav-item
$('#callback').css({'display': 'inline'}); //div returned to visible state
});
}); // END $.ajax
and here is the relevant DOM elements:
<!--Button and Hidden Input-->
<button type="submit" class="btn btn-success toggle-css-btn-green" title="Save to Database"><i class="fa fa-plus-square"></i>
</button>
<input type="hidden" name="submitted" value="1" />
<input type="hidden" name="opened_id" value="<?php echo $list['id']; ?>" />
<span class="pull-right">
<a id="del_<?php echo $list['id']; ?>" class="btn btn-danger nav-item-delete toggle-css-btn-red" href="#" style="margin-bottom: 2px;" title="delete nav item"><i class="fa fa-trash"/></i></a>
</span>
Please suggest to me a way that is more practical, if there is one. I don't like how the div is there permanently until the page is reloaded, with no ajax yet performed.