This is a migrated thread and some comments may be shown as answers.

How can i prevent tabstrip footer blinking when load a remote view?

4 Answers 58 Views
TabStrip (Mobile)
This is a migrated thread and some comments may be shown as answers.
Orlando
Top achievements
Rank 1
Orlando asked on 21 Feb 2014, 01:48 AM
hi,

Please advise....How can i prevent tabstrip footer blinking when i load a remote view? any trick?

This is my remote view:
<div data-role="view" id="order_list_mobile" data-layout="mobile-tabstrip" data-title="<?php echo $this->language->get('text_sale');?>"  data-reload="true" data-show="afterShow">
    <header data-role="header">
        <div data-role="navbar">
            <a data-role="backbutton" data-align="left">Back</a>
            <span data-role="view-title"><?php echo $this->language->get('text_sale');?></span>
        </div>
    </header>
    <ul data-role="listview" data-style="inset" data-type="group" class="inboxList">
        <li>
            <?php echo $this->language->get('text_sale');?>
            <ul>
                <?php if ($orders) { ?>
                        <?php $id = 0;?>
                        <?php foreach ($orders as $order) { ?>
                            <li>
                                <h3 class="time"><?php echo $order['customer']; ?></h3>
                                <h3><?php echo $order['date_added']; ?></h3>
                                <h3><?php echo $order['total']; ?></h3>
                                <p><?php echo $order['date_added']; ?></p>
                                 
                                <?php foreach ($order['action'] as $action) { ?>
                                    <a data-role="button" href="<?php echo $action['href'];?>">
                                        <?php echo $action['text']; ?>                       
                                    </a>
                                <?php } ?>
                                 
                            </li>
                        <?php } ?>
                     
                <?php } ?>
            </ul>
        </li>
    </ul>
</div>
 
<script>
    function afterShow(e) {
        var tabstrip = e.view.footer.find(".km-tabstrip").data("kendoMobileTabStrip");
            tabstrip.switchTo(2);
    }
</script>


And this is my footer that  initialized just one time:
<div data-role="layout" data-id="mobile-tabstrip">
    <header data-role="header">
        <div data-role="navbar">
            <a data-align="left" data-role="backbutton" class="nav-button"><?php echo $this->language->get('button_back');?></a>
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index" data-icon="refresh"></a>
        </div>
    </header>
    <div data-role="footer">
        <div data-role="tabstrip" id="myTabStrip">
            <a href="#tabstrip-home" data-icon="recents"><?php echo $this->language->get('tab_general');?></a>
            <a href="#index.php?route=catalog/product&token=<?php echo $this->session->data['token'];?>" data-icon="cart"><?php echo $this->language->get('text_catalog');?></a>
            <a href="#index.php?route=sale/order&token=<?php echo $this->session->data['token'];?>" data-icon="bookmarks"><?php echo $this->language->get('text_sale');?></a>           
            <a href="#tabstrip-settings" data-icon="settings"><?php echo $this->language->get('text_setting');?></a>
        </div>
    </div>
</div>



Please see the video with my problem:

http://www.youtube.com/watch?v=OI8pkYXC6rk

4 Answers, 1 is accepted

Sort by
0
Orlando
Top achievements
Rank 1
answered on 21 Feb 2014, 01:52 AM
0
Kiril Nikolov
Telerik team
answered on 24 Feb 2014, 04:43 PM
Hi Orlando,

Thank you very much for bringing this to our attention.

I have managed to reproduce the issue that you are describing. But in order to provide you with a fix, we will need some more time to investigate in more details. As soon as we have more information, we will get back to you.

Thank you very much for your patience and understanding.

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Orlando
Top achievements
Rank 1
answered on 26 Feb 2014, 12:49 PM
Hi again:

I can confirm that is a Chrome Browser problem. Tested on device and works fine!
0
Petyo
Telerik team
answered on 26 Feb 2014, 03:07 PM
Hi Orlando,

thank you very much for sharing your finding. Indeed, such behavior may be browser specific. In case you face some other problems of such kind, do not hesitate to re-open this thread. 

Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TabStrip (Mobile)
Asked by
Orlando
Top achievements
Rank 1
Answers by
Orlando
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Petyo
Telerik team
Share this question
or