Removing popup notification, the dirty way

Question

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.

Answer 1

I wrote something in this answer previously that I realized you were already doing.

If you don't make any design changes, you're doing it pretty much the right way as your app stands (I'm assuming the div doesn't get created with Javascript, it's there in the markup when the page loads. If you're creating the div on the fly, you may want to simplify). Since the HTML coming from the server has to get parsed and put into the DOM, you have to have a callback after your async call that wires up events, display properties, etc. of your returned markup.

As for your comment about how the div is there permanently, and your means of showing/hiding it, that's not really a problem. jQuery's show/hide methods work exactly that way for toggling element visibility. As for how you are using it in your solution, that's the way a lot of modals work, where a div is rendered, but hidden until the user does something to show the modal. An example of something problematic would be a new div being created every time an AJAX request was made and the old ones sticking around forever cluttering up the DOM until the page was refreshed. I think it's totally fine to have an empty holder element that is not displayed until data comes back from the server to populate it.

I wouldn't really return the div's content as HTML from the server. All you really are after is a message in this div, yes? Just return a JSON object that looks like { message: "Success message from server" } from the server and in your callback set the inner html of the element that's supposed to hold the message to data.message. That'll help keep things organized if you need to add more data to the response in the future.