dojo aspect not defined, dont understand why - dojo

I want to update from dojo 1.7 to 1.8.3 so I have to replace the dojo.connect command.
switch:
< div id="universalPushSwitch" data-dojo-type="dojox.mobile.Switch" style="float:right" class="mblSwRoundShape1"></div>
Now I have:
dojo.require("dijit/registry");
dojo.require("dojo/ready");
dojo.require("dojox/mobile/ListItem");
dojo.require("dojo/aspect");
dojo.ready(function(){
dojo.aspect.after(dijit.registry.byId("universalPushSwitch"), "onStateChanged",
function(newState){
alert(newState);
}
)});
Firebug says: "aspect is not defined"
PS: I know I don't use the new AMD loader. This is an old project and I am also new to all the dojo stuff. A simple translate from dojo.require("x");dojo.require("y"); to require(["x","y"], function (x,y){...} doesn't work for me so there is still the old style require.

Try using:
dojo.aspect.after(...);
instead of
aspect.after(...);
And do not stop at the next function ! :-)
If that doesn't work at once, try loading aspect the global way (with a dot, not a slash):
dojo.require("dojo.aspect");
It also could be possible, that the old dojo is not compatible with "/" and that it only works with dots !
Source:
http://livedocs.dojotoolkit.org/dojo/require
Edit
Here is a working fiddle based on your fiddle:
http://jsfiddle.net/9Xdv2/
The main problem with your code was that you did not parse the html. dojo parser converts some specific html to "dojo javascript objects" ! You use that kind of html a lot ! You should have done a:
dojox.mobile.parser.parse();
Everything is in the jsfiddle !

Since you are using dojo 1.8.3 and have been using dojo 1.7, why don't you use the AMD syntax instead of the pre-1.7 ?
You would do something like :
<div id="universalPushSwitch" data-dojo-type="dojox/mobile/Switch" style="float:right" class="mblSwRoundShape1"></div>
And in your js :
require(["dijit/registry",
"dojox/mobile/ListItem",
"dojo/aspect",
"dojo/parser",
"dojo/domReady!"
], function(registry, ListItem, aspect, parser){
parser.parse().then(function(instances){
aspect.after(registry.byId("universalPushSwitch"), "onStateChanged",
function(newState){
alert(newState);
});
});
});

Related

Nuxt.js ignore (Is there any way to ignore original tags)

I am creating a web page using Nuxt.js. (Static file built with the
nuxt generate command)
As a requirement,I need to write the original tag in the static file
that I built. The original tag is for displaying the data obtained
on the server side. Writing an original tag in a vue file naturally
gives an error.
For example, in the image below,
Is there a way to ignore original tags in the vue file?
vue file(example)
// disabled-next-line
{{^ server-side-display-data}}
<button> button </ button>
// disabled-next-line
{{/ server-side-display-data}}
Build file(example)
{{^ server-side-display-data}}
<button> button </ button>
{{/ server-side-display-data}}
Tried
It seemed possible to ignore certain "files" like below, but I haven't found a way to ignore certain "tags"
https://ja.nuxtjs.org/api/configuration-ignore/
Please help
I had the same issue and was looking for a solution... you can try with this solution i've used.
in your nuxt.config.js
...
vue: {
config: {
ignoredElements: [string or regexp],
},
},
...
see this documentation for more details

Use dust.js in common with vue.js

