onBlur

3 posts, 0 answers
  1. Brian
    Brian avatar
    8 posts
    Member since:
    Dec 2012

    Posted 27 Dec 2012 Link to this post

    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.
  2. Deyan Varchev
    Admin
    Deyan Varchev avatar
    150 posts

    Posted 02 Jan 2013 Link to this post

    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>
     
            <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
        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.
  3. Brian
    Brian avatar
    8 posts
    Member since:
    Dec 2012

    Posted 02 Jan 2013 Link to this post

    I put the onBlur in the HTML.  Since it was not working, I changed my UI to another control that did work.
Back to Top