document.ready() is called twice

3 posts, 0 answers
  1. Sebastian
    Sebastian avatar
    2 posts
    Member since:
    Jul 2012

    Posted 19 Jul 2012 Link to this post

    hi there,


    i am evaluating the use of kendo mobile in my company and come across an issue i cannot resolve on my own. i use the latest minified version of the library from yesterday.

    i have a view with a form that is bound to a viewmodel. on button click a function in the viewmodel is called which calls app.navigate to get to a listview with search results that are loaded as json array from a server based on the options entered in the form. 

    the single parts work for me so far. i can pull the server response, parse the json and can edit the viewmodel with the form. when the user clicks the button to send the search, the listview will be initialized (via data-init) and the datasource will be updated with the correct search options from the viewmodel. 

    but then the initializer is called a second time and only got the initial values from the viewmodel. i nailed it down to document.ready was called a second time and therefore the application state was lost. but i cannot figure out what is causing this.

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
        <link href="inwx.css" rel="stylesheet" type="text/css" />
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="js/kendo.mobile.min.js" type="text/javascript"></script>
     
    </head>
    <body>
         
         
         
        <div id="menu" data-role="view" data-title="Start">
        <div class="head"> </div>
        <ul data-role="listview" data-style="inset" data-type="group" id="listview-menu">
            <li>I want to:
                <ul>
                    <li data-icon="play"><a href="#searchform">search domains</a></li>
                </ul>
            </li>
        </ul>
    </div>
     
        <div data-role="view" data-title="Destinations" id="domainlist" data-init="initListView">
        <ul data-role="listview" data-style="inset" data-type="group" id="listview-domains">
        </ul>
    </div>
     
    <div id="searchform" data-role="view" data-title="Domain Search" data-init="initForm">
        <form>
            <ul data-role="listview" data-style="inset">
                <li>
                    <select id="region-value" data-bind="source: regions, value: region"></select>
                    search region
                </li>
                <li>
                    <input id="domain-value" type="text" data-bind="value: domain" />
                    domain
                </li>
            </ul>
     
            <button data-bind="click: startSearch">search</button>
        </form>
    </div>
     
    <script type="text/x-kendo-template" id="domainlistItemTemplate">
        <li data-icon=
        # if (status == 'used') { #
             "globe"
        #} else {#
            "toprated"
        #}#>
            #: domain #    
        </li>
    </script>
     
    <script>
        var template = kendo.template($("#domainlistItemTemplate").html());
    </script>
     
    <script src="domainlist.js" type="text/javascript"></script>
     
    </body>
    </html>

    var initForm;
    var initListView;
     
    $(document).ready(function(){
     
    alert("ready");
     
    var app = new kendo.mobile.Application(document.body);
     
    var domainsearchModel = new kendo.data.ObservableObject({
        domain: "sebastian",
        region: "EUROPE",
        regions: ["EUROPE", "ASIA", "AMERICAS", "AFRICA", "ALL"],
        startSearch: function() {
            app.navigate("#domainlist");
        }
    });
     
    var domainlistSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "https://sandbox.inwx.de/en/domain/checkajax",
                type: "POST",
                dataType: "json",
                data: {
                    d: function() {
                        return domainsearchModel.get("domain");
                    },
                    r: function() {
                        return domainsearchModel.get("region")
                    }
                }
            }
        },
        schema: {
            data: function(data) {
                return data.items;
            },
            type: "json"
        },
        group: {
            field: "country"
        },
        filter: [{
            field: "status",
            operator: "neq",
            value: "error"
        }, {
            field: "status",
            operator: "neq",
            value: "timeout"
        }, {
            field: "status",
            operator: "neq",
            value: "yours"
        }, {
            field: "status",
            operator: "neq",
            value: "unsupported"
        }],
        pagesize: 20
    });
     
        $("#listview-domains").kendoMobileListView({
            style: "inset",
            template: "#: domain #",
    //      template: template,
            dataSource: domainlistSource
        });
     
    initForm = function () {
        var body = $(".km-vertical,.km-horizontal");
     
        kendo.bind($("#searchform"), domainsearchModel);
    };
     
    initListView = function () {
         
     
    };
     
    });

  2. Matt
    Matt avatar
    6 posts
    Member since:
    Jul 2012

    Posted 23 Jul 2012 Link to this post

    This is very crude, but it fixed this exact same issue I was having.

    Before the closing </head> tag in your HTML file, add this:

    <script>
        var _DONE = false;
    </script>

    And then...

    $(document).ready( function(e) {
                 
        if ( _DONE === true )
        {
            return;
        }
                     
        _DONE = true;
                     
        window.kendoMobileApplication.......

    There's probably a neater way of doing this, but after a long night, I was just happy to get my app working.

    Note, the "var _DONE = true" must go in the document <head> - it's the one part that subsequent Kendo UI navigation calls that isn't reset or updated heavily.
  3. Sebastian
    Sebastian avatar
    2 posts
    Member since:
    Jul 2012

    Posted 23 Jul 2012 Link to this post

    wow thank you this is really a complex issue! i am very thankful for your help, but in the end i decided that we cannot use kendo for the lack of support available. even if i really like the approach and the look and feel and think the price is no problem at all.

    i will try your solution to confirm if it works for me as well this evening.

    cheers,

    sebastian

Back to Top