Photo Album Tutorial not working on IOS

4 posts, 1 answers
  1. Anton
    Anton avatar
    2 posts
    Member since:
    Jan 2017

    Posted 20 Feb Link to this post

    I am working through the Photo Album tutorial. All was working well on both the simulator and on an IOS device (iPhone 6) until I reached step 7 which saves and retrieves images from the cloud. It still works fine from the simulator but on the IOS device it shows a blank screen - any suggestions most welcome.

    Code follows:-

    index.html:-

    <!DOCTYPE html>
    <html>

    <head>
        <title></title>
        <meta charset="utf-8">
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet">
        <link href="styles/main.css" rel="stylesheet">
        <script src="https://bs-static.cdn.telerik.com/1.6.9/everlive.all.min.js"></script>
        <script src="cordova.js"></script>
        <script src="kendo/js/jquery.min.js"></script>
        <script src="kendo/js/kendo.mobile.min.js"></script>
        <script src="scripts/app.js"></script>
    </head>

    <body>
        <div data-role="view" data-title="My awesome Photos" data-model="listview">
            <header data-role="header">
                <div data-role="navbar"> <span data-role="view-title"></span> <button data-role="button" data-align="right" data-bind="click:addImage">Add</button>                </div>
            </header>
            <ul id="images"></ul>
        </div>
    </body>

    </html>

     

     

    apps.js :-

     

    (function () {
        var everlive = new Everlive("enpv14gfv06tp33h");
        document.addEventListener("deviceready", function () {
            window.listview = kendo.observable({
                addImage: function () {
                    var success = function (data) {
                        everlive.Files.create({
                            Filename: Math.random().toString(36).substring(2, 15) + ".jpg",
                            ContentType: "image/jpeg",
                            base64: data
                        }).then(loadPhotos,
                            function (err) {
                                alert("Could not upload image" + err.message);
                            });
                    };
                    var error = function () {
                        navigator.notification.alert("Unfortunately we could not add the image");
                    };
                    var config = {
                        destinationType: Camera.DestinationType.DATA_URL,
                        targetHeight: 400,
                        targetWidth: 400
                    };
                    navigator.camera.getPicture(success, error, config);
                }
            });


            function loadPhotos() {
                everlive.Files.get().then(function (data) {
                    var files = [];
                    for (var i = data.result.length - 1; i >= 0; i--) {
                        var image = data.result[i];
                        files.push(image.Uri);
                    }
                    $("#images").kendoMobileListView({
                        dataSource: files,
                        template: "<img src='#: data #'>"
                    });
                },
                    function (err) {
                        alert("Could not fetch images: " + err.message);

                    });
            }
            var app = new kendo.mobile.Application(document.body, { skin: "nova" });
            loadPhotos();


            $("#images").kendoMobileListView({
               dataSource: ["images/01.jpg", "images/02.jpg", "images/03.jpg", "images/04.jpg", "images/05.jpg", "images/06.jpg", "images/07.jpg"],
               template: "<img src='#: data #'>"
            });

            navigator.splashscreen.hide();
        });
    } ());

  2. Preslav
    Admin
    Preslav avatar
    229 posts

    Posted 20 Feb Link to this post

    Hi Anton,

    The code looks good to me. However, the Everlive JS file should be included after the Cordova, jQuery and Kendo JS files. This said, the head section should look something like this:
    <head>
        <title></title>
        <meta charset="utf-8">
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet">
        <link href="styles/main.css" rel="stylesheet">
        <script src="cordova.js"></script>
        <script src="kendo/js/jquery.min.js"></script>
        <script src="kendo/js/kendo.mobile.min.js"></script>
     
        <script src="scripts/app.js"></script>
    </head>

    Please, let me know if this is the case. I hope this helps.

    Regards,
    Preslav
    Telerik by Progress
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  3. Anton
    Anton avatar
    2 posts
    Member since:
    Jan 2017

    Posted 21 Feb in reply to Preslav Link to this post

    That worked for the photo app - thanks

    I've now moved on to the Groceries app and have a similar issue. On the simulator all works fine but on the IOS device the data wont display - All I see is the header the rest of the screen is blank except for a rotating "waiting" symbol.

    Code below.

     

    <!DOCTYPE html>
    <html>

    <head>
        <title></title>
        <meta charset="utf-8">
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet">
        <link href="styles/main.css" rel="stylesheet">
        <script src="cordova.js"></script>
        <script src="kendo/js/jquery.min.js"></script>
        <script src="kendo/js/kendo.mobile.min.js"></script>
        <script src="https://bs-static.cdn.telerik.com/1.6.9/everlive.all.min.js"></script>
        <script src="scripts/app.js"></script>
    </head>

    <body>
        <div data-role="view" id="list" data-title="Groceries">
            <div data-role="navbar"> <span data-role="view-title"></span> <a data-role="button" data-align="right" data-rel="modalview" href="#add">Add</a>            </div>
            <ul id="grocery-list"></ul>
        </div>
        <div data-role="modalview" id="add" style="width: 90%" data-model="addView">
            <div data-role="header">
            <div data-role="navbar"> <span>Add Grocery</span> </div>
        </div>
            <ul data-role="listview" data-style="inset">
                <li> 
                    <label>
                      Grocery:<input type="text" data-bind="value: grocery">
                    </label> 
                </li>
            </ul> 
            <button data-bind="click: add" class="add-button" data-role="button">Add</button> 
            <button data-bind="click: close" class="close-button" data-role="button">Close</button> 
        </div>
    </body>

    </html>

     

    (function () {
        var apiKey = "nvajfk090d6vv70f";
        var el = new Everlive(apiKey);

        var groceryDataSource = new kendo.data.DataSource({
            type: "everlive",
            sort: { field: "name", dir: "asc" },
            transport: {
                typeName: "Groceries"
            }
        });

        function initialize() {
            var app = new kendo.mobile.Application(document.body, {
                skin: "nova",
                transition: "slide"
            });

            $("#grocery-list").kendoMobileListView({
                dataSource: groceryDataSource,
                template: "#: Name #"
            });
            navigator.splashscreen.hide();
        }
        window.addView = kendo.observable({
            add: function () {
                if (!this.grocery) {
                    navigator.notification.alert("Please provide a grocery.");
                    return;
                }

                groceryDataSource.add({ Name: this.grocery });
                groceryDataSource.one("sync", this.close);
                groceryDataSource.sync();
                this.set("grocery", "");
            },
            close: function () {
                $("#add").data("kendoMobileModalView").close();
            }
        });


        document.addEventListener("deviceready", initialize);
    } ());

  4. Answer
    Preslav
    Admin
    Preslav avatar
    229 posts

    Posted 21 Feb Link to this post

    Hello Anton,

    The provided code does not work in the simulator nor on a device on my side. During my investigation, I noticed that during the loading of the data, I get an Error 403 (Forbidden). This makes me think that you have changed the Groceries permission from Public to Private and there is no user logged in once the view is loaded.

    This will be resolved once you create a login view in step 5/7.

    Additionally, I'd suggest checking the complete version of the tutorial. You could use it as a reference.

    Regards,
    Preslav
    Telerik by Progress
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top