dojox.mobile.SearchBox not editable in ScrollableView in Android mobile

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

dojox.mobile.SearchBox not editable in ScrollableView in Android mobile

muthukumar
I am developing a mobile app where i am using dojox.mobile.SearchBox programmatically.

I am facing 2 issue(s),

1)  If i add label attribute in dojox.mobile.Heading and add searchbox in the heading searchbox is not editable.

2) I am capturing the dojox.gesture.swipe.end event due to which searchbox is non editable.


So could someone please help me on this issue.

Code snippet as below,

 var view4 = new dojox.mobile.ScrollableView({
            id: "view4",
              selected: true
          }, dojo.body());
         
          view4.on(dojox.gesture.swipe.end, function(e)
          {
          if((currentStart + currentCount) < totalItems )
          {
          request.start += currentCount;
          request = store.fetch(request);
        }
           });
         view4.startup();
         
         var headWidget = new dojox.mobile.Heading({label:"Test",fixed:'top'});
         headWidget.placeAt(view4.containerNode);
         view4.addFixedBar(headWidget);
 var searchBox = new dojox.mobile.SearchBox({ id:"searchBox",selectOnClick:true,
    type:"search",placeHolder:"search",style:"float:right;",incremental:true,store:searchStore, searchAttr: "NAME",ignoreCase: true,onSearch:onSearch});
                 searchBox.placeAt(headWidget.containerNode);
Reply | Threaded
Open this post in threaded view
|

Re: dojox.mobile.SearchBox not editable in ScrollableView in Android mobile

Adrian Vasiliu
Hi,

"1)  If i add label attribute in dojox.mobile.Heading and add searchbox in the heading searchbox is not editable."

The trouble is that the title is in a DIV with width: 100% which covers the SearchBox. To still allow the SearchBox to get the touch or key events you need to ensure the proper relative z-ordering of these elements. Now, the dojox/mobile theme sets z-index: 1 for the title (mblHeadingDivTitle CSS class) while the SearchBox gets z-index:2 thanks to
mblHeading * {
  z-index: 2;
}
which is also set by the dojox/mobile themes (in your case, the SearchBox is a descendant of the heading). So... at a first glance it should work, because the z-index of the SearchBox is higher than the z-index of the title. But it doesn't work because the z-index is effective only for "positioned" elements (see http://www.w3.org/wiki/CSS/Properties/z-index ). 

Hence, in short, you can make it work by positioning your SearchBoxes which are descendants of a heading, say by adding this to your app: 

<style>
.mblHeading .mblSearchBox {
position: relative; 
}
</style>

At a quick try this works fine.

"2) I am capturing the dojox.gesture.swipe.end event due to which searchbox is non editable."

I think this is due to a bug in dojox/gesture. I've open a ticket for it:
and I submitted a patch proposal.

For the time being, on desktop browsers a workaround is to give the focus to the input field using the TAB key (pressed multiple times) - this makes it editable. Or implement your own gestures without relying on dojox/gesture (which is flagged "experimental"). 

Hope this helps,
Adrian

2013/3/6 muthukumar <[hidden email]>
I am developing a mobile app where i am using dojox.mobile.SearchBox
programmatically.

I am facing 2 issue(s),

1)  If i add label attribute in dojox.mobile.Heading and add searchbox in
the heading searchbox is not editable.

2) I am capturing the dojox.gesture.swipe.end event due to which searchbox
is non editable.


So could someone please help me on this issue.

Code snippet as below,

 var view4 = new dojox.mobile.ScrollableView({
                                 id: "view4",
                                 selected: true
                                         }, dojo.body());

          view4.on(dojox.gesture.swipe.end, function(e)
                           {
                                        if((currentStart + currentCount) < totalItems )
                                                {
                                                        request.start += currentCount;
                                                        request = store.fetch(request);
                                                }
                                  });
         view4.startup();

         var headWidget = new
dojox.mobile.Heading({label:"Test",fixed:'top'});
         headWidget.placeAt(view4.containerNode);
         view4.addFixedBar(headWidget);
 var searchBox = new dojox.mobile.SearchBox({
id:"searchBox",selectOnClick:true,

type:"search",placeHolder:"search",style:"float:right;",incremental:true,store:searchStore,
searchAttr: "NAME",ignoreCase: true,onSearch:onSearch});
                 searchBox.placeAt(headWidget.containerNode);


________________________________________________________
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: dojox.mobile.SearchBox not editable in ScrollableView in Android mobile

muthukumar
Hi Adrian,

     Thanks for valuable input. Shall i apply the patch proposal given by you in dojox/gesture/Base.js which i am using currently.

-Muthukumar.P
Reply | Threaded
Open this post in threaded view
|

Re: dojox.mobile.SearchBox not editable in ScrollableView in Android mobile

Adrian Vasiliu
Sure, if you want, you can of course apply it to your local install of Dojo. If later you'll want to upgrade to a newer Dojo version, you should check the ticket to see if the fix is now onboard, otherwise apply it again after upgrading.

Adrian

2013/3/28 muthukumar <[hidden email]>
Hi Adrian,

     Thanks for valuable input. Shall i apply the patch proposal given by
you in dojox/gesture/Base.js which i am using currently.

-Muthukumar.P


________________________________________________________
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: dojox.mobile.SearchBox not editable in ScrollableView in Android mobile

muthukumar
Hi Adrian,

          It works after applying patches. Thanks for input. I need clarification regarding below

var storeData = { identifier: 'name',
  items: [
    { name: 'Adobo', aisle: 'Mexican', price: 3.01 },
    { name: 'Balsamic vinegar', aisle: 'Condiments', price: 4.01 }]

if i want to search  from above store as name=Adobo (OR) aisle="Condiments", how to form the query,

Below query to match both condition instead of that i want to search based on above condition.

{"name":"Adobo","aisle":"Condiments"}

Could you please help me on this