empty list

[lotusms]

I'm having some difficulty modifying the list container (ul) when it's been emptied or loaded empty. For example, If you have two containers:

• collection list to drag from that always contains a few items.

• destination list which loads empty (unless it is being edited and it will contain some list items but can be emptied by dragging them out of there

The empty container (ul) should display a message (i.e. nothing here) whenever it loads empty or it gets emptied on edit

I tried several approaches with no avail.

<ul id="mediaItemsListDest" class="playlist-items connectedSortable">
        <!-- force a message in html -->
	<p>Drag and drop an item from the list</p>
</ul>

if( $("#mediaItemsListDest li").length >= 1 ) {
      //remove it when the ul contains an li
      $("#mediaItemsListDest p").css('display','none');
 }

or

if( $("#mediaItemsListDest li").length === 0 ) {
      //no li is found, display a message via jquery but don't add it as a <p> element in the html
      $(this).html("Sorry, this is empty");
 }

or

if( !$("#mediaItemsListDest").has("li").length ) {
       $(this).html("Sorry, this is empty");
}

None of them worked. Do you have a callback in place that can be added to the sortable function to display a message when empty? For instance:

$("#mediaItemsListDest, #mediaItemsList, #playlistItemsList").sortable({
        emptyMsg: " Not items available",
});

[lotusms]

I fixed it, perhaps this should somehow integrated.

1. I added a placeholder text to the html of the receiving containers like this

<ul id="mediaItemsListDest" class="playlist-items connectedSortable">
	<p class="empty-msg">Drag and drop an item from the list</p>
</ul>

2. And then added this inside the onDrop

function handleMessage() {
      let liObjects = $('#mediaItemsListDest li');
      let message = $('#mediaItemsListDest p.empty-msg');

       if (liObjects.length !== 0) {
              message.addClass('hide');
              message.removeClass('show');
        } else {
              message.removeClass('hide');
              message.addClass('show');
        }
 }

handleMessage();

3. Most css frameworks already have a .hide and .show css class, but if not, simply add display:none and display:flex or inline respectively