search

rhomobile / rhoelements-issues

Issues area for RhoElements
0 stars 0 forks source link

B47 - rhoapi-modules.js - syntax error #17

Closed heyheysay closed 11 years ago

heyheysay commented 11 years ago

getting the below error when doing a barcoce.enumerate from an android devices. rhoapi-modules.js I'm using is attached.

Uncaught SyntaxError: Unexpected token o rhoapi-modules.js:4 a.apiCall rhoapi-modules.js:4 (anonymous function) rhoapi-modules.js:4 x.extend.Deferred rhoapi-modules.js:4 D rhoapi-modules.js:4 (anonymous function) rhoapi-modules.js:4 (anonymous function) rhoapi-modules.js:4 startScanner fd.html:81 onclick fd.html:212

pfmaggi commented 11 years ago

two thinks:

  1. add the Barcode capability in your build.yml
  2. You have to include the "rhoapi-modules.js" in your Layout.erb, before JQM, this is what I''ve:
        <script src="/public/api/rhoapi-modules.js" type="text/javascript"s></script>
        <script src="/public/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>

        <link rel="stylesheet" href="/public/jqmobile/jquery.mobile-1.3.1.min.css">
        <link rel="stylesheet" href="/public/css/jqmobile-patch.css">
        <script type="text/javascript" charset="utf-8" src="/public/jqmobile/jquery.mobile-1.3.1.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="/public/js/jqmobile-patch.js"></script>
heyheysay commented 11 years ago

I have done both of these with no luck. I put my code in the public dir and it still doesn't work must be doing something wrong. what OS and device have you tested this with? Im using a MC40.

pfmaggi commented 11 years ago

I tested on the ES400, MC40 and a nexus 7. On ES400 and MC40 it works, on the nexus 7 you get the scanning interface, but no image (is probably expecting to use the non-existant rear-camera).

This is my full Layour.erb

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Barcode</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
        <script src="/public/api/rhoapi-modules.js" type="text/javascript"s></script>
        <script src="/public/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>

        <link rel="stylesheet" href="/public/jqmobile/jquery.mobile-1.3.1.min.css">
        <link rel="stylesheet" href="/public/css/jqmobile-patch.css">

        <script type="text/javascript">
            $(document).bind("mobileinit", function(){
                // jQuery-Mobile init options initialization goes here. For example, you may
                // enable automatically generated 'Back' buttons on headers this way:
                //$.mobile.page.prototype.options.addBackBtn = true;

                // You can disable (with false value) or change page loading message
                $.mobile.loadingMessage = false;
                //$.mobile.loadingMessage = "loading"; // it is default value

                // For documented init options look here:
                // http://jquerymobile.com/demos/1.3.1/docs/api/globalconfig.html

                // For poorly documented options search for ".prototype.options"
                // in the jQuery Mobile source code

                // Rhodes custom option!
                // how long to wait transition end before "loading.." message will be shown
                $.mobile.loadingMessageDelay = 300; // in ms

                // Uncomment these options in case of performance problem in pages transition
                $.mobile.defaultPageTransition = 'none';
                $.mobile.defaultDialogTransition = 'none';
                //$.mobile.ajaxEnabled = false;
                //$.mobile.pushStateEnabled = false;
                //$.mobile.loadingMessageDelay = 50; // in ms
            });
        </script>
        <script type="text/javascript" charset="utf-8" src="/public/jqmobile/jquery.mobile-1.3.1.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="/public/js/jqmobile-patch.js"></script>

        <link href="/public/css/android.css" type="text/css" rel="stylesheet"/>

        </head>

<body data-platform="<%= System::get_property('platform') %>">
    <%= @content %>
</body>

</html>

And my scan.erb (that you can launch from your index.erb):

<div data-role="page" data-add-back-btn="false">
<script>
// Take Barcode callback, here we've the barcode and status params
// - barcode
// - status
function fnTBCallback(params) {
  if (params["status"]=="ok") {
    alert('Barcode scanning complete. Scanned barcode: '+params["barcode"]);
    //document.getElementById("scanData").value = params["barcode"];
  } else {
    alert('Barcode scanning aborted');
  }
  Rho.Barcode.stop();
}

// Take Barcode and start the scanning (single shot, no HW button)
function fnTakeBarcode() {
  //alert('fnTakeBarcode');
  Rho.Barcode.take({}, fnTBCallback);
  Rho.Barcode.start();
}

// Enable Barcode callback, here we've the full params:
// - data
// - source
// - type
// - time
// - lenght
// - direction
function fnEBCallback(params) {
  alert("Barcode" + params["data"]);
}

// Enable Barcode, HW button will start the scanning
function fnEnableBarcode() {
  //alert('fnEnableBarcode');
  Rho.Barcode.enable({}, fnEBCallback);
}

