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

document.ready() is called twice

2 Answers 674 Views

General Discussions

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

Sebastian asked on 19 Jul 2012, 10:47 AM

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 Answers, 1 is accepted

answered on 23 Jul 2012, 08:39 AM

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.