dojo.connect no longer working with forms? - dojo

I was using something like this before Dojo 1.8, but now I get a "node not found" error :
<form dojoType="dijit.form.Form">
Search :
<input type="text" dojoType="dijit.form.TextBox" name="searcht" id="searcht">
<script type="dojo/connect" event="onSubmit" args="evt">
my_function();
dojo.stopEvent(evt);
</script>
</form>
I noticed that if I remove the search text box the code is working.
How can I rewrite the above to work with 1.8, and also please be so kind to point me in the right direction to read about this and understand why this is happening.
I should also note that I'm using the same type of code for contentpanes, and the code works fine there.
Thanks,
Noru

In dojo 1.8 dojo.connect is dojo/on. First you have to load the modules you are going to use and parse the file to transform dijit elements.
<script>
require([
"dojo/parser",
"dijit/form/Form",
"dijit/form/TextBox",
"dijit/form/Button"
], function(parser) {
parser.parse();
});
</script>
Second, declare the dijit properties and funcionality inside html tags:
<div data-dojo-type="dijit/form/Form" id="search_form">
<script type="dojo/on" data-dojo-event="submit" data-dojo-args="evt">
evt.stopPropagation();
alert( "my_function()" );
</script>
<label for="my_textbox">Search:</label>
<input type="text" data-dojo-type="dijit/form/TextBox" id="my_textbox"/>
<button data-dojo-type="dijit/form/Button" id="my_button" type="submit">
Submit
</button>
</div>
I used a declaratively example inserting dijit options inside the html code. There is other way using only javascript. Take a look in the official documentation: http://dojotoolkit.org/reference-guide/1.8/dijit/index.html

Related

why is Vuejs disabling the ability of a media query to add and remove component

Given i have this
//mycompoent.js
Vue.component('main-nav',{
template:`
<div id="main-nav">
</div>
`
});
Vue.component('menu-nav',{
template:`
<div id="menu-nav">
</div>
`
});
new Vue({
}).$mount("#nav-app");
Then in my CSS I have the following
//style.css
#menu-nav{display:none;}
#media (max-width:840px){
#main-nav{display:none;}
#menu-nav{display:block;}
}
//index.html
<div id="nav-app">
<main-nav />
<menu-nav />
</div>
When I resize the browser less than 840px the menu-nav component never appears; I don't know what I have done wrong.
If you're testing this directly in the browser (without a compile step), you can't use the self-closing form <main-nav /> for components. Try the following:
<div id="nav-app">
<main-nav></main-nav>
<menu-nav></menu-nav>
</div>

How to use Masonry grid layout in vuejs2(with bootstrap) without jquery?

I want to display tweets like card-columns in my page.
I am not able to use Masonry in my vue webpack template. i have used tried it through npm & CDN but not getting grid properly.
in main.js
import Tweet from 'vue-tweet-embed';
import Masonry from 'masonry-layout';
in html
<head>
//....
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
</head>
in template
<div class="grid">
<div class="grid-item" v-for="i in topics">
<Tweet class="" :id="i.tweets.quoted_status_id_str" :options="{ theme: 'light' }" error-message-class="text-center text-muted tweet_err"><div class="text-center text-muted card" style="margin-top:12px;min-width:30px;"><i class="ion-social-twitter"></i>Loading tweet...</div></Tweet>
</div>
</div>
I have used vue-masonry.
(We need to take care of redraw method this.$redrawVueMasonry(); on update or change.)

Select2 Not displaying properly

I have a Bootstrap Modal in which I am trying to display a select2 control. The control shows up and it works perfectly well but it doesn't display properly. I have attached a screenshot of how it is rendering as. I also copied and pasted the exact same code to a regular page and that is displaying properly. I inspected the border property as well as various other css properties but am unable to determine why it is displaying like that. Can anyone give me some pointers on how I can solve this issue?
JsFiddle showing the issue
Note: Please maximize the width of the result window to see the issue in action.
Html:
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Country</label>
<div class="col-sm-6">
<select class="js-example-basic-single form-control">
<option></option>
<option>Canada</option>
<option>Mexico</option>
<option>United States</option>
</select>
</div>
</div>
</form>
Javascript:
$('.js-example-basic-single').select2({
placeholder: "Select country..."
});
EDIT:
I would also like to point out there is a dependency to the select2-bootstrap library. If I use just the select2 library, I am not witnessing this issue.

Dojo loading templated widget into data-dojo-type

