How can I chain jQuery events from an existing 3rd party control?

Question

I need to extend a 3rd party control as demonstrated here. Notice how the search box is visible and responds to a filter request.

I want to add this function to that search box so that I can make adjustments to the UI depending on whether or not text is present in the search box.

listView._filter.searchInput.input(function() { } );

The problem is that when I apply this line as-is, it seems that I'm removing the previous event and I'm unable to click on or do anything with the search box.

Question

1. What tool or method can I use to determine the function that I'm overwriting? (what I assume is happening)
2. How can I properly fire the _private event, and then mine? (I assume that the private event needs to fire first, to allow the UI to work as expected)

Answer 1

first off, here's what I 'think' is the solution to what you are ultimately trying to do...

/* initialize, logic... */
if(listView._filter.searchInput.val() == ''){
   $("#local-filterable-listview").hide();
   $("#defaultHomeContent").show();
 }
/* subscribe to the 'keyup' event on the searchBox..*/ 
 listView._filter.searchInput.on('keyup',function(){
   var showHideDefault = ($(this).val() == '')?'show':'hide';
   var showHideList = ($(this).val() == '')?'hide':'show';
   $("#local-filterable-listview")[showHideList]();
   $("#defaultHomeContent")[showHideDefault]();
 });

that should get you up and running...

To answer your questions... 1. There is no 'tool' that I know of, the best way I've found is to look for the event in the source code... 2. To unbind an event in jquery, the .unbind() function needs to be used, what we're doing above is simply adding an event callback to any events already bound to the search form.. this way the '_private' event callback and the newly subscribed event fire and since we've added the event after initializing the listView (which is where the '_private' event gets bound ) it will fire after the '_private' event..

Answer 2

If you want to display diffrent content when your listview is empty, you should do this like this:

$(listView._filter.searchInput).on("keyup", function(){        
    if($('#local-filterable-listview').data("kendoMobileListView").items().length == 0)
      {
        $("#defaultHomeContent").show();  
      }
    else
        {
         $("#defaultHomeContent").hide(); 
        }
  });

And set your div#defaultHomeContent to display:none in style attribute.

Answer 3

I'm not quite sure what you want to do, but here is how you fire an event, when a user is typing. So, if your content is inside a table and there are td's you want to filter, then you could do it like this:

HTML

<input class="searchbar" placeholder="Search">
<table class="contentTable">
    <tr>
        <td>
            Anton
        </td>
    </tr>
    <tr>
        <td>
            Bill
        </td>
    </tr>
    <tr>
        <td>
            Christian
        </td>
    </tr>
</table>

jQuery

$(".searchbar").keyup(function(){
    // do the magic here
    val = $(this).val();
    $('.contentTable tbody tr').hide();
    $('.contentTable tbody td:contains("'+ val +'")').parent("tr").show();
})

JSFIDDLE: http://jsfiddle.net/nYc64/1/