Access contents of external resource in Appery.io - javascript

I'm new to Appery.io, IONIC and AngularJS but so far it has proven to be a wicked awesome platform for streamlining development.
The problem that I'm having is with integrating external JS resources.
What I'm trying to accomplish - Overview
I'm trying to add Braintree's drop-in UI payment processing form into one view within my app.
The Problem
I keep receiving "Error: Braintree.setup is not a function" error when I run the Braintree.setup() function.
Adding the external library
I include the script by doing the following:
Go to: App Settings > External Resources
Add script url and save it as an external library
Set it to enabled so that I can only load it during the payment page view
Including the script in the view
Go to "Routing"
Click "dependencies" for the page I want to load it on
Select the script > save
Triggering Braintree.setup()
Pop over to my page > scope
Add the setup function as listed on the Braintree website.
Running the page
Run the page and am provided this error "Error: Braintree.setup is not a function"
NOTE: I am also receiving another error before that but have no idea why. It also appears some demo apps that Appery has provided. Brownie points if you can tell me why.
The script has been loaded as I can see it in Firebug.
NOTE: On the website the code uses braintree.setup() rather than Braintree.setup(). I have switched over to Braintree.setup() because braintree.setup() was giving me an error saying that braintree was not defined. I'm not sure if Braintree is a variable defined in the resources section in which Appery assigns any values from the script to the variable.
Many thanks to anyone who can help!

After much digging around I learned about RequireJS and AngularJS.
Turns out you have to define the script and put it inside a variable, as well as, list any dependencies.
Step 1: Create New > Javascript:type=Angular Service
Step 2: Define the dependency on the external lib url
Step 3: Return the external lib property
Step 4: Include the newly created JS file and external Lib in your page
Step 5: Call it using Apperyio.get('AngularServiceName')
Voila!

Related

How to run a file on server on html-button click

how do I manage to execute a Python-file or a bash-script on a server via a press of a html-button without using a framework?
I have tried several versions of Ajax-Calls suggested in answers to similar questions, but none of them seem to work for me.
Note: Im using an Apache-Server on a RaspberryPi
According to apache documentation, you should configure apache to run CGI script, define an url prefix that maps a directory that contains your script and finally your script must return output in a particular way, or Apache will return an error message.
So, for example, if you define an url prefix like:
ScriptAlias "/cgi-bin/" "/path/to/your/script/cgi-bin/"
you can create a simple anchor to execute your script, you don't need to use ajax for this.
click me
To successful run your script you should follow apache directive in "Apache Tutorial: Dynamic Content with CGI"

django retrieve data from database using ajax and update section

I am new to django, I was trying to design a webpage where a project section will have all the projects, on the same page there will be module section and under that module section there will be commits.
Now, What i want is when the user clicks on some project the module section should get updated with the modules under that project. I was able to do this much. (Here is everything you need to reference, you might need to hop into feed app there)
But the problem is, I used this in my ajax to update the module section.
$('#module_section').html(data);
Now the index.html doesn't know about the show details button in my module section (as it is retrieved from detail.html, my detail.html has the show details button which will show the commits done under that module) and when I press the show details button in my module section on the index.html page nothing happens, obviously.
I need a javascript/ajax that may be able to do a query like "Select * from module where project_id = 'some_id' " (Not sure about the syntax), and then update my module section accordingly so that when someone clicks on show details of module section he will be able to see the commits done under that module.
Any Suggestions would be highly appreciated, <3 in advance.
Create your html modules in separate templates. Lets say you have "index.html" and "details.html". Suppose both of these have a module that shows commits (call this the "commit module").
Create a separate html template that contains your module. call it "module_commit.html".
Then link a separate javascript file to it that contains all the javascript that contains it.
Now create a server side api for this module. This includes urls/views that return data and perform actions for your module.
Connect the modules javascript to call the api views and place the data in your module. ex:
Suppose you want the module to display a list of commits. You would create a view/url that returns the list of commits in JSON format. Then create a javascript function that, using ajax, calls this url endpoint and inserts the data into your html module (I would suggest using jquery for all of this because it is a lot easier to work with than vanilla javascript).
Now create an init function in your modules javascript file to make the needed calls to populate the module and set event triggers and events.
Now include your modules template in the main templates (index.html, details.html, etc...). Make sure the init function is called somewhere after the page loads.
Your code will have this layout:
api (models/views/urls)
A | (JS calls api to perform actions and retrieve data)
| V
javascript
| (Puts results from api into the modules html)
V
html
With this solution, you can just include ({% include 'module_commits' %}) the module in any template you want, call then init function in the javascript for that module, and it will work on any page. Just make sure your html ids don't conflict with others.

