Error in app.js

[Maksim]

Hello, in the lesson "Add photos to the gallery using your device's camera" in the fifth lesson in the script there is an error. After inserting this code, the application is not working and appears to be simply a white screen. Here is your code:

addImage: function() {
var success = function(data) {
$("#images")
.data("kendoMobileListView")
.prepend(["data:image/jpeg;base64," + data]);
};
var error = function() {
navigator.notification.alert("Unfortunately we could not add the image");
};
var config = {
destinationType: Camera.DestinationType.DATA_URL,
targetHeight: 400,
targetWidth: 400,
encodingType: Camera.EncodingType.PNG
};
navigator.camera.getPicture(success, error, config);
}

[Anton Dobrev]

Hello Maksim,

Thank you for posting to the Telerik Developer Forums.

The code provided in the tutorial should be working. Could you please check on your side if there are any errors provided in the Developer Console (F12) of the AppBuilder simulator? For example, this could by any JavaScript errors that prevent the UI from rendering.

Here is how the code should look like after adding the code snippet:

(function() {
    document.addEventListener("deviceready", function() {
        window.listview = kendo.observable({
            addImage: function() {
                var success = function(data) {
                    $("#images")
                        .data("kendoMobileListView")
                        .prepend(["data:image/jpeg;base64," + data]);
                };
                var error = function() {
                    navigator.notification.alert("Unfortunately we could not add the image");
                };
                var config = {
                    destinationType: Camera.DestinationType.DATA_URL,
                    targetHeight: 400,
                    targetWidth: 400,
                    encodingType: Camera.EncodingType.PNG
                };
                navigator.camera.getPicture(success, error, config);
            }
        });

        var app = new kendo.mobile.Application(document.body, {
            skin: "flat"
        });
        $("#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();
    }());

});

Also, you can switch between steps from the drop-down list in the tutorial pane and double-check them.

For your convenience, here is the template in the initial state and the completed app. You can clone the repositories by creating a new AppBuilder Hybrid Project and choose Clone. After that enter the address of the repository.

I hope that this helps. Let me know if you have further questions.

Regards,
Anton Dobrev
Telerik

 

 

[Maksim]

Hello. Thank you for the prompt response. In the code which is written in the lesson and in truth there is an error! Missing "});" after line of code "navigator.camera.getPicture(success, error, config); }".
Also thanks for the code you gave me, but it does not work! I have copied it to app.js file his lesson and ran the simulator for Android Phone. The screen is still white. If you don't believe me, check for yourself!

[Anton Dobrev]

Hello Maksim,

Thanks for reporting this.

Here is the correct one (I misplaced the brackets for the function invocation) in my previous reply.

The JavaScript:

(function() {
    document.addEventListener("deviceready", function() {

        window.listview = kendo.observable({
            addImage: function() {
                var success = function(data) {
                    $("#images")
                        .data("kendoMobileListView")
                        .prepend(["data:image/jpeg;base64," + data]);
                };
                var error = function() {
                    navigator.notification.alert("Unfortunately we could not add the image");
                };
                var config = {
                    destinationType: Camera.DestinationType.DATA_URL,
                    targetHeight: 400,
                    targetWidth: 400,
                    encodingType: Camera.EncodingType.PNG
                };
                navigator.camera.getPicture(success, error, config);
            }
        });

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

        $("#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();
    });
}());

The 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="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="Photos" data-model="listview">
            <div data-role="navbar">
                <span data-role="view-title"></span>
                <button data-role="button" data-align="right" data-bind="click: addImage">Add</button>
            </div>
            <ul id="images"></ul>
        </div>

    </body>
</html>

Let me know if this works.

Regards,
Anton Dobrev
Telerik

 

 

[Maksim]

Yes Anton, everything works! Just had to correct this error in the lesson )))
Thank you!

[Aiham]

It sounds like you fixed the problem! Tho I'm trying right now to use the code to take a picture or " add image" it doesn't work. I even tried to copy your entire code but still it didn't work.

What am i doing wrong? =)

[Aiham]

I managed to fix the problem. I think i closed my browser by mistake and i forgot to save one of the lines "<div data-model="listviews">.

[Anton Dobrev]

Hi,

@Aiham
Thanks for posting your question and the solution that worked.

Indeed, the View declaration should include the ViewModel name (data-model="listview") that controls the view. In the tutorial this ViewModel is specified as window.listview in app.js.

Let me know if further questions arise.

Regards,
Anton Dobrev
Telerik

 

 

[Sander]

Hello Anton 

 I was trying it today and found out the code in the tutorial still isn't changed to how it should be just to remember to you

 Gr. Sander

[Anton Dobrev]

Hi Sander,

Thanks for your input. I went through the tutorial and seems that the binding of the view to the window.listview object is explained in Step 4 - action d. And I quote:

Bind the view to the listview object by adding a data-model="listview" attribute to the <div data-role="view"> element (<div data-role="view" data-model="listview">).

Could you please specify if this is the instruction in question? Or the error is in the snippet provided? I went again through the steps and completed them as expected. However, perhaps I am very used to the tutorial. That is why we would appreciate your fresh angle on it.

I look forward to your reply.

Regards,
Anton Dobrev
Telerik

 

 

[Leonardo]

Hi Anton!

the code seems to be OK, however when I take a test picture the app does not show it.

I am using Andorid 4.4.4

regards,

Leonardo.

[Anton Dobrev]

@Leonardo

Could you please post the code (JS and HTML) you are having at the current stage? The tutorial is supposed to capture the image and show it in the list view. For your convenience, here is the completed app if you need to check your code against it.

Regards,
Anton Dobrev
Telerik