Not load correctly resource in OPA5 - javascript

I create my app using OpenUI5 and I want try to integrate OPA5 to test it.
I write my test page: TestOPA.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Opa sample for matchers</title>
<script id="sap-ui-bootstrap" src="https://openui5.netweaver.ondemand.com/resources/sap-ui-core.js"></script>
<link rel="stylesheet" href="https://openui5.netweaver.ondemand.com/resources/sap/ui/thirdparty/qunit.css" type="text/css" media="screen" />
<script>
(function () {
jQuery.sap.require("sap.ui.thirdparty.qunit");
jQuery.sap.require("sap.ui.test.Opa5");
jQuery.sap.require("sap.ui.test.opaQunit");
var Opa = sap.ui.test.Opa;
var Opa5 = sap.ui.test.Opa5;
module("Matchers");
opaTest("Should find a Button with a matching property", function(Given, When, Then) {
// Act
Given.iStartMyAppInAFrame("../index.html");
/* When.waitFor({
viewName : "view.Main",
controlType : "sap.m.Button",
matchers : new sap.ui.test.matchers.PropertyStrictEquals({name : "text", value : "Changed text"}),
success : function (aButtons) {
ok(true, "Found the button: " + aButtons[0]);
},
errorMessage : "Did not find the button with the property Text equal to Changed text"
});
Then.iTeardownMyAppFrame(); */
});
})();
</script>
</head>
<body>
<h1 id="qunit-header">Opa sample for matchers</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture"></div>
</body>
</html>
index.html is the root of my app. Inside the flow (not at start) I load resources that are not loaded properly.
I want load the resource http://localhost:8080/ZWebapp2/apps/appChangePwd/changePwd.js
but the console of browser show me a error to load the resource at http://localhost:8080/ZWebapp2/index.htmlapps/appChangePwd/changePwd.js
On all browsers it work fine (open http://localhost:8080/ZWebapp2/apps/appChangePwd/changePwd.js) but I have the problem when I start TestOPA.html
I have the same problem if I launch the my app (index.html) on internal Eclipse browser by Run as --> Web App Preview

Maybe you are referencing your files with a relative path, but you want an absolute one. Here is an example of how to do this with the jQuery.sap.require function of UI5:
JSBIN exmaple
The require statement in the bin should always create the correct request.
In your case it seems like you want declare an absolute path which means it will start building an URL after you host (localhost:8080). An relative path starts where your index.html is located.

Related

Newby: index.js file doesn't work in index.html file

I'm new in Javascript world, currently I'm trying to implement a GUI using electron js framework.
Trying to reproduce the code from a tutorial, I got stuck on a code which seems not to work on my PC, basically even if I click on a button, the console is not logging anything (when it should have!!); the aim of the code is to refer to a button defined in an index.html file from a index.js containing the script and log a sentence when the button is clicked, but it seems like the script in the html file cannot access the .js file at all. Here I'm reporting the code from index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my-app</title>
<link rel = "stylesheet" href="styles.css">
</head>
<body>
<button id = "button1" > START </button>
<script>
require('./index.js');
</script>
</body>
</html>
Here the code belonging to index.js file:
const electron = require("electron");
const button1 = document.getElementById("button1");
button1.addEventListener("click", startApp);
function startApp(){
console.log("Button clicked!");
};
Note:
I've tried to debug this code based on my very little knowledge of Javascript and electron:
I used document.getElementById("button1"); in index.html and it does work (the variable obtained was used to change button text color), but the same is not working when reported in the index.js file;
I tried console.log("In index.js"); in index.js but still it is not working!
From these results I thought the problem may be the .html and .js file communication; they are in the same folder. One more thing: I downloaded the tutorial code from GitHub and the problem is still present with the same actions at points 1 and 2.
Edit: I've omitted that I'm linking index.html window and displaying it in the main.js file, in fact the windows does show up, but the the click on the button doesn't produce any action.
Seemed to be a problem with the require module not working in .html file.
Solved by replacing it with <script src="index.js"></script>.
It appears that you shoud be using electron to load the index.html via BrowserWindowonce it is ready. app and BrowserWindow are from the electron module.
`const { app, BrowserWindow } = require('electron')`
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
From the quick start
In Electron, browser windows can only be created after the app module's ready event is fired. You can wait for this event by using the app.whenReady() API. Call createWindow() after whenReady() resolves its Promise.
For futher info see https://www.electronjs.org/docs/tutorial/quick-start
Hope this proves useful.

How to get the Cloudinary upload widget to work?

All I am trying to do at this point is get the quick example working as shown here - https://cloudinary.com/documentation/upload_widget
This is my code -
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
</head>
<body>
<button id="upload_widget" class="cloudinary-button">Upload files</button>
<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
<script type="text/javascript">
var myWidget = cloudinary.createUploadWidget({
cloudName: 'cloudname',
uploadPreset: 'uploadPreset'}, (error, result) => {
if (!error && result && result.event === "success") {
console.log('Done! Here is the image info: ', result.info);
}
}
)
document.getElementById("upload_widget").addEventListener("click", function(){
myWidget.open();
}, false);
</script>
</body>
</html>
When I click on the "Upload files" button the grey box of the upload widget does appear but all I see inside is a loading icon.
your code is working perfectly fine for me locally and on Codepen without making a single change to the code. I even uploading two pictures using it, which you should check if they appeared in your Cloudinary account. Don't worry, they are clean.
Since I can't check if the images were uploaded to your account, I created a Cloudinary account of my own and verified that the widget is indeed working fine. I only checked it by changing to my cloudName and preset.
Here's the Codepen Link
Your code below since Codepen Links need to have code accompany them.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
</head>
<body>
<button id="upload_widget" class="cloudinary-button">Upload files</button>
<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
<script type="text/javascript">
var myWidget = cloudinary.createUploadWidget({
cloudName: 'dw62s0tlm',
uploadPreset: 'rossm67'}, (error, result) => {
if (!error && result && result.event === "success") {
console.log('Done! Here is the image info: ', result.info);
}
}
)
document.getElementById("upload_widget").addEventListener("click", function(){
myWidget.open();
}, false);
</script>
</body>
</html>
This is from their support (which worked) -
The most common reason why that would happen is if the HTML file that contains the code for the widget is opened in the browser directly, via the file:// protocol. In order for this to work, the file should be opened from within your localhost through a web server via HTTP.
For example, if your system has Python installed you can quickly run a simple HTTP server in the same directory as your file which would make it accessible.
For example in Python 3:
python3 -m http.server
Python 2.7:
python -m SimpleHTTPServer
Then navigating to http://localhost:8000/index.html would run the code and should allow you to launch the widget.

vue-cli 3 pages config will serve javascript but does not fire it

I'm running into an issue when trying to use the pages config for vue-cli v3.
I have two pages setup, my index page and a test page:
pages: {
index: {
entry: "src/main.js",
template: "public/index.html",
filename: "index.html",
title: "Index Page",
chunks: ["chunk-vendors", "chunk-common", "index"]
},
"test-case-study": {
entry: "src/subpage/test-case-study.js",
template: "public/test-case-study.html",
filename: "test-case-study.html",
title: "Test case study",
chunks: ["chunk-vendors", "chunk-common", "test-case-study"]
}
}
I have my entry point files and templates in the (I'm assuming) correct spots:
And when I run npm run serve and navigate to the test page (http://localhost:8080/test-case-study.html) to check, the markup loads correct, the javascript file comes through successfully in the network tab, but I get the error
The resource http://localhost:8080/test-case-study.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
The script tag is getting added to the head successfully:
And when I look in the source tab at the javascript it all looks correct and I can see the evaluate function call with my custom javascript, but nothing ever fires.
UPDATE
I ran an build and checked the output of the dist/test-case-study.html file and it looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<title>Test case study</title>
<link href=/js/chunk-vendors.96f8ab67.js rel=preload as=script>
<link href=/js/test-case-study.d382d007.js rel=preload as=script>
</head>
<body>
<h1>hi</h1>
<div id=app></div>
<script src=/js/chunk-vendors.96f8ab67.js></script>
<script src=/js/test-case-study.d382d007.js></script>
</body>
</html>
It's weird that the javascript is being pulled in twice, and I still don't get why it wouldn't fire. You'd think it would fire more than once vs not at all.
Is there something I'm missing from my config?

SAPUI5 web application does not work properly

I am trying to make a hello world web full-screen application. So, I created a new project called Hello world. Then, I created a folder called WebContent. Inside it, I put the following code in an index.html as following.
WebContent/ index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-resourceroots='{"com.Project":""}'>
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
var app = new sap.m.App({initialPage:"idpage1"});
var page1 = sap.ui.view({id:"idpage1", viewName:"com.Project.HelloWorld.Page1", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(Page1);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Then, in this directory WebContent/ HelloWorld I put a file called Page1.controller.js with the following code in it
WebContent/ HelloWorld/ Page1.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("com.Project.HellowWorld.Page1", {
});
});
Also, I made another file as following
WebContent/ HelloWorld/ Page1.view.xml
<!DOCTYPE xml>
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="com.Project.HellowWorld.Page1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Full screen App">
<content>
</content>
</Page>
</core:View>
The problem is that the background appears. But, the whole content does not appear on the page as required.
I am following a course published by an external consultant by the way.
Your <page> is written lowercase. It should be <Page>.
You should get the following error in console though:
Uncaught Error: failed to load 'sap/m/page.js' from .../resources/sap/m/page.js: 404 - Not Found
I just found the solution to my problem.
In the index.html:20 this part of my code is written like this app.addPage(Page1); So, I just replaced it with app.addPage(page1); and the error disappeared.

Call python function with javascript and display returned string on web page

I have a simple appengine/python application that allows the user to click a button to display a random-generated sentence. So far, I have pieced together the main python file as follows:
import jinja2
import os
import webapp2
import generator # My random sentence generator module; its make_sentence() function returns a string
class MainPage(webapp2.RequestHandler):
def get(self):
template = jinja_environment.get_template('main.html')
self.response.out.write(template.render(dict(sentence = generator.make_sentence())))
jinja_environment = jinja2.Environment(
loader=jinja2.FileSystemLoader(os.path.dirname(__file__))
)
application = webapp2.WSGIApplication([
('/', MainPage),
], debug=True)
In main.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<title>Random Sentence Generator</title>
</head>
<body>
<div class="jumbotron">
<p class="lead">{{ sentence }}</p>
<a class="btn-lg btn-info" onclick="makeSentence();return false;" href="#">Generate sentence!</a>
</div>
<script>
function makeSentence(){
location.reload();
}
</script>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
<html>
In case it will be important for the question, here is app.yaml as well:
application: sentence-generator
version: 1
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /css
static_dir: css
- url: /.*
script: sengen.application
libraries:
- name: jinja2
version: latest
This works okay (in fact, one can try it out here :-) ), but I would like to be able to generate a new sentence without refreshing the page each time.
From this question, it looks like I can use Ajax for this. But I'm not sure how to put it all together. I'm thinking I can replace the contents of makeSentence() with something like the top answer in the previous link, but I'm not sure how to incorporate the "response" with what I display on the web page.
You are on the right track. Instead of calling location.reload(), you can use ajax to get the output and put it in the paragraph instead. To begin with, put an identifier to the paragraph where you place your sentence:
<p id="sen1" class="lead">{{ sentence }}</p>
Now all that remains is using AJAX to get your current page output and display it in sen1. You can do something like this in makeSentence. (This will alert the response of your main page reload in ajax. You might want to extract the infomation you need from it.)
function makeSentence() {
$.ajax({
url:'http://sentence-generator.appspot.com'
}
)
.done(function(data) {
alert(data);
})
.fail(function(){
alert('error');
})
.always(function(){
//alert('always');
})
;
}

Categories