1

I am trying to add a progress spinner to an onsen-list element displaying search results. Every time I add the progress elemet and compile it or the the list, the search input dissappears as I type - but only in the debugger app. Here is my code:

Page:

<ons-page id="search-page">

<ons-toolbar>
    <div class="center">Search</div>
</ons-toolbar>

<div class="navigation-bar">
    <div class="navigation-bar__center">
        <input id="srch" type="search" class="search-input" autocomplete="off" autocorrect="off" autocapitalize="on" spellcheck="false">
        <button id="btn-clear-search"><ons-icon icon="ion-android-cancel" size="20px"></ons-icon></button>
    </div>
</div>

<ons-list id="lst-srch"></ons-list>

</ons-page>

Script:

var $lstSrch = $( "#lst-srch" );

if( $( '.srch-progress' ).length == 0 ) {
    var $srchProgress = $('<ons-list-item>' +
            '<ons-row>' +                       
                '<ons-col>' +
                    '<center class="srch-progress"><ons-icon icon="ion-load-c" spin="true"></ons-icon></center>' +
                '</ons-col>' +
            '</ons-row>' +
        '</ons-list-item>');

    $lstSrch.prepend( $srchProgress );
    ons.compile( $( "#lst-srch" )[0] );
}

Is there a better way to show progress for a search?

MoreScratch
  • 2,933
  • 6
  • 34
  • 65

1 Answers1

1

an easier way would be to just include it in the html (you do not need compile for it) and then and hide it later on with jquery.

Something like this:

 <ons-page id="search-page">

    <ons-toolbar>
        <div class="center">Search</div>
    </ons-toolbar>

    <div class="navigation-bar">
        <div class="navigation-bar__center">
            <input id="srch" type="search" class="search-input" autocomplete="off" autocorrect="off" autocapitalize="on" spellcheck="false">
            <button id="btn-clear-search"><ons-icon icon="ion-android-cancel" size="20px"></ons-icon></button>
        </div>
    </div>

    <ons-list id="lst-srch">
        <ons-list-item id="mySpinner">
            <ons-row>                       
                <ons-col>
                    <center class="srch-progress"><ons-icon icon="ion-load-c" spin="true"></ons-icon></center>
                </ons-col>
            </ons-row>
       </ons-list-item>

    </ons-list>
</ons-page>

And in the JQuery simply do:

$('#mySpinner').hide();
Patrick Klitzke
  • 1,519
  • 2
  • 14
  • 24
  • So I implemented your solution but the result is still the same in that the input disappears while typing quickly. If I set spin to false everything works as expected. – MoreScratch Feb 15 '16 at 22:56
  • 1
    do you mean the input box or do you mean the content. I think this will depend on your javascript code that you do, it may be that you are reloading some data and then while it is loading you should of course do $('#mySpinner').show(); – Patrick Klitzke Feb 16 '16 at 02:06
  • 1
    another solution would be to let the user press the "search" button first and then do the logic. – Patrick Klitzke Feb 16 '16 at 02:07
  • 1
    Sorry, I don't think I am explaining the problem. I have the spinner working perfectly. The problem is if it is spinning and the user is typing into the search input, the search input is disappearing on successive keyup events - almost like it not getting refreshed or something. If I set spin to false this doesn't happen. – MoreScratch Feb 16 '16 at 13:29