Develop Reference

How to use CSS and JS resources in a routed page in Odoo?

I’m using Odoo controller to create a web page and make it public to customer so he doesn’t need to login.
In this page I’m trying to use CSS and JS libraries which exists in files inside the module (static folder).
The problem is that the page can’t reach these resources because it searches for them in the domain of the URL not in the filesystem (ex. http://localhost:8069/mywebpage)
I tried to inherit the template and the qweb design and inject the files but I got the same problem.
<template inherit_id="..."> <xpath expr="." position="inside"> <link rel="stylesheet" href="...">
The only solution I have found is copy/paste the source code of the JS libraries and CSS inside the template which is not a practical solution.
How can I make the routed page access the CSS and JS resources inside Odoo module?

Just put the module path of your assets resources, like:
<link rel="stylesheet" href="/your_custom_module/static/src/css/file.css">
And be sure the file will be there, the same for js script definition.
Also you should include in your posts the exact info and value that you are using, not .... It doesn't help you into get a response using ..., it just makes things difficult.

cordova window.location.href behaviour error

In my assets/www/index.html, I am trying to open html in the
/data/data/files/xyz/index.html with this javascript command:
window.location.href = cordova.file.dataDirectory + "xyz/index.html";
In the ../xyz/index.html it also included the cordova.js which exists on the same xyz directory:
<script type="text/javascript" src="cordova.js"></script>
The index.html can be loaded, but in the catlog show error like below
W/CordovaWebViewImpl﹕ Blocked (possibly sub-frame) navigation to
non-allowed URL: gap://ready
is there something wrong with my method? Is it wrong to use window.location.href to open another cordova application in the data folder ?
EDIT : I already found the root cause, that is my cordova.js in the /data/data/files/xyz/cordova.js is having different version with the one in asset folder. after i copied the same cordova js version, it can be loaded without error warning. Thanks.

You don't need to use "cordova.file.datadirectory". That's only if you use the file plugin for accessing data files, such as saving high-scores in a game or level data. You do not use the plugin for loading/unloading pages into the current webview.
You would want all of your HTML files to be in the same folder branch as your "index.html". Assume a directory structure like this:
/ index.html <!---- this is your current index.html
/ page2.html
/ js / index.js
/ xyz /index.html
All you would have to do is window.location='xyz/index.html'. However, I strongly encourage you to not replace entire pages if you're developing for iOS. It's almost a guarenteed way to get your app rejected. Try loading your pages in via AJAX using a framework like "Framework7".
NOTE: You can only view files within the webview, that are in the same folder or are children of, as your initial index.html.
EDIT: You want to load another Cordova webview application. I'd suggest still making it a child of the initial "index.html" folder. However, you might be able to write a plugin or customize the platform itself to access the other files. However, that's out of the scope of this question!

Django cannot find the djangular/app.js file via the urls.py config. How to troubleshoot?

I've spent a few days trying to figure this out and it's driving me up the wall. I'm limited on what I can copy and paste, so forgive the 'code brevity'. I also have a working version I developed and have uploaded it to GitHub.
I'm developing a Django website that also uses AngularJS, so I'm using the djangular package, specifically the bit that lets me import Django variables into Angular. This is the section from GitHub:
To use the AngularJS module that Djangular provides you, you'll need to add the djangular app to your projects URLs.
urlpatterns = patterns('',
...
url(r'^djangular/', include('djangular.urls')),
...
)
And I've placed this in my project/urls.py file. I've done the same with my GitHub repository.
When I reference that URL in my appName/app/index.html, I do so like this:
<script src="{% static 'djangular/app.js' %}"></script>
But that leads to a 500 response from the server as Angular produces the Module 'djangular' is not available! error. What should be happening is that the URL djangular/app.js in the script tag above, should redirect to urls.py inside the Djangular folder in the Python site-packages, which then points to DjangularModuleTemplateView.as_view(). This seems to work in my GitHub version, but not in the local version I have for some reason.
If I have my script tag without the "{%static '...'%}" part I still get a 500, with the same error:
<script src="/djangular/app.js"></script>
What config could I possibly have overlooked that's causing the app not to find the right Djangular config? I've stared at both configurations so long my eyes are glazing over, and I'm struggling to find any differences. What else could it be?
I'm more than happy to provide more details if needed to answer this question.

I managed to solve this myself by running ./manage syncdb
This creates various tables (the user table, and the session table at least) which are required for Djangular to run.
Then I double checked all my <script> imports/includes.

using build.phonegap.com - how to reference cordova.js on pages other than index.html?

I have a multi-page news app built on Adobe CQ5 and using build.phonegap.com to compile. I can;t figure out how to reference cordova.js from all the HTML pages.
It's easy enough to use <script src="cordova.js"></script> on index.html, but the app is structured such that each article is its own HTML file on different directories. I can't hardcode the JS reference since I need it to be <script src="../cordova.js"></script> on one file and <script src="../../cordova.js"></script> on another and so on, depending on the directory of the HTML. Not to mention the path to assets and cordova.js is also different per device.
in a nutshell the structure is roughly like this:
/www/index.html <-- referencing cordova.js through <script src="cordova.js"></script>
/www/cordova.js
/www/content/breaking-news.html <-- this page needs to reference cordova.js too
/www/content/breaking-news/breaking-news-title.html <-- this page needs to reference cordova.js too
...
etc
How should I handle this? Is single page app the only solution? I am not concerned about performance since I've set up a contentsync system which will fetch zipped delta updates over the air and apply it to the app.

Relative path, like ../cordova.js or cordova.js depends on the current location of the referencing resource, like index.html or breaking-news.html. You should rather use an absolute path: /cordova.js. It'll always reference the script from the site root, regardless the current web page path.

Load an Ember.js app from another website

I'm working on a project where I'd like to load an Ember.js application from another website, hosted on a different server and using a different domain name. In other terms, I'd like to include an Ember app in other website like I would do with an iFrame, but without an iFrame.
I built my Ember.js application using Yeoman and the Ember generator.
In the origin website, I just have a simple markup like this:
<body>
<h1>My website</h1>
<p>Lorem ipsum...</p>
<div id="myEmberApp"></div>
<p>Lorem ipsum...</p>
</body>
I know how to call an external JS file, but don't know from here how to execute or to load my Ember.js app. I tried also with CORS, but I don't think it will suit my needs.
For the records, I can't use an iFrame. On the origin website, I don't want to have any dependencies against jQuery or whatever. In the future, I'd like to be able to offer a step by step how-to to integrate this app on any websites.
Is there any solution? Or should I have to plan to do my app in full JS without Ember.js?
Let me know if you need more information.
Thanks in advance
--- Edit ---
Here's how I call my JS file from the origin website:
<!-- The JS script to be included by the client -->
<script>
(function () {
var eh = document.createElement('script');
eh.type = 'text/javascript';
eh.async = true;
eh.src = '//localhost:9000/scripts/edenhome.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(eh, s)
})();
</script>
I hope this helps.

Perhaps I am missing something, but why not just include your application in a script tag? I'm not familiar with the yeoman generator, but most of these build tools kick out an ember application with templates precompiled into JavaScript functions and then all your files concatenated together in a single file.
For example:
// this would be the precompiler output generated by yeoman, not exactly like
// this, but same idea, the template is part of the JS file
Ember.TEMPLATES['application'] = Ember.Handlebars.compile('<h1>I am an ember app</h1>');
// make an app and set the rootElement
var App = Ember.Application.create({
rootElement: '#myEmberApp'
});
You can see here I'm loading in the ember app from a different domain:
http://emberjs.jsbin.com/mawuv/1/edit
edit follow up
Injecting the script works just as well as a script with a src attribute:
http://emberjs.jsbin.com/mawuv/2/

I would suggest the following,
disclaimer: i have not actually tried what you are asking, but i do usually load everything from separate files but within the context of the same domain.
create a function that loads all templates and appends them to the document.
create a function that runs the complete ember.js app.
create the file that will be referenced by the remote site and will search for a specific element (this could also be parametrized / be a jquery plugin etc) and once found loads all templates calling function from (1) and start the application calling function from (2) with rootElement the specific element mentioned earlier. (Prior to any of the previous loadings, all dependencies of the ember.js app should be loaded e.g. jquery, handlebars.js, ember.js etc. probably in a no conflict state)
All ajax requests to the server from the ember app should be carried out using jsonp.
simplified example,
http://emberjs.jsbin.com/nelosese/1/edit
js
/*it is possible to load templates from independent files, using promises, however here it is just demonstrated the loading of templates*/
/*a callback is added since they are loaded async and only when this is done should the app complete initialization */
function initTemplates(callback){
var templates ='<script type="text/x-handlebars"><h2> Welcome to Ember.js</h2>{{outlet}}</script><script type="text/x-handlebars" data-template-name="index"><ul>{{#each item in model}}<li>{{item}}</li>{{/each}}</ul></script>';
$('body').append(templates);
callback();
}
function initApp(){
App = Ember.Application.create({
rootElement: '#myEmberApp'
});
App.Router.map(function() {});
App.IndexRoute = Ember.Route.extend({model: function() {
return ['red', 'yellow', 'blue'];
}
});
}
/*a reference to your bootstrap script, that executes the following*/
$(document).ready(function(){
if($('#myEmberApp').length>0){
$.get("/",function(){initTemplates(function(){
initApp();
});});
}
});
html
<body>
<div id="myEmberApp"></div>
</body>