I have problems with rendering a datagrid in my custom widget.
I was able to pinpoint the problem to this: datagrids that are not a direct child of the body do do not render correctly.
Showcase:
<!DOCTYPE html>
<html>
<head>
<title>Problems with datagrid</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css" media="screen">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/grid/resources/claroGrid.css">
</head>
<body class="claro">
<div id="outer"> </div>
<div><div id="inner"> </div></div>
<script>
dojoConfig = {
isDebug: true,
async: true,
has: {
"dojo-firebug": true,
"dojo-debug-messages": true
}
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" data-dojo-config="async: true"></script>
<script>
require([
"dojo/parser",
"dojo/ready",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojox/grid/DataGrid"
], function(parser, ready, Memory, ObjectStore, DataGrid){
createOuterGrid = function(){
var data = [{id:12,name:'outer'},{id:13,name:'blabla'}];
var dataStore = new ObjectStore({ objectStore:new Memory({ data:data }) });
var grid = new DataGrid({
store:dataStore,
items:data,
structure:[
{name:"ID", field:"id", width:"20%"},
{name:"Name", field:"name", width:"80%"}
]
}, "outer");
grid.startup();
};
createInnerGrid = function(){
var data = [{id:12,name:'inner'},{id:13,name:'blabla'}];
var dataStore = new ObjectStore({ objectStore:new Memory({ data:data }) });
var grid = new DataGrid({
store:dataStore,
items:data,
structure:[
{name:"ID", field:"id", width:"20%"},
{name:"Name", field:"name", width:"80%"}
]
}, "inner");
grid.startup();
};
parser.parse();
ready(function(){
createOuterGrid();
createInnerGrid();
});
});
</script>
</body>
</html>
Is there a way to make this work? Should I log it somewhere ?
I originally posted my question here:
dojo stackcontainer contains custom widget that uses datagrid, but dategrid not showing up
but then I didn't know that it was caused by the fact that a datagrid should be a direct child of the body.
Grid need a parent height. Is documented somewhere.
Set a height for inner Div parent will do the magic.
This is just so happen the parent for outter div is body.
Related
I'm trying to use jsPDF with Vue but I get a ReferenceError: jsPDF is not defined. See the snippet :
let jsPrint = () => {
const doc = new jsPDF()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<button onclick="jsPrint()">
print
</button>
The script is linked in the head tag :
<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><?= $site->title() ?> - <?= $page->title() ?></title>
<link rel="stylesheet" href="<?= url('assets') ?>/css/style.css">
<!--========== JSPDF ==========-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<!--========== VUE ==========-->
<!-- development version, includes helpful console warnings -->
<script src="<?= url('assets') ?>/js/libs/vue.js"></script>
<script src="<?= url('assets') ?>/js/app.js" type="module" defer></script>
</head>
Then in a component, I have a method that should be triggered on click on a button :
exportSimple: function() {
const doc = new jsPDF()
// const target = document.querySelector('#dialog-export-content')
// doc.html(target, {
// callback: function(doc) {
// doc.save()
// },
// x: 10,
// y: 10
// })
}
But i throws an error.
I tried alternative methods to link the library : local, npm, other sources like jspdf.es.min.js. Nothing works.
Any idea ?
Using CDN the jsPDF object is available as property of jspdf which is available globally :
const { jsPDF } = jspdf
let print = () => {
const doc = new jsPDF()
}
I am learning Vue.js and would like to implement the bulma-calendar module in my app. I came this far, but the calendar is somehow not updating, when I am selecting a new Date.
Sorry if I can't specify the problem more, as I said declarative programming is very new to me.
The template I got from the official website of bulma-calendar: https://demo.creativebulma.net/components/calendar/v6//#integration
Vue.component("comp-calendar", {
template: `
<div>
<input ref="calendarTrigger" type="date">
</div>
`,
data: function () {
return {
date: new Date(),
};
},
mounted: function () {
const options = {
type: "date",
color: "danger",
dateFormat: "DD-MM-YYYY",
startDate: this.date,
displayMode: "inline",
};
const calendar = bulmaCalendar.attach(
this.$refs.calendarTrigger,
options
)[0];
calendar.on("date:selected", (e) => (this.date = e.date));
},
});
var app = new Vue({
el: "#app",
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- import bulma -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css">
<!-- import bulma-calendar -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-calendar#6.0.9/dist/css/bulma-calendar.min.css">
</head>
<body>
<div id="app">
<comp-calendar></comp-calendar>
</div>
<!-- import bulma-calendar -->
<script src="https://cdn.jsdelivr.net/npm/bulma-calendar#6.0.9/dist/js/bulma-calendar.min.js"></script>
<!-- import https://vuejs.org -->
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12/dist/vue.js"></script>
<script src="src/js/test.js"></script>
</body>
Any help? Thanks
EDIT: Did not help:
[...]
<input type="date">
[...]
const calendar = bulmaCalendar.attach('[type="date"]', options)[0];
calendar.on("select", (e) => (this.date = e.date))
Probably a bug in 6.0.9. Working with 6.0.0 (according to documentation here: https://creativebulma.net/product/calendar/demo) worked fine.
calendar.on("select", (e) => (this.date = e.date))
here this.date is incorect. this "this" is calendar object not the vue object
I am trying to use Quill editor with dojo framework, but its not working. The editor is not shown over there. Any help in this regard will be highly appreciated.
<html>
<head>
<link rel="stylesheet" href="http://cdn.quilljs.com/0.16.0/quill.snow.css" />
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/dojo/1.7.0/dojo/dojo.js"
data-dojo-config="async: true, packages: [
{ name: 'quill', location: 'http://cdn.quilljs.com/0.16.0/', main: 'quill' }
]" />
</head>
<body>
<div id="editor">
Editor in chief!
</div>
<script type="text/javascript">
define.amd.quill = true;
require(["quill"], function(quill){
var editor = new Quill("#editor");
});
</script>
</body>
I'm not familiar with Dojo 1.7, so opted for 1.10.4.
I also had XSS errors (something about an iframe) with Quill version 0.16, so went with the latest 1.2.6 version.
The below seems to work fine.
require(["dojo/ready", "Quill"], function(ready, Quill){
ready(function(){
var editor = new Quill("#editor", { theme: 'snow' })
})
})
<script>
var dojoConfig = {
async: true,
packages: [{ name: 'Quill', location: '//cdn.quilljs.com/1.2.6', main: 'quill' }]
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//cdn.quilljs.com/1.2.6/quill.snow.css" rel="stylesheet" />
<div id="editor">Editor in chief!</div>
Can you please take a look at this code and let me why I am not able to add a Package dbootstrap into the dojo toolkit?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body class='dbootstrap'>
<div class="jumbotron">
<h1 id="greeting">app</h1>
</div>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
var dojoConfig = {
packages: [
{
location: '/dbootstrap',
name: 'dbootstrap'
}
]
};
require([
'dbootstrap',
'dojo/dom',
'dojo/dom-construct'
], function(dbootstrap, dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<i> Test!</i>', greetingNode);
});
</script>
</body>
</html>
As you can see in this image I already added the dbootstrap folder into the root directory
but I am getting these errors:
The dojoConfig need to be declared before including dojo.js, so, this should work for you
<script type="text/javascript">
var dojoConfig = {
packages: [
{
location: '/dbootstrap',
name: 'dbootstrap'
}
]
};
</script>
<!-- load Dojo -->
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script type="text/javascript">
require([
'dbootstrap',
'dojo/dom',
'dojo/dom-construct'
], function(dbootstrap, dom, domConstruct) {
var greetingNode = dom.byId('nodeId');
domConstruct.place('<i> Test!</i>', greetingNode);
});
</script>
I am not a jQuery person, wish I was. I have fiddled with no conflict, but it still lets only one of the scripts work at a time, not both. I am using a scroll to jquery script and colorbox (like lightbox) Here is my code. Any help is awesome.
<!--jquery scroll-->
<script src="js_scroll/jquery.js"></script>
<script src="js_scroll/jquery.scrollTo.js"></script>
<script src="js_scroll/jquery.nav.js"></script>
<script>
$(document).ready(function() {$('#nav').onePageNav();});
</script>
<!--colorbox-->
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
</body>
If you want to load multiple jQuery libraries, this is the way.
<script src='jquery-1.3.2.js'></script>
<script>
var $j132 = jQuery.noConflict();
</script>
<script src='jquery-1.4.2.js'></script>
<script>
var $j142 = jQuery.noConflict();
</script>
now use $j132() for jQuery 1.3.2 operations and $j142() for jQuery 1.4.2
I had the same problem with ColorBox and ScrollBar I solved by using the
<script>var $jQuery171 = $.noConflict(true);</script> after my scroll bar java
the final results was
<!--colorbox-->
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
and then come the scroll bar java
<!--Scroll Plans-->
<link rel="stylesheet" type="text/css" href="../../../siteroots/aboutScroll/general.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>var $jQuery171 = $.noConflict(true);</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../../siteroots/aboutScroll/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="../../../siteroots/aboutScroll/facescroll.js"></script>
<script type="text/javascript">
jQuery(function(){ // on page DOM load
$('#demo1').alternateScroll();
})
</script>
<!--End Scroll Plans-->
I used the <script>var $jQuery171 = $.noConflict(true);</script> in the scroll Java only and it's working fine now.