</script>
<div data-role="header" data-position="inline">
    <h1>Scan</h1>
    <a href="<%= Rho::RhoConfig.start_path %>" class="ui-btn-left" data-icon="arrow-l" data-direction="reverse">
      Home
    </a>
  </div>

  <div data-role="content">
    <H1>Scanning</H1>
  </div>
  <div data-role="footer" data-position="fixed">
    <a href="#" onclick="fnEnableBarcode();" data-icon="star">
      Enable
    </a>
    <a href="#" onclick="fnTakeBarcode();" data-icon="star">
      Take Barcode
    </a>
  </div>

</div>
heyheysay commented 11 years ago

The above worked for a native app. But still get the syntax error when trying to do the same code from a server page (I get the message from Chrome). Any ideas?

Also get the below message in logcat.

I/Web Console(20576): {"method":"getDefaultID","params":[],"rhoClass":"Rho.Barcode","rhoID":"0","jsonrpc":"2.0","id":1} at http://192.168.2.14:8444/i25wagscan/fd.html:3

E/Web Console(20576): Uncaught illegal access at http://192.168.2.14:8444/i25wagscan/fd.html:3

pfmaggi commented 11 years ago

Do you mean an Hybrid app, or using the Shared Runtime?

below you can find an HTML page that you can put in the /public folder redirecting the start_path to it. In the case of a server page, at this moment, you need to generate the right rhoapi-module.js API file and put it on your server page using that in your page. I think that it can works but I never tested it.

<html>
<head>
<script src="/public/api/rhoapi-modules.js"></script>
<script>
// Take Barcode callback, here we've the barcode and status params
// - barcode
// - status
function fnTBCallback(params) {
  if (params["status"]=="ok") {
    alert('Barcode scanning complete. Scanned barcode: '+params["barcode"]);
    document.getElementById("scanData").value = params["barcode"];
  } else {
    alert('Barcode scanning aborted');
  }
  Rho.Barcode.stop();
}

// Take Barcode and start the scanning (single shot, no HW button)
function fnTakeBarcode() {
  Rho.Barcode.take({}, fnTBCallback);
  Rho.Barcode.start();
}

// Enable Barcode callback, here we've the full params:
// - data
// - source
// - type
// - time
// - lenght
// - direction
function fnEBCallback(params) {
  document.getElementById("scanData").value = params["data"];
}

// Enable Barcode, HW button will start the scanning
function fnEnableBarcode() {
  Rho.Barcode.enable({}, fnEBCallback);
}

</script>
</head>
<body>
<h1>RhoElements v4.0 Barcode API</h1>

<form action="#">
<input type="text" id="scanData" value="100">
<input type="button" value="Take Barcode" onclick="fnTakeBarcode();">
<input type="button" value="Enable Barcode" onclick="fnEnableBarcode();">
<input type="button" value="Quit App" onclick="Rho.Application.quit();">
</form>
</body>
</html>
heyheysay commented 11 years ago

There is no shared run time for Android. Built a native app that calls server pages. Yes I copied the rhoapi-module.js to the server and included it in the code. This is how I get the error.

dipspb commented 11 years ago

Usually "Uncaught SyntaxError: Unexpected token o" means it isn't an error in the source code itself. It means at some moment has been performed an attempt to parse some string value as JSON but that value isn't a string, it is an object. It may happen when you trying to parse JSON in AJAX response, where result has been already parsed by XHR.

heyheysay commented 11 years ago

I would agree. It is the API call that is throwing the error. Really need someone else to test and validate that the JS API's can be called from an external (server) hosted page.

pfmaggi commented 11 years ago

I've the same issue when I'm in the hybrid scenario with html page and rhoapi-module.js is on a server. Barcode API does not works, not even a simple Rho.Application.quit();.

So this seems to be a real issue in beta 47.

heyheysay commented 11 years ago

With Rob Galvin's help we think we figured out the issue. The issue is the rhoapi-module.js file. The fix is to run the below command in the project dir. Then grab the rhoapi-module.js from the projects public/api dir and copy it to your server.

rake update_rho_modules_js[android]

cfh463 commented 11 years ago

Pietro this is because the JS file is built dynamically for each platform scenario. When you take it from the public/api folder in your project it is actually the API file that gets built for rhosimulator (which does not have any of teh hardware extensions in it). if you take it from the Shared Runtime, it is the version just for Windows Mobile clients.

In beta 47 there is a way to generate a JS file for each platform.

rake update_rho_modules_js[platform] platform may be: win32, wm, android, iphone, wp8

After running that you will see a new file in /public/api folder of your project. You will need to copy this one to your webserver and the APIs will work. If you simply just do app_type:rhoelements in your build.yml it will include all extensions in the JS file. Remember the JS file is platform specific as well. If you have multiple clients types then you will have to dvelop a mechnisim to reference the platform specific JS file

pfmaggi commented 11 years ago

Just tested on Windows Mobile and it worked perfectly:

  1. rake update_rho_modules_js[wm]
  2. copied file on server
  3. relaunched app on ES400
  4. Scanning :-)

I think that this can be closed