0

I want to use jQuery to work with events in a given search box. My issue is that

  1. I don't know how to build the selector correctly, so that JQuery accepts it.
  2. I think I'm getting confused because I need the second element in the list and need to select that one.

The runtime HTML looks like this: (Adapted from Chrome Developer tools, only the relevant class and IDs are shown. There are no IDs to be shown.)

<body class=km-ios7 km-7 km-m0 km-web km-black-status-bar km-vertical km-widget km-pane>
   <div class="km-widget km-view">

       <!-- Begin 3rd party control -->
       <div class=class="km-widget km-view">
          <div km-header>
          <div class="km-content km-widget km-scroll-wrapper">
             <div class=km-scroll-header>
             <div class=km-scroll-container>
                <div class="km-listview-wrapper">
                    <form class="km-filter-form">
                       <div class="km-filter-wrap">
                          <input type=search >

What I've tried

Since my event wasn't firing I assume my selector was wrong. I opened chrome developer tools after I did "inspect element". The bottom of the tools listed all the parent tags used for that element (with no class or ID). As a test, I've tried hiding the search box using the following:

 $("div").hide();   // hides everything...
 $("div div").hide(); // hides the wrong element on the page
 $("input").hide();  // nothing
 $(":input").hide();  // nothing... saw this example somewhere, don't understand it
 $("input:text").hide();  // nothing... saw this example (http://stackoverflow.com/q/17384218/328397), don't understand it

I looked at this W3 document, but didn't see what I was looking for (unless I missed it)

Any assistance in getting the right selector would be appreciated.

makerofthings7
  • 60,103
  • 53
  • 215
  • 448

4 Answers4

1

In the page you linked it's the second div under defaultHomecontent, so

$("#defaultHomeContent div:nth-child(2)")

Totò
  • 1,824
  • 15
  • 20
  • I see what you're getting at... I should wrap this in a named element, then do as you say. (the searchbox isn't really a child of defaultHomeContent; it's a peer at the same level.) – makerofthings7 May 06 '14 at 05:20
  • I wasn't able to get this to work. As this is a 3rd party control, I can't add a class or ID to the parent of the search box. – makerofthings7 May 06 '14 at 05:37
  • sorry, I thought you wanted to get that second div... for the searchbox you can use `$("input[type='search']") ` as suggested by @Serendipity – Totò May 06 '14 at 06:14
1

you can use the find function. Let suppose you have input field inside footer div like this.

<div id="footer">
   <div>
     <div>
       <input type="text" name="text" value="Search" />
     </div>
   </div>
</div>

You can use selector like this $("#footer input").hide() or $("#footer").find("input").hide() or $('input[name=text]', '#footer').hide();

PeterKA
  • 24,158
  • 5
  • 26
  • 48
razahassank
  • 195
  • 8
  • For what it is worth Paul Irish argues that find() is the slightly more performant than including them within the same selector. About the 33:30 mark. http://www.paulirish.com/2010/10-things-i-learned-from-the-jquery-source/ – Joshua May 06 '14 at 05:21
  • I wasn't able to get this to work. Perhaps because there are no IDs or classes as parents I can use, or that the class that I added was not an immediate parent of the input element. As this is a 3rd party control, I can't directly add a parent to the element. – makerofthings7 May 06 '14 at 05:38
  • It really doesn't matter that immediate parent should have any class or id assigned .. find function can iterate all the childrens of parent. – razahassank May 11 '14 at 05:18
1

You actually want to hide the div with class km-filter-wrap.

A safer alternative may be to not deal with selectors and instead show/hide the wrapper element for the ListViewFilter's searchInput element:

var listView = $("#local-filterable-listview").kendoMobileListView({
    ...
}).getKendoMobileListView();
listView._filter.searchInput.parent().hide();

or

listView.wrapper.find(".km-filter-wrap").hide();

In general, it's a good idea to use the elements that are exposed by Kendo UI controls as much as possible instead of manually building queries (since they might change in future versions).

You could also extend the ListView widget with your own API method for this:

kendo.mobile.ui.ListView.fn.filterVisible = function(value) {
    var wrapper = this._filter.searchInput.parent();
    if (value) {
        wrapper.show();
    } else {
        wrapper.hide();
    }
};

then you could use

listView.filterVisible(false); // hide the filter
Lars Höppner
  • 18,252
  • 2
  • 45
  • 73
  • Thank you, this does answer what I asked. My simple need is to fire an input/changed event when data is entered in the box. As I write this comment I think I see how I can make this work... will test shortly... – makerofthings7 May 06 '14 at 13:44
  • see the answer on your other question: http://stackoverflow.com/a/23494360/2001735 – Lars Höppner May 06 '14 at 14:59
0

Based on what you have added.

You could use

$("input[type='search']")

as a selector.

See if that helps. Here is an example

You could also combine the selectors in this manner:

var $container = $("div.km-widget");
var $searchBox = $container.find("input[type='search']");
Serendipity
  • 1,015
  • 1
  • 10
  • 19