As a proof of concept I would like to show the some Qooxdoo widgets (which i find pretty nice) in a very simple index.html file.
Here I try to show a button :
<head>
<title>Title</title>
<script type="text/javascript" src="http://demo.qooxdoo.org/3.5/framework/q-3.5.min.js"></script>
<script>
var button = new qx.ui.form.Button("Hello...");
this.getRoot().add(button, {left: 30, top: 20});
</script>
</head>
If I run the above I get this :
Uncaught ReferenceError: qx is not defined
Is my library link correct? Or is it even possible to link qooxdoo javascript in a HTML file? We already have a large established javascript application, and we would like to just drop in qooxdoo widgets that we like. Not sure if that is possible though.
You are including the qx.Website library and try to use qx.Desktop widgets. That ain't gonna work. Either you choose qx.Desktop and use the inline app approach [1] or you use the qx.Website widgets [2].
[1] http://manual.qooxdoo.org/current/pages/development/skeletons.html#inline
[2] http://demo.qooxdoo.org/devel/website-api/index.html#Accordion
Related
Let me start by saying that I'm primarily a C# programmer who only extremely rarely ventures into JavaScript.
I can write myself some JS code as long as its mostly plain. I can handle jQuery and the odd self-sufficient 3rd-party library, but couldn't code myself out of a wet paper bag when React, Angular, Bootstrap and others enter the scene. I'm also not used to using npm or any other similar package manager.
It was never really my job nor interest, so I never went there. Whenever I code some JS, I reference the required JS files in my <script> tags and then use them as directly as possible.
I'm currently creating a very simple proof of concept web app which will have its client parts rebuilt by competent people sooner or later. But in the mean time I have to provide the bare-bones functionality that will serve as a rough guideline for the next team to take over, whenever that might be.
I've picked two libraries that each seem easy to use and get the job done, when used separately. But when I try to use them together on the same page, I run into a problem: they both use the same name for their main type, and I can't seem to disambiguate between them.
These are the libraries:
JSON Editor
JSON Schema Form Builder
They both declare a type named JSONEditor, which I can use as long as I don't reference both of the libraries at once.
So far I've tried to solve this by using modules and import-ing the type using different names, but it didn't work... I got a bunch of errors in the console about "import not found" and "e is not defined", which makes me think I'm tackling this wrong.
How would I solve this using plain JS if possible?
UPDATE: As suggested, I'm providing a minimal example that demonstrates my use:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Page</title>
<link href="/lib/jsoneditor/jsoneditor.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="editor" style="width: 300px; height: 200px;"></div>
<div id="form"></div>
</div>
<!--library 1: https://github.com/josdejong/jsoneditor -->
<script src="/lib/jsoneditor/jsoneditor.min.js"></script>
<!--library 2: https://github.com/jdorn/json-editor -->
<script src="/lib/jsonform/jsonform.min.js"></script>
<script>
// Library 1: The JSON code editor.
var editor = new JSONEditor(document.getElementById("editor"), { mode: "code" });
// Library 2: The form builder.
var form = new JSONEditor(document.getElementById("form"), {
ajax: true,
schema: {
$ref: "/api/describe/service/test"
}
});
</script>
</body>
</html>
If I comment out the use of one library (whichever), the other works as expected and the content is displayed at the respective target <div>. But if I try both at once, as shown above, nothing is displayed, and the following error is output to console:
Uncaught TypeError: t is undefined
This happens at the var editor = new JSONEditor line, which makes me think that the type from the second library overwrites the first and causes the problem.
This is understandable to me and isn't the issue per-se. The issue is that I don't know how to import the two JSONEditor types so that they can be referenced separately.
The maintainer of the code editor (JSON Editor, not JSON Schema Form Builder) has addressed and closed an issue about exactly this in the past: https://github.com/josdejong/jsoneditor/issues/270
His recommended solution is something like the following:
<script src="assets/jsoneditor/dist/jsoneditor.min.js"></script>
<script>
var JSONEditorA = JSONEditor;
</script>
<script src="assets/json-editor/dist/jsoneditor.min.js"></script>
<script>
var JSONEditorB = JSONEditor;
</script>
If you must use script tags this is probably the way to go.
I am trying to call the Math.matrix() function, and I am quite certain I am not importing the file correctly into my javascript code. I have read through the StackOverflow question "how to include and use math.js": and given that advice, I have the following :
<HTML >
<!DOCTYPE html>
<head>
<script src=https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.1.1/math.js>
</script>
<script type="text/javascript" >
function rotate_clockwise(){
/* code skipped */
matrix = Math.matrix(matrix, rotationmatrix);
}
</script>
</head>
<body>
</body>
</HTML>
where the cdns reference I have taken from this link
But on run when rotate_clockwise is called via slider the chrome 68 debugger states Uncaught type error : Math.matrix is not a function, so I do believe I am not including this file correctly.
My base assumption is that including a file once, in one set of script tags, is enough for any javascript function to use this library, which resides within a different set of script tags.
Thanks so much for any assistance you can provide.
I think you need math.matrix(...)--lower case math since Math is a standard JS library.
I´m new to dojo and I´m want to do the following:
Pretend you have a single page application but you have two views, which are built up totally different. One view is e.g. a startpage which would just fill the Bordercontainer-center. The second view would rather look like a standard webapp, with a header in the Bordercontainer-top, a menu in Bordercontainer-left and some content in Bordercontainer-center.
If the index.html (single page app) is now called I want the startpage to appeare first. There should be an onclick-event in it. With this event the views should change. This means the startpage disappears and the second webapp-view is shown.
What would be the best way to implement this?
I thought of using two Bordercontainers.
The first Bordercontainer would contain the startpage in the region center.
The second Bordercontainer would contain the webapp-view (top, left, center).
Would it now be possible to swap the center region from the frist Bordercontainer in a way that the startpage get´s swaped with the second Bordercontainer? Would this be a way how to solve my approach?
If yes I would need some kind of controller which would swap the view.
Could I solve this with using dojo.wire?
Or is there a straight forward approach in dojo, which I have not found yet?
If there is a small example or tutorial out there, it would be great to receive a link to it.
Thx for every hint.
You should take a look at dojox/mobile (http://dojotoolkit.org/reference-guide/1.10/dojox/mobile.html) it has support for what you are trying to do. You could also look at dojox/app (http://dojotoolkit.org/reference-guide/1.10/dojox/app.html or http://dojotoolkit.org/documentation/tutorials/1.9/dojox_app/contactsList/) to see if that gives you what you need.
I tried the following code:
require([
"dijit/form/Button"
], function() {
changeView = function(idShow, idHide) {
var showView = dojo.byId(idShow);
var showHide = dojo.byId(idHide);
if (showView.style.display == 'block') {
showView.style.display = 'none';
showHide.style.display = 'block';
} else {
showView.style.display = 'block';
showHide.style.display = 'none';
}
};
});
#view1 {
display: block;
}
#view2 {
display: none;
}
<html>
<head>
<title>Change View</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
</head>
<body class="tundra">
<div id="view1">
View1
<br>
<button dojoType="Button" widgetId="view1Button" onClick="changeView('view2', 'view1');">Change to View2</button>
</div>
<div id="view2">
View2
<br>
<button dojoType="Button" widgetId="view2Button" onClick="changeView('view1', 'view2');">Change to View1</button>
</div>
</body>
</html>
This lets me change the view with onclick and css and a little js.
I think this is one of the various ways you mentioned, for solving my approach. But what I think I´m missing now is to combine my function changeView with dojo - somehow.
What would be the right way to combine dojo and the function changeView now?
Would I write a dojo modul with a define and then work with it in my html and calling it with require?
Or generally.. for a dojo-beginner.
If I need javascript code for my app, is there a straight forward way to combine this with dojo?
e.g. with any kind of approuch
Look an see what dojo has to solve the approch
Write JS code, if there is no suitable dojo modul/function yet
Think about seperating the JS code it into modules
Write the modules in dojo with define
Use the modules in the app by calling them with require
Would this be a proper way for programming in dojo?
The question is more a general "howto glue JS and dojo together" to write webapps and use the advantages of dojo.
Thx in advance.
I have recently discovered the new trend of including all .js script at the end of the page.
From what i have read so far seems pretty ok and doable with an exception.
The way I am working is using a template like:
<html>
<head>
<!-- tags, css's -->
</head>
<body>
<!-- header -->
<div id="wrapper">
<?php
include('pages/'.$page.'.php');
?>
</div>
<!-- footer -->
<!-- include all .js -->
</body>
</html>
Now, if I want to use this example on my page http://www.bootply.com/71401 , I would have to add the folowing code under my jquery inclusion.
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
But that would mean I either use that in every page - even if I do not have use for it, either generate it with php in the $page.'php' file and echoing it in the template file, after the js inclusion.
I am sure though, better methods exist and I don't want to start off by using a maybe compromised one.
Thanks!
Please avoid using inline scripts as they are not good maintainable and prevent the browser from caching them. Swap your inline scripts in external files.
Fore example you could put all your JavaScript in one file an check the presence of a specific element before initialize the whole code. E.g.:
$(document).ready(function(){
if($('.thumbnail').length) {
// your thumbnail code
}
});
A better way to execute "page specific" JavaScript is to work with a modular library like requirejs. You can modularize your scripts depending on their functionality (like thumbnails.js, gallery.js etc.) and then load the necessary script(s) depending e.g. on the existence of an element:
if($('.thumbnail').length) {
require(['ThumbnailScript'], function(ThumbnailScript){
ThumbnailScript.init();
});
}
The best way you can go is create a separate file for this code.
Let's name it app.js. Now you can include it under the jQuery inclusion.
<script type="text/javascript" src="app.js"></script>
This will prevent code repeat.
One more thing, pull all the code in $(document).ready(). Here is an example. So your app.js file will look like this:
$(document).ready(function(){
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
})
I'm using HTML, JavaScript, and jQuery Mobile to make a kind of picture gallery. I'm following the JQM demo at: http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/swipe/swipe-page.html
to make the gallery, but it uses a totally different HTML page for each picture. My plan is for the gallery to be dynamic, so I don't have a set number of pages or a set list of picture names, etc, and I thought I might use Mustache to make a picture template, and create the pages dynamically. Here is the basic layout of the code:
In index.html
<!DOCTYPE html>
<html>
<head>
...
<script src="mustache-0.7.0-min.js" type="text/javascript"></script>
<script src="mobile.js" type="text/javascript"></script>
<script id="test_template" type="text/html">
<h1>{{firstName}} {{lastName}}</h1>
<p>{{tempText}}</p>
</script>
...
</head>
...
And then in mobile.js
function showPerson()
{
var person =
{
firstName: "Feaf",
lastName: "McFeaf",
tempText: "Hello Feaf"
};
var personTemplate = document.getElementById("test_template").innerHTML;
var html = Mustache.to_html(x, person);
}
So it's about as basic as you can get. However, when I run the web app on a local server (in Chrome), and I step through this function, I get an error at the Mustache.to_html line, saying
Uncaught TypeError: Cannot call method 'to_html' of undefined
I'm fairly new to web development, and brand new to Mustache, so I do not know what could be causing this error. I've tried calling other Mustache methods, like render, but the same error appears. Is the <script src=...> not enough to have the Mustache library accessible to mobile.js? Anybody have any tips on what I might be doing wrong?
Thank you for any information, and let me know of any other information I should add.
EDIT:
Whoops! Forgot to include the fact that I had mustache in the scripts section, I've edited to reflect this fact. Just to be clear, I DO have (and always have had) mustache included!
Also, I tried the suggestion of #Zorayr of using console.log(Mustache), and it claims that Mustache is undefined, even though I am importing it as noted above. Why might this be?
As a solution to the problem, I ended up downloading and using Handlebars. It seems to me that there was some conflict with the Mustache library that was already in the project and the new one I added in. This doesn't really explain why Mustache would be undefined, but that was my workaround.