CODEWITHSUNDEEP
javascriptjqueryjquery-ui-sortable
LOTUSMS
LOTUSMS

Reputation: 10240

Empty list message on jquery-sortable

I'm working with jquery-sortable and 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:

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.

SAMPLE HTML FOR EMPTY CONTAINER

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

DIFFERENT JQUERY APPROACHES

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. How else can I hijack this empty or emptied list?

Here's a testing fiddle for you:

DEMO

Thanks in advance.

Upvotes: 1

Views: 522

Answers (1)

norbitrial
norbitrial

Reputation: 15166

You need to handle on every list change the error message state so let's say we have the following HTML - example from your demo:

<ol id="mediaItemsListDest" class="simple_with_animation vertical">
  <p>Drag and drop an item from the list</p>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

Additionally I have extended with a function which is handling the message state, code is placed on initialization part of the application:

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

   console.log('length', liObjects.length);
   console.log('message', message);

   if (liObjects.length !== 0) {
      message.css('display', 'none');
   } else {
      message.css('display', 'inline');
   }
}

handleMessage();

This function needs to be called in onDrop event:

onDrop: function  ($item, container, _super) {
   // code part removed but you can find in your demo

   handleMessage();
}

I did a quick test and it was working fine. I hope this one is helping, let me know if you need more information.

Upvotes: 2

Related Questions