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

onBlur

2 Answers 57 Views

AppBuilder Windows client

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

This question is locked. New answers and comments are not allowed.

2 Answers, 1 is accepted

answered on 02 Jan 2013, 01:43 PM

Hi Brian,

Thanks for reporting this issue. I tried to reproduce the problem you are describing but in vain. Here is what I did.
I created a new project using the Kendo template. Then I modified the index.html and the hello-world.js files as follows:
Index.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="http://maps.google.com/maps/api/js?sensor=true"></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>

<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>

<a id="submitButton" data-role="button" data-click="changeSelect">Change</a>

</div>

<div data-role="view" id="tabstrip-uiinteraction" data-title="UI Interaction">

<h1>Say Hello!</h1>

<div id='helloWorldInput'>

<label for="txtName" style="display: inline-block;">Enter your name:</label>

<input type="text" id="txtName" value="" />

</div>

<div id='helloWorldText' style="display:block;"></div>

<div class="buttonArea">

<a id="resetButton" data-role="button" data-click="sayHelloReset" data-icon="refresh">Reset</a>

<a id="submitButton" data-role="button" data-click="sayHello" data-icon="compose">Submit</a>

</div>

<div id='eventLog' ></div>

<div class="buttonArea">

<select id="mySelect">

<option>Test 1</option>

<option>Test 2</option>

<option>Test 3</option>

<option>Test 4</option>

</select>

</div>

<div data-role="view" id="tabstrip-geolocation" data-title="Geolocation">

<h1>My Location</h1>

<div id="geoLocationContainer">

<div id="myLocation">Unable to get location information. Please check your network connection and try again.</div>

<a id="refreshMap" data-role="button" data-click="getLocation" data-icon="refresh">Refresh Location</a>

<div id="map_canvas"></div>

</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-uiinteraction" data-icon="share">UI Interaction</a>

<a href="#tabstrip-geolocation" data-icon="globe">Geolocation</a>

</div>

<script>

var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });

</script>

</body>

</html>

hello-world.js

// JavaScript Document

// Wait for PhoneGap to load

document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready

function onDeviceReady() {

getLocation();

$('#mySelect').blur(function (){

$("#eventLog").append('On blur<br/>');

});

}

function changeSelect() {

var new_options = {"1": 'Option 1', "2": 'Option 2', "3": 'Option 3'};

//alert(1);

/* Remove all options from the select list */

$('#mySelect').empty();

$("#eventLog").empty();

$.each(new_options, function(key, value) {

$('#mySelect')

.append($("<option></option>")

.attr("value",key)

.text(value));

});

}

function getLocation() {

navigator.geolocation.getCurrentPosition(onGeolocationSuccess, onGeolocationError);

}

//=======================Say Hello (Page 1) Operations=======================//

function sayHello() {

var sayHelloInputElem = document.getElementById('helloWorldInput');

var sayHelloTextElem = document.getElementById('helloWorldText');

var inputText = document.getElementById('txtName');

sayHelloTextElem.innerHTML = 'Hello, ' + inputText.value + '!';

sayHelloTextElem.style.display = 'block';

sayHelloInputElem.style.display = 'none';

}

function sayHelloReset() {

var sayHelloInputElem = document.getElementById('helloWorldInput');

var sayHelloTextElem = document.getElementById('helloWorldText');

var inputText = document.getElementById('txtName');

inputText.value = '';

sayHelloTextElem.style.display = 'none';

sayHelloInputElem.style.display = 'block';

}

//=======================Geolocation Operations=======================//

// onGeolocationSuccess Geolocation

function onGeolocationSuccess(position) {

// Use Google API to get the location data for the current coordinates

var geocoder = new google.maps.Geocoder();

var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

geocoder.geocode({ "latLng": latlng }, function (results, status) {

if (status == google.maps.GeocoderStatus.OK) {

if ((results.length > 1) && results[1]) {

$("#myLocation").html(results[1].formatted_address);

}

});

// Use Google API to get a map of the current location

// http://maps.googleapis.com/maps/api/staticmap?size=280x300&maptype=hybrid&zoom=16&markers=size:mid%7Ccolor:red%7C42.375022,-71.273729&sensor=true

var googleApis_map_Url =

'http://maps.googleapis.com/maps/api/staticmap?size=300x300&maptype=hybrid&zoom=16&sensor=true&markers=size:mid%7Ccolor:red%7C'

+ latlng;

var mapImg = '<img src="' + googleApis_map_Url + '" />';

$("#map_canvas").html(mapImg);

}

// onGeolocationError Callback receives a PositionError object

function onGeolocationError(error) {

$("#myLocation").html("<span class='err'>" + error.message + "</span>");

}

Basically, it logs a message on every blur event for the select in the second view. There is a new button in the first view that changes option elements of the select.
This sample works as expected and does not crash Graphite's simulator. Can you have a look and see what's different in your case? If you could create, export and send us a sample project demonstrating the problem would be of great help. This will enable us to track it down and fix it in some future release.

Thank you in advance for the collaboration.

Regards,
Deyan Varchev
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

onBlur

2 Answers, 1 is accepted