CODEWITHSUNDEEP
jquery-mobile
flyingfisch
flyingfisch

Reputation: 529

Showing a message if no results jQuery Mobile 1.4.3

I have tried the solutions to this question to no avail.

Through trial and error I found that this solution does not work with jQuery Mobile 1.4.3 (JSFiddle to prove it).

$(document).delegate('[data-role="page"]', 'pageinit', function () {
    var $listview = $(this).find('[data-role="listview"]');
    $(this).delegate('input[data-type="search"]', 'keyup', function () {
        if ($listview.children(':visible').not('#no-results').length === 0) {
            $('#no-results').fadeIn(500);
        } else {
            $('#no-results').fadeOut(250);
        }
    });
});

Does anyone know of another solution to this?

Upvotes: 0

Views: 706

Answers (3)

Gennadiy
Gennadiy

Reputation: 11

I think it's also interesting to solve this issue through CSS without writing JavaScript/JQuery code and having JS-handlers. We can add a div with the necessary text and place it behind the list items. So, it will always be on the page, but it will be visible only if there are no list items in front of it.

A simple implementation consists of 2 parts:

CSS:

div.no-results
{
    position: absolute;
    top: 80px;
}

HTML (wrap the list into a block-element and place a div with a label before the list):

<div data-role="content">
   <div class="no-results" >No results found.</div>
   <ul.....


Take a look at the sample: FIDDLE

Upvotes: 1

ezanker
ezanker

Reputation: 24738

The filterable widget provides an event that is triggered after filtering, so you don't need the keyup event on the search box (for the demo I have given the UL element an id of theList):

$(document).on('pagecreate', '#page1', function () {
    $("#theList").on( "filterablefilter", function( event, ui ) {
        if ($(this).children(':visible').not('#no-results').length === 0) {
            $('#no-results').removeClass("ui-screen-hidden").fadeIn(500);
        } else {
            $('#no-results').addClass("ui-screen-hidden").fadeIn(250);
        }
    });    
});

Instead of delegate(), use the on(). Also jQM 1.4 hides elements by applying the class ui-screen-hidden, so in the method you need to add and remove that class.

Updated FIDDLE

Upvotes: 1

Tasos
Tasos

Reputation: 5361

A roundabout way of doing it is to actually record how many list items are hidden and compare with how many list items were there in the first place.

Demo

http://jsfiddle.net/q6w41v6g/

Demo with fadein effect using a 2nd listview with no append to listview

http://jsfiddle.net/9Lmmz654/

<div data-role="page">
    <div data-role="content">
        <ul data-role="listview" id="listview" data-filter="true">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li> 

        </ul>
    </div>
</div>

var lisize = $("#listview li").size();
var timer = null;
$(document).on('keydown', '.ui-input-search', function(){
    $('#notfound').remove();
       clearTimeout(timer); 
       timer = setTimeout(checklist, 500)
});

function checklist() {
var count = $('#listview li').size() - $('#listview li.ui-screen-hidden').size();

if(count<1)
{
    var additem   = $("<li id='notfound'><a style='text-align:center;background-color: #f6f6f6;border-color: grey;color: #333;text-shadow: 0 1px 0 #f3f3f3;'>No Results Found</a></li>");    

additem.appendTo("#listview");

    }
    else { 

    $('#notfound').remove();
   }
  }

Upvotes: 1

Related Questions