This question is locked. New answers and comments are not allowed.
I have a basic select that I am trying to capture the onBlur event on. In Mist, it works, on the iPhone 4S it works, on Graphite, however, it works the first time and crashes the entire Graphite instace the second time in the same app run.
Correction: The onBlur event is firing. More accurate description is, if I edit the select options from another view, it doesn't update the options when I go back to the view the select exists on. When I then try to capture to onBlur again, it fails.
Correction: The onBlur event is firing. More accurate description is, if I edit the select options from another view, it doesn't update the options when I go back to the view the select exists on. When I then try to capture to onBlur again, it fails.
2 Answers, 1 is accepted
0
Hi Brian,
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.
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
>
<
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
>
<
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
>
</
div
>
</
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.
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.
0
Brian
Top achievements
Rank 1
answered on 02 Jan 2013, 03:59 PM
I put the onBlur in the HTML. Since it was not working, I changed my UI to another control that did work.