Action for active tab

8 posts, 0 answers
  1. curtiz
    curtiz avatar
    5 posts
    Member since:
    Jan 2013

    Posted 17 Jan 2013 Link to this post

    Hello. I'm new in mobile development and dont know js good. Can u help me pls:

    I have 4 tab-strips(4 views). I need to get json, when one of the tabs is activated. I already have json function but i dont understand how to  bind function to the selected tab,

    Now i just have:
    $("#button").click(function() {
    $.ajax({
    ...
    here getting json
    ...})})


    Thank you for answer.



  2. Kristian D. Dimitrov
    Admin
    Kristian D. Dimitrov avatar
    68 posts

    Posted 18 Jan 2013 Link to this post

    Hi,

     You can use the Kendo Mobile "data-show" attribute and some templates. Here is a small sample that illustrates using Kendo "data-show" and templating: 

    HTML:

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta charset="utf-8" />
            <script src="cordova.js"></script>
            <script src="kendo/js/jquery.min.js"></script>
            <script src="kendo/js/kendo.mobile.min.js"></script>
            <script src="scripts/hello-world.js"></script>
     
            <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
            <link href="styles/main.css" rel="stylesheet" />
        </head>
        <body>
              
            <script type="text/x-kendo-template" id="stackStatsTemplate" >
                <div>Answers per minute #= answers_per_minute#</div>
                <div>Questions per minute #= questions_per_minute#</div>
                <div>Total number of votes is #= total_votes#</div>
            </script>
             
            <div data-role="view" id="tabstrip-home" data-title="Hello World!">
                <h1>Welcome!</h1>
                <p>
                    Icenium™ enables you to build cross-platform device applications regardless of your
                    development platform by combining the convenience of a local development toolset with the
                    power and flexibility of the cloud.
                </p>
            </div>
     
            <div data-role="view" id="tabstrip-ajax" data-title="UI Interaction" data-show="showAjaxView">
                   <ul id="stackStats" data-role="listview" data-style="inset"></ul>
            </div>
     
            <div data-role="layout" data-id="mobile-tabstrip">
                <header data-role="header">
                    <div data-role="navbar">
                        <span data-role="view-title"></span>
                    </div>
                </header>
     
                <div data-role="footer">
                    <div data-role="tabstrip">
                        <a href="#tabstrip-home" data-icon="home">Home</a>
                        <a href="#tabstrip-ajax" data-icon="share">Ajax</a>
                    </div>
                </div>
            </div>
     
            <script>
                var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
            </script>
        </body>
    </html>

    JavaScript:
    // JavaScript Document
     
    // Wait for PhoneGap to load
    document.addEventListener("deviceready", onDeviceReady, false);
     
    // PhoneGap is ready
    function onDeviceReady() {
    }
    //=======================Ajax View=======================//
    function showAjaxView() {
        getAjax();
    }
     
    function getAjax(){
        $.ajax({
                type:"GET",
            }).done(function( data ) {
                   updateStackStatListView(data);
                });
    }
     
    function updateStackStatListView( data ) {
        $("#stackStats").kendoMobileListView({
            dataSource: kendo.data.DataSource.create({data: data.items}),
            template: $("#stackStatsTemplate").html()
        });
    }

    Regards,
    kdimitrov
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  3. curtiz
    curtiz avatar
    5 posts
    Member since:
    Jan 2013

    Posted 19 Jan 2013 Link to this post

    Very very big thx. It works. I should have read more about Kendo and Cordova.
  4. curtiz
    curtiz avatar
    5 posts
    Member since:
    Jan 2013

    Posted 19 Jan 2013 Link to this post

    One more trouble.

    ListView style with js don't working.

    Where i need to past listview:

     <div data-role="view" id="tabstrip-news" data-title="Новости" data-show="showNews">
      <ul id="listv" data-role="listview" data-style="inset" data-type="group">
       </ul> </div>

    Function to read and paste data:
    function showNews() {
       $.ajax({
    url: 'http://apps.liftsite.ru/rgsu/index.php?tag=timetab&idgroup=1',
    dataType: 'json',
    cache: false,
    type: 'GET',
    success: function(data) {
                    var txt = "";
                    
                   if (typeof data != "undefined") {
    txt += "";
    for (var i = 0; i < data.length; i++ ){
                                                       
                                 txt += "<li>" +data[i].wdname + "<ul><li data-icon=globe><a>"+ data[i].dtime +"<br />" 
                            + data[i].dfulln + "<br />" + data[i].clname + "</a></li></ul></li>" ;
    }
    }         
                            $('#listv').html(txt);
                                                   
                                         },
    error: function(data) {
    $('#simpleBlock p').html("Произошла ошибка при получении JSON!");
    }
    });
    }

    In result i have a simple list without style. What is wrong?
  5. Kristian D. Dimitrov
    Admin
    Kristian D. Dimitrov avatar
    68 posts

    Posted 21 Jan 2013 Link to this post

    Hi,

    Kendo Mobile evaluates the html, when it is first loaded, to apply its style and to perform the operations specified by the "data" attributes. To achieve what you want you need to use Kendo templates. You can read more about that here.

    Once you create your template and DataSource, you just init the list-view.

    When the ajax call is made and the new data is received and set to the DataSource, the list-view will automatically apply the change and template over new data.

    Here is the example code:

    HTML:

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta charset="utf-8" />
            <script src="cordova.js"></script>
            <script src="kendo/js/jquery.min.js"></script>
            <script src="kendo/js/kendo.mobile.min.js"></script>
            <script src="scripts/hello-world.js"></script>
     
            <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
            <link href="styles/main.css" rel="stylesheet" />
        </head>
        <body>
              
            <script type="text/x-kendo-template" id="stackStatsTemplate" >
                <div>Answers per minute #= answers_per_minute#</div>
                <div>Questions per minute #= questions_per_minute#</div>
                <div>Total number of votes is #= total_votes#</div>
            </script>
             
            <div data-role="view" id="tabstrip-home" data-title="Hello World!">
                <h1>Welcome!</h1>
                <p>
                    Icenium™ enables you to build cross-platform device applications regardless of your
                    development platform by combining the convenience of a local development toolset with the
                    power and flexibility of the cloud.
                </p>
            </div>
     
            <div data-role="view" id="tabstrip-ajax" data-title="UI Interaction" data-show="showAjaxView">
                   <ul id="stackStats" data-role="listview" data-style="inset"></ul>
            </div>
     
            <div data-role="layout" data-id="mobile-tabstrip">
                <header data-role="header">
                    <div data-role="navbar">
                        <span data-role="view-title"></span>
                    </div>
                </header>
     
                <div data-role="footer">
                    <div data-role="tabstrip">
                        <a href="#tabstrip-home" data-icon="home">Home</a>
                        <a href="#tabstrip-ajax" data-icon="share">Ajax</a>
                    </div>
                </div>
            </div>
     
            <script>
                var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
            </script>
        </body>
    </html>

    JavaScript:
    // Wait for PhoneGap to load
    document.addEventListener("deviceready", onDeviceReady, false);
     
    var stackDataSource = new kendo.data.DataSource();
    // PhoneGap is ready
    function onDeviceReady() {
         
        $("#stackStats").kendoMobileListView({
            dataSource: stackDataSource,
            template: $("#stackStatsTemplate").html()
        });
         
    }
     
    //=======================Ajax View=======================//
    function showAjaxView() {
        $.ajax({
                type: "GET",
        })
        .done(function( data ) {
                   stackDataSource.data(data.items);
        });
    }

    Greetings,
    kdimitrov
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  6. curtiz
    curtiz avatar
    5 posts
    Member since:
    Jan 2013

    Posted 21 Jan 2013 Link to this post

    Template is good thing. But did not help. The same result.

    ...
    <body>
            
          <script type="text/x-kendo-template" id="snTemplate" >
                <li>#= wdname#
                <ul><li>#= dtime#<br />
                        #= dfulln#<br />
                        #= clname#
                </li></ul>
                </li>
               
            </script>
     
            <div data-role="view" id="tabstrip-news" data-title="Новости" data-show="showNews">
                
                 <ul id="listv" data-role="listview" data-style="inset" data-type="group"></ul>
                
            </div>
    ...


    ...
    function onDeviceReady() {
         
        $("#listv").kendoMobileListView({
            dataSource: snDataSource,
            template: $("#snTemplate").html()
        });
         

    ...

     
  7. Kristian D. Dimitrov
    Admin
    Kristian D. Dimitrov avatar
    68 posts

    Posted 22 Jan 2013 Link to this post

    Hi,

    You can have a look at the demo here for a grouped listview. If thats not the case try setting the data-role of the inner-list in your template and remove the first "li" that wraps the whole thing like so:

    <script type="text/x-kendo-template" id="snTemplate" >
                #= wdname#
                <ul data-role="listview" data-style="inset"><li>#= dtime#<br />
                        #= dfulln#<br />
                        #= clname#
                </li></ul>
                
            </script>
    All the best,
    Kristian D. Dimitrov
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  8. emmapabale
    emmapabale avatar
    12 posts
    Member since:
    Jun 2013

    Posted 02 Jul 2013 Link to this post

    Hi. What if its another html page i want to show when the tab is clicked and not just a div?

    and I'm going to use it for the back button.

    I'd like my script to determine which tab is active.
Back to Top