I'm a beginner in dojo, and I'm trying to print the output to console using dojo code. But I don't what's the problem in the following code, and how can I print the output to the console?
<html>
<head>
<script type = "text/javascript" src = "dojo/dojo.js" data-dojo-config = "async: true, isDebug : true" >
</script>
</head>
<body>
<h1 id = "greeting">Hello</h1>
<script>
define(["dojo/dom"],function(dom) {
var Twitter = declare(null, {username:"defaultusername",
say :function(msg)
{
console.log("Hello "+msg);
}
});
var myInstance = new Twitter();
myInstance.say("Dojo");
});
</script>
</body>
</html>
Use require instead of define:
<script>
require(["dojo/dom", "dojo/_base/declare"], function(dom, declare) {
var Twitter = declare(null, {
username: "defaultusername",
say :function(msg) {
console.log("Hello "+msg);
}
});
var myInstance = new Twitter();
myInstance.say("Dojo");
});
</script>
Console works, but your code inside callback function in declare is not being executed until you require it.
You cannot define in inline script code, that is meant to be a class define, put in the topmost line of a class-file, meaning define maps the filename to the returned value of its function.
This means, if you have
dojo_toolkit /
dojo/
dijit/
dojox/
libs/
myWidgets/
foo.js
And foo.js reads
define(["dijit._Widget"], function(adijit) {
return declare("libs.myWidgets.foo", [adijit], function() {
say: function(msg) { console.log(msg); }
});
});
Then a new module is registered, called libs / myWidgets / foo. You should make sure that the returned declare's declaredClass inside each define matches the file hierachy.
That being said, reason why define does not work for you is the explaination above. It is inline and has no src to guess the declaredClass name from. Rewrite your code to define("aTwitterLogger", [":
define("aTwitterLogger", ["dojo/_base/declare", "dojo/dom"],function(declare, dom) {
var Twitter = declare(null, {
username:"defaultusername",
say :function(msg)
{
console.log("Hello "+msg);
}
});
var myInstance = new Twitter();
myInstance.say("Dojo");
});
Related
I found a codepen.io example (https://codepen.io/srees/pen/pgVLbm) I want to play around with in the context of a .vue app I'm working on, and I need some help transferring the <script> section over.
I copied the HTML chunk into a <template> and the CSS into a <style>. I've confirmed the .vue file works within the broader context (content loads when the <script> is commented out. I also placed <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" /> immediately before my <script> to resolve the $ not defined error I was getting. Is there something I need to import into App.vue or into this particular .vue file? When I leave <script> uncommented, I simply get a blank page loaded.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" />
<script>
var hidWidth;
var scrollBarWidths = 40;
...
you could define a method like this:
methods: {
renderStuff: function () {
var hidWidth;
var scrollBarWidths = 40;
var widthOfList = function(){
var itemsWidth = 0;
$('.list li').each(function(){
var itemWidth = $(this).outerWidth();
itemsWidth+=itemWidth;
});
return itemsWidth;
};
var widthOfHidden = function(){
return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-
scrollBarWidths;
};
var getLeftPosi = function(){
return $('.list').position().left;
};
var reAdjust = function(){
if (($('.wrapper').outerWidth()) < widthOfList()) {
$('.scroller-right').show();
}
else {
$('.scroller-right').hide();
}
if (getLeftPosi()<0) {
$('.scroller-left').show();
}
else {
$('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');
$('.scroller-left').hide();
}
}
reAdjust();
$(window).on('resize',function(e){
reAdjust();
});
$('.scroller-right').click(function() {
$('.scroller-left').fadeIn('slow');
$('.scroller-right').fadeOut('slow');
$('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){
});
});
$('.scroller-left').click(function() {
$('.scroller-right').fadeIn('slow');
$('.scroller-left').fadeOut('slow');
$('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){
});
});
}
}
and run the method on mount like this:
mounted() {
this.renderStuff();
}
Side note, var is not ideal in this day and age. Recommend converting these to let.
The plugin Vue-Select.
What I was trying to do is, make a search-select-dropdown input based on database.
So here's my SQL first named Ms_Location.
id_Loc | name_Loc
LOC0001 | Indonesia
LOC0002 | China
LOC0003 | America
My index.php
<!DOCTYPE html>
<html>
<head>
</head
<body>
<div class="form-group">
<label for="lokasi_id" class="control-label required"><strong>Lokasi</strong></label>
<v-select :options="lokasi_list" placeholder='Type location..'></v-select>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script src="https://unpkg.com/vue-select#latest"></script>
Vue.component('v-select', VueSelect.VueSelect);
var app = new Vue ({
el: '#app',
data: {
lokasi_select: '',
lokasi_list: [],
},
// End of data
computed: {
get_lokasi() {
var list_loc = new Array();
list_loc = <?php include('receive_lokasi.php') ?>;
for(var i=0; i<list_loc.length; i++) {
var pushLoc = {
label: list_loc[i][1], value: list_loc[i][0]
}
this.lokasi_list.push(pushLoc);
}
return list_loc[0][1];
}
}
})
});
</script>
</body>
</html>
And this is my receive_lokasi.php
<?php
include ('koneksi.php');
$condition = "1";
if(isset($_GET['userid'])){
$condition = " id=".$_GET['userid'];
}
$sqltran = mysqli_query($con, "SELECT id_Loc, name_Loc FROM ms_location")or die(mysqli_error($con));
$response = array();
while ($rowList = mysqli_fetch_array($sqltran,MYSQLI_NUM)) {
$response[] = $rowList;
}
echo json_encode($response);
mysqli_close($con);
?>
However, I can't seem to get the option shown. This only happens after I make the get_lokasi(). So the mistake is probably there? Or perhaps I was missing something.
I've tried to print the lokasi_list somewhere, and yes, the value is there, but not shown in the dropdown bar.
Also, I'm new to Vue, so any help would be good. Thanks!
Nevermind..
My mistake, I didn't notice my receive_lokasi.php code
Instead of using MYSQLI_NUM
while ($rowList = mysqli_fetch_array($sqltran,MYSQLI_NUM)) {
$response[] = $rowList;
}
I should be using MYSQLI_ASSOC, as documented in here.
while ($rowList = mysqli_fetch_array($sqltran,**MYSQLI_ASSOC**)) {
$response[] = $rowList;
}
After that change this
<v-select :options="lokasi_list" placeholder='Type location..'></v-select>
To this
<v-select label='nama_Location' :options="lokasi_list" placeholder='Type location..'></v-select>
After that, everything loads fine.
Vue's computed properties aren't normally used to populate vue data attributes, they normally take one or more data attributes and combine them into something different for the template to use.
In your code you've tried to populate the vue data attribute 'lokasi_list' in the computed property 'get_lokasi', but you never call 'get_lokasi' anywhere in the template so lokasi_list remains empty.
Another approach to this sort of situation is to use a vue method to fetch data from the php backend via an ajax call with something like axios, and you'd normally use that method in the vue app's created life cycle event to get the data asap.
e.g.
<script>
Vue.component('v-select', VueSelect.VueSelect);
var app = new Vue({
el: '#app',
data: {
lokasi_select: '',
lokasi_list: [],
},
created: function() {
this.fetchLocations();
},
methods: {
fetchLocations: function() {
axios.get('/api/locations-end-point')
.then((response) => {
this.lokasi_list = response.data //might need to change this to match how your php is returning the json
})
.catch((error) => {
//handle the error
})
}
}
});
</script>
Sorry to mention this, but in your php you've got:
if(isset($_GET['userid'])){
$condition = " id=".$_GET['userid'];
}
That looks like you were planning to use it as part of your sql, but it would have been vulnerable to SQL injection attacks, sorry If I'm pointing out something you already knew.
I am new to dojo and I am trying to integrate orion editor(build downloaded from http://download.eclipse.org/orion/) in dojo but I get the error "orion" is undefined.
The code looks like below:
HTML file for placing editor
<div data-dojo-attach-point="embeddedEditor"></div>
A JS file
require([
"dojo/_base/declare",
"dijit/_WidgetBase",
"editorBuild/code_edit/built-codeEdit-amd",
"dijit/_TemplatedMixin",
"dojo/text!orionEditor.html"
], function(declare,_WidgetBase,
codeEditorAmd, _TemplatedMixin,template){
declare("orionEditor", [_WidgetBase,
_TemplatedMixin], {
templateString: template,
postCreate: function(){
var codeEdit = new orion.codeEdit();
var contents = '';
codeEdit.create({parent: this.embeddedEditor, contentType: "application/javascript", contents: contents}).
then(function(editorViewer) {
if (editorViewer.settings) {
editorViewer.settings.contentAssistAutoTrigger = true;
editorViewer.settings.showOccurrences = true;
}
});
}
});
});
The orion editor build is placed in editorBuild folder.
Standalone orion works fine - http://libingw.github.io/OrionCodeEdit/
When integrating with dojo I am not sure why orion is undefined.
Any help would be much appreciated.
If you want using orion name in amd module then it has to be defined as parameter in function passed as require's callback.
Check this guide - it has 2 solutions for using orion with amd modules.
Option 1 - define bundles once and use shorter name in all modules you need them:
require.config({
bundles: {
"editorBuild/code_edit/built-codeEdit-amd": ["orion/codeEdit", "orion/Deferred"]
}
});
require(
["orion/codeEdit", "orion/Deferred"],
function(mCodeEdit, Deferred) {
var codeEdit = new mCodeEdit();
var contents = 'var foo = "bar";';
codeEdit.create({parent: "embeddedEditor"/*editor parent node id*/})
.then(function(editorViewer) {
editorViewer.setContents(contents, "application/javascript");
});
});
Option 2 - nested require:
require(["editorBuild/code_edit/built-codeEdit-amd"], function() {
require(["orion/codeEdit", "orion/Deferred"], function(mCodeEdit, Deferred) {
var codeEdit = new mCodeEdit();
var contents = 'var foo = "bar";';
codeEdit.create({parent: "embeddedEditor"/*editor parent node id*/})
.then(function(editorViewer) {
editorViewer.setContents(contents, "application/javascript");
});
});
});
Note: you can replace mCodeEdit with any unique name (That wouldn't shadow other objects/modules)
I tried this code:
<html>
<head>
</head>
<body>
<video src="" id="video1"></video>
<video src="" id="video2"></video>
<textarea id="lesdp"></textarea><p id="btn">Activer</p>
</body>
<script>
navigator.getUserMedia({audio:true,video:true}, function(stream) {
var video1 = document.querySelector("#video1")
video1.src = window.URL.createObjectURL(stream)
video1.play()
}, function() {
})
var pc = new RTCPeerConnection()
pc.createOffer(function success(offer) {
var sdp = offer;
alert(JSON.stringify(sdp))
}, function error() {
})
var btn = document.querySelector("#btn");
btn.addEventListener('click', function() {
console.log("clicked")
var lesdp = JSON.parse(document.querySelector('#lesdp').value);
pc.setRemoteDescription(new RTCSessionDescription(lesdp), function(streamremote) {
var video2 = document.querySelector("#video2");
video2.srcObject = window.URL.createObjectURL(streamremote)
video2.play()
}, function() {
})
})
</script>
</html>
You can test it here: https://matr.fr/webrtc.html
Open a navigator, copy the popup offer string object, paste it into the textarea, then click "Activer" and look at the error in the console.
So when I click on the "Activer" button, it has this error:
Failed to execute 'createObjectURL' on 'URL': No function was found
that matched the signature provided.
Please help me. I use Google Chrome to test it.
You're calling window.URL.createObjectURL(undefined) which produces that error in Chrome.
streamremote is undefined because setRemoteDescription resolves with nothing by design.
You've only got about half the code needed to do a cut'n'paste WebRTC demo. Compare here.
here is my code
var parser = window.less.Parser();
try{
parser.parse(aztp_css_editor.getValue(), function(error, result){
if(!error){
alert(result.toCSS());
}else{
alert(error);
}
});
}catch(error){
alert(error);
}
I have a mixins less file here http://lessprefixer.com/ for shorthand css3 prefix, how I setup it into my parse less code?
I think you should better the less.render function, see also: http://lesscss.org/usage/#programmatic-usage.
But indeed you can use the #import directive as already made clear by #seven-phases-max.
Example:
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>
<script>
less.render('#import "test.less"; p {color: #red; }', {'include-path': 'test/'})
.then(function(output) {
// output.css = string of css
// output.map = string of sourcemap
// output.imports = array of string filenames of the imports referenced
console.log(output.css);
},
function(error) {
});
</script>
The above compiles well (results in output.css) when test.less is available in the same path as the html which contains the code. You can also use a path in your import, '#import "path/test.less"; I did not found that setting include-path has any effect.