angularJS & web2py: calling python from ng/javascript/html

Question

I'm using AngularJS (mainly the client side) and web2py (mainly the server side)together in an app.

I have an issue now.

At a point of the program, I use AngularJS to get some data from the client and these data are store in an AngularJS variable. I planed to use $http.post to submit these data to database directly, but it didn't work due to cross-orign problem.

Right now I'm trying to pass these data(they are in JSON format) back to web2py and let web2py insert these data to database.(similar to submitting a SQLFORM).

Is there anyway I could pass these data as an argument to an web2py function and invoke that function within javascript code?

Possible approach in my mind: 1) Since I could write python in html using {{}}, and I could write html in javascript, could I write python code within javascript using something like: document.write({{python code}}) ?

I tried this but whatever html I write it goes to a brand new html page. I also tried document.getElementById('testDiv').write("<p></p>"); But it doesn't work.

2)use ajax, I'm not familiar with ajax, any example will be really appreciated!

Any thoughts?

Thank you all!

Answer 1

After hours of struggles and countless google, here's my workaround solution:

Main problem: the data are stored in AngularJS but AngulatJS could not submit data to database through API due to cross-orign issue. But Web2py could submit data to database using sqlform.

My approach: 1.)When the user click the submit button, invoke 'ng-click="submitBtn()"'. submitBtn() is a function of the ng-controller, which has access to the data. 2.)In submitBtn(), the function first write data into web2py's sqlform through

document.getElementById('inputId').value=$scope.data;

then the function click the sqlform submit button through

document.getElementById('submitBtn').click();

It took me a lot time to figure out those element ids of fields in web2py's auto-generated sqlform. The way to find them is using developers' inspect element tool in a browser and see the source code directly.

Hope this will help someone will face the same issue!

Answer 2

ok so you got me lost for a second there, lets see if i got it right 1- angular as your frontend 2- python as your backend

3- you are rendering an html document in python and delivering it to the browser 4- since python template language uses {{}} as delimiter am assuming you changed the angulars delimiters too

either using ajax or reload you'll need to provide a python post handler script. that takes your data and makes the DB update. if this is going to be a pattern and you are going to be making AJAX CRUD operations, you should use angular resources ngResource if not a simple

$http.post(url,data).success(function(response){})

https://docs.angularjs.org/api/ng/service/$http#post

where url would be your form submission handler url. if you where to use a form you'll need to set the target to an iframe hidden in your page and the response should a script tag that gets the scope pertinent to your controller and let him know the result of the operation. this is an old approach, but handy when it comes to send information to sites that don't allow CORS which by the way might be the solution to your problem, when storing data directly to your db, you might just need to enable CORS headers in your storage engine API and that should allow you to submit information even when coming from a different domain