I'm trying to create a simple widget Backbase, however, shows me an error ReferenceError: requireWidget is not defined. I think that it is associated with RequireJS but his hook itself does not do anything. Maybe someone knows how to deal with it?
index.html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:g="http://www.backbase.com/2008/gadget" xml:lang="en">
<head>
<title>Todo Widget</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<g:preferences>
<g:preference name="limit" label="Todo's Limit" type="text" default="5" viewHint="none" />
</g:preferences>
</head>
<body g:onload="requireWidget(__WIDGET__, 'todo')" class="todo-widget">
<h1>Todo Widget</h1>
</body>
</html>
And js file
define(["jquery"], function($) {
"use strict";
var self;
function Todo(widget) {
self = this;
self.widget = widget;
self.$widget = $(widget.body);
return self;
}
Todo.prototype.init = function() {
window.alert('it works!');
}
return function(widget) {
var todo = new Todo(widget);
todo.init();
}
});
Basically you need to reference the the require conf file in your HTML FILE from the launchpad.
**<script src="../../../launchpad/conf/require-conf.js"></script>**
the path ../ depends on the your path of the source folder.
You can also write the Widget without the require js as below with your own function
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:g="http://www.backbase.com/2008/gadget" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xml; charset=UTF-8" />
<title>Hello World</title>
<g:preferences>
<g:preference name="FontSize" type="range" min="8" max="24" step="2"
default="12" label="Font size" onchange="applyFontSize(__WIDGET__)"
viewHint="user" />
</g:preferences>
<script type="text/javascript">
function applyFontSize(oWidget) {
oWidget.body.style.fontSize=encodeURIComponent(oWidget.getPreference('FontSize'))+'px';
}
</script>
</head>
<body g:onload="applyFontSize(__WIDGET__)">
<p>Hello World</p>
</body>
</html>
Also you can register on the http://my.backbase.com.. to have access to more documentation
Related
//test_1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>DB Test</title>
</head>
<body>
<script type="module">
var num = 1;
console.log(num)
export {num}
</script>
</body>
</html>
//test_2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>DB Test</title>
</head>
<body>
<script type="module">
import {num} from './test_1.html'
console.log(num)
</script>
</body>
</html>
I want to use variable named num in test_1.html and test_2.html, but when I open test_2.html, error like 'test_1.html:1
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.' occurs and console.log(num) at test_2.html doesn't work properly. How can I import/export properly?
You can't import from an HTML file in this manner.
Is it possible for you to move the modules into separate JS files such as test_1.js and test_2.js then have test_2.js import from test_1.js instead?
EDIT
Like this:
<!-- test_1.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>DB Test</title>
</head>
<body>
<script type="module" src="/test_1.js"></script>
</body>
</html>
// test_1.js
var num = 1;
console.log(num);
export { num };
<!-- test_2.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>DB Test</title>
</head>
<body>
<script type="module" src="/test_2.js"></script>
</body>
</html>
// test_2.js
import { num } from "./test_1.js";
console.log(num);
the following code should display the word Test...but instead the message TypeError: document.getElementById(...) is displayed.
I can't figure out why:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
</head>
<script>
document.getElementById("kaptree").innerHTML="TEST";
</script>
<body>
<div id="kaptree"></div>
</body>
</html>
Can anyone help me to open my eyes?
You're trying to access the kaptree element before it's loaded. Run your script after loading the DOM.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
</head>
<body>
<div id="kaptree"></div>
<script>
document.getElementById("kaptree").innerHTML = "TEST";
</script>
</body>
</html>
You should place your scripts after your html elements.
The element with the id "kaptree" is not available at this place. Move the script block below the body and it works.
Otherwise you have to wait for the document-ready state.
If you move the body section with the DIV setup to the top it works.
It runs sequentially so it can't assign the inner.html before the DIV is defined
Because your JS code is called before HTML.
Solution 1: Add JS right before </body> tag
Example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
</head>
<body>
<div id="kaptree"></div>
</body>
<script>
document.getElementById("kaptree").innerHTML+="TEST";
</script>
</html>
Solution 2: Execute JS code inside window.load function
Example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
<script>
window.onload = (function(){
document.getElementById("kaptree").innerHTML+="TEST";
});
</script>
</head>
<body>
<div id="kaptree"></div>
</body>
</html>
Your script is defined before the element that you try to reference.
Move it after :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
</head>
<body>
<div id="kaptree"></div>
</body>
<script>
document.getElementById("kaptree").innerHTML="TEST";
</script>
</html>
Or more readable and maintainable solution, use a function :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
<script>
function changeValue(){
document.getElementById('kaptree').innerHTML='TEST';
}
</script>
</head>
<body>
<div id="kaptree"></div>
<script>changeValue()</script>
</body>
</html>
A. Put the script inside head or body.
B. Either put the script after #kaptree, or add a document ready statement. You try to call something that isn't there yet.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
<script>
document.addEventListener('DOMContentLoaded', function(){
document.getElementById("kaptree").innerHTML="TEST";
}, false);
</script>
</head>
<body>
<div id="kaptree"></div>
</body>
</html>
Sometimes the solution is so simple.
I will put the function call into a:
$( document ).ready(function() {
});
I have three meta variables: Concept, DocType and Path that I want to add to my URL so that I up with something in my browser that looks like "http://www.mywebsite.com/page.html?concept=var1&doctype=var2&path=var3
Right now my page has the following code on it, but I am very new to JS and not sure if this is correct:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="concept" content="product" />
<meta name="docType" content="template" />
<meta name="Path" content="offer" />
<script>
function refresh() {
var concept = document.querySelector('meta[name="concept"]');
var doctype = document.querySelector('meta[name="docType"]');
var path = document.querySelector('meta[name="Path"]');
this.document.location.href = "?concept=" + concept.content + "&doctype=" + doctype.content + "&path=" + Path.content;
}
</script>
</head>
<body>
Line of text
<script>
if (location.search.indexOf("concept") !== -1) refresh();
</script>
</body>
</html>
This gives me the following error with no changes to my url:
reflow: 0.1ms
reflow: 0.11ms
reflow: 0.14ms
1406128139877 Services.HealthReport.HealthReporter WARN No prefs data found.
Use querySelector instead of getElementByName, and instead of concept.value, use concept.content. So your code would look like this:
<meta name="concept" content="product" />
<meta name="docType" content="template" />
<meta name="Path" content="offer" />
<script>
function refresh() {
var concept = document.querySelector('meta[name="concept"]');
var doctype = document.querySelector('meta[name="docType"]');
var path = document.querySelector('meta[name="Path"]');
document.location.href = "?concept=" + concept.content + "&doctype=" + doctype.content + "&iapath=" + path.content;
}
</script>
Also, iapath.content is an error, use path.content, that's your variable's name.
In addition, you have to call the method refresh somewhere; otherwise it won't run:
<body>
Line of text
<script>
if (location.search.indexOf("concept") === -1) refresh();
</script>
</body>
This piece of (static) html works perfectly on my local server on all browsers I have access to (chrome, firefox, IE...):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="concept" content="product" />
<meta name="docType" content="template" />
<meta name="Path" content="offer" />
<title>Test</title>
<script>
function refresh() {
var concept = document.querySelector('meta[name="concept"]');
var doctype = document.querySelector('meta[name="docType"]');
var path = document.querySelector('meta[name="Path"]');
document.location.href = "?concept=" + concept.content + "&doctype=" + doctype.content + "&iapath=" + path.content;
}
</script>
</head>
<body>
Line of text
<script>
if (location.search.indexOf("concept") === -1) refresh();
</script>
</body>
</html>
hi2all i write code which change the color of webpage when the user click the div
but doesn't work here is my code what's wrong with it
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
<script type="text/javascript">
var x=document.getElementById("m");
x.addEventListener("click",function{
document.body.style.backgroundColor = "red";
});
</script>
</head>
<body >
<div id="m">kfjgflg</div>
</body>
</html>
You should use something such as:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
</head>
<body>
<div id="m">kfjgflg</div>
<script type="text/javascript">
var x=document.getElementById("m");
x.addEventListener("click",function(){
document.body.style.backgroundColor = "red";
});
</script>
</body>
</html>
Because you have two problems in your original code:
Is missing a important () after the token "function".
The Javascript only recognizes a element after the page or element has ready. In this case, the element only is read to be recognized if your code has after the Javascript Codes that recognizes it.
The code above fixes this.
A important observation: In some IE's, this code can not work, because of the use of x.addEventListener, in this case, you can transform the anonymous function in a normal function (with a name) and listen with addEventListener (if available) and onclick (recommended for old IE's).
In this way,the code looks like:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
</head>
<body>
<div id="m">kfjgflg</div>
<script type="text/javascript">
function changeColor(){
document.body.style.backgroundColor = "red";
}
var x=document.getElementById("m");
if(!!x.addEventListener){ //If exists
x.addEventListener("click", changeColor);
}
x.onclick = changeColor; //It's a property, and ALWAYS can be set (but in some cases is not recognized)
</script>
</body>
</html>
Here is a working example with this code: http://jsfiddle.net/fjorgemota/qCXH3/
If you had opened your JavaScript error console it would have told you that you cannot access the property/method addEventListener of undefined.
You need to look for the element m after the DOM tree has been built. Either place into a function which gets called on DOMContentLoaded:
document.addEventListener('DOMContentLoaded', function() {
/* ... */
}, false);
or place your script at the end of your <body>.
I got problem with EmberJS I can't understand
The problem could be found in the jsfiddle:
http://jsfiddle.net/wLKKQ/
JS :
var fileUploader = [] || fileUploader;
fileUploader.app = Em.Application.create();
fileUploader.app.userDetailsView = Em.View.create({
clientIP: null
});
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<script type="text/x-handlebars">
{{#view fileUploader.app.userDetailsView}}
<h2>Hello Guest, your IP is: {{clientIP}}</h2>
{{/view}}
</script>
<script>
$(function () {
fileUploader.app.userDetailsView.set('clientIP', '::1');
});
</script>
</body>
</html>
I get the following error:
Uncaught Error: assertion failed: Unable to find view at path 'fileUploader.app.userDetailsView'
There are several problems in your code.
Ember.Application should be in an uppercase namespace (see The Emberist blog).
You must pass a view class to the #view helper, not an instance (you consequently have to replace Ember.View.create with Ember.View.extend.
Your script that edit the clientIP does not work, because now FileUploader.app.userDetailsView is a class. You can do the same thing with didInsertElement Ember.View method.
In your template, you have to specify view.clientIP, according to View Context Changes.
Now this JSFiddle work :
FileUploader = [] || fileUploader;
FileUploader.app = Em.Application.create();
FileUploader.app.userDetailsView = Em.View.extend({
clientIP: null,
didInsertElement: function() {
this.set("clientIP", "::1");
}
});
The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<script type="text/x-handlebars">
{{#view FileUploader.app.userDetailsView}}
<h2>Hello Guest, your IP is: {{view.clientIP}}</h2>
{{/view}}
</script>
</body>
</html>