How to remove the optional call for 'library-preload.json' in SAPUI5 application?

I am developing a SAPUI5 mobile app using cordova. Now I need to include another library (cordova-plugin-file) into my project. I've already tried to do this, but my problem is, that if the plugin is included, my 'sap-ui-core.js' file tries to load 'library-preload.json' (see screenshot).
screenshot console
And I do not want to load a library-preload.json. How could I solve this problem?
An Answer on how to solve this problem by adding a 'library-preload.json' file
would also not be bad :)
Set the data-sap-ui-preload="" in SAPUI5 Boostrapping.
To Quote from Source:
The library-preload.json files which contain all controls from a
library to reduce the number of HTTP requests are not required in
hybrid apps because there is no HTTP latency. SAPUI5 will by default
try to access them, so you might see a failed attempt to load these
files in the log file or developer tools. These error messages do not
hurt, though, and you can get rid of them by declaring that no such
files exist and by setting the following configuration in the SAPUI5
bootstrap script tag:
`data-sap-ui-preload="" `
Read: https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/293eb945f0e945aaa776812481b4c533.html
Preload has 3 more variants. Read More here:
https://help.sap.com/saphelp_nw74/helpdata/en/91/f1cea36f4d1014b6dd926db0e91070/frameset.htm?original_fqdn=help.sap.de

Multiple users using a spreadsheet at the same time, but it can only be used one at a time. What to do?

I'm using the Session.getEffectiveUser () command to return the results of the active user in the worksheet, but if another user enters the same sheet the results will conflict.
That is, only one can enter at a time. What can I do to keep this conflict from appearing?
Crazy solution that I thought: Is there any way that this worksheet doubles if I have 2 active users at the same time, and delete if that second user leaves?
Thx a lot!
And sorry for my bad english!
Here are the steps to deploy your code as a web app so that conflicts won't happen.
For this, you will need a front end where you will take inputs or whatever from the current user who will be accessing the web app.
Now, in your appscript screen only, you can go to File -> new -> html file, and name it as index.html or whatever you like. Code it in simple html format. Apply javascript also if you have to. For adding javascript externally, you can create another .html file and write your tag there. These all is simple html and javascript only.
Now, we have to link it with our appscript somehow. So for that, write this function in your appscipt:
function doGet(e)
{
var template = HtmlService.createTemplateFromFile('Index');
return template.evaluate()
.setTitle('YOUR_TITLE')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
And also write this line in your Index.html page(You can write it outside of <html> tags):
<?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?>
Now your code is ready to be deployed as web app. Go to Publish -> Deploy as web app...See that you have kept the option 'me' in Execute app as. Also, you can specify who can access your web app in the next option 'who has access to this app'.
Click update and run the latest code by clicking 'latest code' written in blue. You can also note it's URL so that you can include your web app in google sites etc.
Note that, every time you make new changes to the code, you should always choose project version 'new' and then click update.
Few tips:
To call functions of appscript from javascript, you can write like this:
google.script.run.withSuccessHandler(FUNCTION_NAME).APPSCRIPT_FUNCTION();
What it will do is, it will asynchronously call appscript function and when it is successfully executed, will execute the next javascript function named 'FUNCTION_NAME'.
How this will solve your problem?
Well, as you have deplyed the web app as 'me', whoever will run the web app will execute the code as if you yourself has executed the code, but at the same time, all featuers like Session.getActiveUser() will work individually. Hence, conflicts won't happen.
Try this yourself and you will have your doubts solved. If any queries please ask, community is always happy to help. :)

Include remote js file on the fly?

Is there a simple way to include a remote js file on the fly (in an onclick function)?
The "verify" onclick event for our ssl site seal requires a code include from the vendor. Trouble is, it slows loads times. So I extracted the function from their js and hosted it locally - but they change the request params from time to time so I have to manually edit the js.
It would be nicer if I could just include the remote file when someone clicks the site seal.
TIA.
If you are using jQuery you can use $.getScript
Description: Load a JavaScript file from the server using a GET HTTP request, then execute it.
You can use the createElement() and add it to the DOM. Please see the below document.
http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS

Categories

Resources