How can I use vue.js with the dust template engine? Both are using {{}} as placeholders, are there any options to say dust: Hey, this part is especially for vue?
I got no idea since I haven't had found anything in the documentations.
https://vuejs.org/api/#delimiters
Vue.config.delimiters = ['!v', 'v!']
You can set the delimiters for Vue to whatever you'd like to avoid conflict. Also see Vue.config.unsafeDelimiters - https://vuejs.org/api/#unsafeDelimiters
The converse answer for Dust is that you can wrap a block in {` tags to tell Dust not to parse that block.
context = { "dust": "DUST!", "vue": "error" }
{dust} says {` hello {vue}! `}
will render to
DUST! says hello {vue}!

Geb changing an attribute value

I want to know what is the correct way to change any attribute value of an element in geb (selenium).
For example, I have this element:
static content = {
radioSelect(wait: true) { $('input[name=rr]')}
}
Now I want to set any attribute. I did not found a good method, I use this workaround:
(driver as JavascriptExecutor).executeScript( "document.getElementsByName('rr')[0].setAttribute('checked', true)" )
Is there another way? Like radioSelect.setAttribute?
Use the jQuery integration offered by Geb:
radioSelect.jquery.attr("checked", true)
This is the equivalent of
js.exec 'jQuery("input[name=rr]").attr("checked", true)'
But be careful:
The jQuery integration only works when the pages you are working with
include jQuery, Geb does not install it in the page for you. The
minimum supported version of jQuery is 1.4.

Dojo attach point / byId returns undefined

I made a template and there is a <select dojotype="dijit.form.ComboBox" dojoAttachPoint="selectPageNumber" id="selectPageNumber">tag with id and dojoAttachPoint be "selectPageNumber". I want to populate it with options upon create so I add some code to the postCreate function:
var select = dijit.byId("selectPageNumber");
or
var select = this.selectPageNumber;
but I always have select being undefined.
What am I doing wrong?
UPD:
The problem with element has been solved spontaneously and I didn't got the solution. I used neither dojo.addOnLoad nor widgetsInTemplate : true, it just started to work. But I have found the same problem again: when I added another tag I can't get it!
HTML:
<select class="ctrl2" dojotype="dijit.form.ComboBox" dojoAttachPoint="selectPageNumber" id="selectPageNumber">
</select>
<select class="ctrl2" dojotype="dijit.form.ComboBox" dojoAttachPoint="selectPageNumber2" id="selectPageNumber2">
</select>
widget:
alert(this.selectPageNumber);
alert(this.selectPageNumber2);
first alert shows that this.selectPageNumber is a valid object and the this.selectPageNumber2 is null.
widgetsInTemplate is set to false.
all the code is within dojo.addOnLoad()
dojo.require() is valid
I am using IBM Rational Application Developer (if it is essential).
WHY it is so different?
Based on your syntax, I am assuming that you are using 1.6. Your question mentions template and postCreate, so i am assuming that you have created a widget that acts as a composite (widgets in the template).
Assuming 1.6, in your widget, have you set the widgetsInTemplate property to true. This will tell the parser that your template has widgets that need to be parsed when creating the widget.
http://dojotoolkit.org/documentation/tutorials/1.6/templated/
I would remove the id from the select. Having the id means that you can only instantiate your widget once per page. You should use this.selectPageNumber within your widget to access the select widget.
If you are using 1.7 or greater, instead of setting the widgets widgetsInTemplate property, you should use the dijit._WidgetsInTemplateMixin mixin.
http://dojotoolkit.org/reference-guide/1.8/dijit/_WidgetsInTemplateMixin.html
Depending on when dijit.byId() is being called, the widget may not have been created yet. Try using dojo.addOnLoad()
dojo.addOnLoad(function() {
var select = dijit.byId("selectPageNumber");
});
I came close to the solution: it seems like there is a some sort of RAD "caching" that doesn't respond to changes made in html code.
Ways to purge the workspace environment with RAD (based on Eclipse) might be a solution.

JUI Autocomplete html-encoded suggestions

jQuery UI starting from version 1.8.4 html-encodes Autocomplete suggestions (according to this issue).
This became a problem for me now. I used to theme the output for the suggestions, but now (if I use version 1.8.4 or higher) Autocomplete just html-encodes my theming. All tags like <b>, <span> are being printed to the user instead of displaying the actual styling.
So the suggestions now look like:
<b>su<b>suggestion
another <b>su<b>suggestion
instead of:
suggestion
another suggesion
I've read about custom data, but I use Yii framework and the output is being generated from certain actions (PHP code).
So, how do I theme the output now?
Thank you!
Better use a HTML plugin
You can use open function from jQuery UI to replace the encoded text.
Here's an example:
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'name'=>"bug",
'source'=>$this->createUrl('/autocomplete'),
// additional javascript options for the autocomplete plugin
'options'=>array(
'open'=> 'js:function(event, ui){
$("ul.ui-autocomplete li a").each(function(){
var htmlString = $(this).html().replace(/</g, "<");
htmlString = htmlString.replace(/>/g, ">");
$(this).html(htmlString);
});
}'
),
));