I've created a very simple HTML templated widget.
<div class="tool">
<a href="" id="freehand">
<i class="flaticon-writing9"></i>
</a>
</div>
<div class="tool">
<a href="" id="polygon">
<i class="flaticon-constellation"></i>
</a>
</div>
My widget declaration looks like this:
define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!./templates/DrawingToolsWidget.html",
"dojo/parser",
"dojo/ready"
],
function(declare, _WidgetBase, _TemplatedMixin, template, parser, ready) {
return declare("DrawingToolsWidget",[_WidgetBase, _TemplatedMixin], {
templateString: template,
constructor: function() {
console.log(this);
}
});
ready(function(){
parser.parse();
});
}
);
I try to attach it to a point in my main DOM with a data-dojo-type attribute:
<div id="drawing-tools-container" data-dojo-type="DrawingToolsWidget"></div>
But I keep getting a generic dojo/parser::parse() error Error {} which is completely useless for debugging.
My directory structure is: /index.html(main DOM) /app/DrawingToolWidget/templates/DrawingToolsWidget.html(template) /app/DrawingToolWidget/DrawingToolWidget.js(declaration)
I've also tried to attach "app/DrawingToolWidget/DrawingToolWidget" just in case it wanted the path to the widget declaration. Nope.
What am I doing wrong? Why is it so hard just to attach a fragment of markup to the DOM?
Your template is invalid because you can only have 1 root element. I'm not sure if that's the main problem, but this might solve certain things. A quote from the documentation:
Note that when you define a template, it can only have one root
node definition ( just like with XML documents). Multiple nodes at the
top level is not allowed.
The article: http://dojotoolkit.org/documentation/tutorials/1.9/templated/
A working template would be:
<div>
<div class="tool">
<a href="" id="freehand">
<i class="flaticon-writing9"></i>
</a>
</div>
<div class="tool">
<a href="" id="polygon">
<i class="flaticon-constellation"></i>
</a>
</div>
</div>
The working example can be found here.
About your debugging problem, do you use Google Chrome? When encountering an error, you should try to close and open the developer tools/console, if you do that, there should be a small arrow next to the Error, for example:
As you can see here, there are 2 arrows, the left one gives you the stacktrace, while the right one (almost at the end of the error line), will give you detailed information about the error (if you click/expand it).

dijit widgets inside a custom widget -- handling their events

JS:
define(["dojo/_base/declare","dojo/dom",
"dijit/_Widget", "dijit/_TemplatedMixin",
"dojo/text!./templates/MainViewWidget.html",
"dijit/layout/TabContainer", "dijit/layout/ContentPane","dijit/layout/BorderContainer","dijit/form/TextBox", "dijit/layout/AccordionContainer"],
function(declare, dom, _Widget, _TemplatedMixin, template){
return declare("package.MainViewWidget", [_Widget, _TemplatedMixin], {
widgetsInTemplate: true,
templateString: template,
constructor: function(){
},
startup: function(){
},
search: function(evt){
alert('hi');
alert(evt);
}
});
});
templates/MainViewWidget.html:
<div class="mainContainer">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" style="width:100%;height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left', splitter:true">
<h2>List of trips</h2>
<br />
<input type="text" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeHolder:'Search...'" data-dojo-attach-event="onchange:'search'"/>
<br />
</div>
<div data-dojo-type="dijit.layout.TabContainer" data-dojo-attach-point="tabContainerDiv" data-dojo-props="region: 'center', tabPosition: 'top', tabStrip:'true', style:'width:80%;height:100%'">
<div data-dojo-type="dijit.layout.ContentPane" title="Summary" data-dojo-props="selected:'true', title:'About'">Welcome. Navigate through the Left pane.</div>
</div>
</div>
</div>
The thing is, I want to capture events on the TextBox. I was looking to do this with just markup as you can see from data-dojo-attach-event="onchange:'search'". I have tried many variations of this and I can't get it to work. Basically what I want is to define a function in JS and attach it as handler in the markup. Please help.
This isn't supported, sadly. I just spent about two hours discovering this. Any node in your template with a data-dojo-type attribute is ignored by _TemplatedMixin._attachTemplateNodes (see line 177). In other words, data-dojo-attach-event will only bind to plain DOM nodes (not Dijits).
This at least applies to v1.8. The attach processing is different in v1.9 (there's an _AttachMixin), so it might work there.
Try:
data-dojo-attach-event="onChange:search"
Camelcase onChange, and no quotes around search.