Error in app.js

12 posts, 0 answers
  1. Maksim
    Maksim avatar
    3 posts
    Member since:
    Jan 2015

    Posted 20 Jan 2015 Link to this post

    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);
    }
  2. Anton Dobrev
    Admin
    Anton Dobrev avatar
    539 posts

    Posted 21 Jan 2015 Link to this post

    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
     

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

     
  3. Maksim
    Maksim avatar
    3 posts
    Member since:
    Jan 2015

    Posted 21 Jan 2015 in reply to Anton Dobrev Link to this post

    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!
  4. Anton Dobrev
    Admin
    Anton Dobrev avatar
    539 posts

    Posted 21 Jan 2015 Link to this post

    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
     

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

     
  5. Maksim
    Maksim avatar
    3 posts
    Member since:
    Jan 2015

    Posted 21 Jan 2015 in reply to Anton Dobrev Link to this post

    Yes Anton, everything works! Just had to correct this error in the lesson )))
    Thank you!
  6. Aiham
    Aiham avatar
    2 posts
    Member since:
    Feb 2015

    Posted 24 Feb 2015 Link to this post

    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? =)

  7. Aiham
    Aiham avatar
    2 posts
    Member since:
    Feb 2015

    Posted 25 Feb 2015 Link to this post

    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">.
  8. Anton Dobrev
    Admin
    Anton Dobrev avatar
    539 posts

    Posted 26 Feb 2015 Link to this post

    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
     

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

     
  9. Sander
    Sander avatar
    1 posts
    Member since:
    Jun 2013

    Posted 23 Apr 2015 in reply to Anton Dobrev Link to this post

    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

  10. Anton Dobrev
    Admin
    Anton Dobrev avatar
    539 posts

    Posted 24 Apr 2015 Link to this post

    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
     

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

     
  11. Leonardo
    Leonardo avatar
    1 posts
    Member since:
    Apr 2015

    Posted 28 Apr 2015 Link to this post

    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.

  12. Anton Dobrev
    Admin
    Anton Dobrev avatar
    539 posts

    Posted 30 Apr 2015 Link to this post

    @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
     

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

     
Back to Top