dojo1.8 - tried to register but . . . already registered - building select widget - dojo

Hi I had a trouble figuring out where select's id is registered at attempted once more.
Possible causes:-
1) ParseOnload and Parser.parse() on the same page
2) Giving the same id to another new select
3) Registering the same select with new id
I could not figure what cause the select to registered twice.
...
...
<div id='main_bContainer' data-dojo-type='dijit/layout/BorderContainer' data-dojo-props='design:"sidebar"'>
<div id='paneA' class='cP_Left' data-dojo-type='dijit/layout/ContentPane' data-dojo-props='region:"left"'>
<div id='surfaceElement1' style='border:1px solid #ccc; margin-bottom:5px; width:317px; height:55px;'><!--these dimensions here in this line override the dimensions as set by createSurface function-->
<div id='node_meterSelect'></div>
</div>
<div id='surfaceElement2' style='border:1px solid #ccc; width:317px; height:200px;'><!--these dimensions here in this line override the dimensions as set by createSurface function-->
<div id='node_cardSelect'></div>
</div>
</div>
<div id='paneB' class='cP_Right' data-dojo-type='dijit/layout/ContentPane'data-dojo-props='region:"center"'>
<!--<div id='surfaceElement3' style='border:1px solid #ccc;'> <!--width:520px; height:400px;'><!--it's the size-->
<!--</div>-->
</div>
</div>
...
...
...
var meter_Select = new Select
({store:memoStore1,
style:{width:'140px'},
}, "node_meterSelect");
meter_Select.startup();
on(meter_Select, 'change', function(evt)
{
console.debug('Selected Card = '+ meter_Select.value);
request.post('listofcards.php',{data:{cardX : meter_Select.value},
handleAs:"json"}).then(function(response)
...
...
The error is "
Error: Tried to register widget with id==node_meterSelect but that id is already registered"
What could be the problem? please advise.. Thanks in advance.

i found your solution. You do not map all the require values to the right variables ! So registry and combobox are not mapped right ! you map "combobox" on "on".
Take a look at this jsfiddle:
http://jsfiddle.net/ejEGr/7/
Your function head with missing parameters:
function (parser, ready, dom, domConstruct, gfx, declare,
_WidgetBase, Memory, Select, ObjectStore, request, on)
After correction:
function (parser, ready, dom, domConstruct, gfx, declare,
_WidgetBase, Memory, Select, ObjectStore, request,box,registry, on)
So i had to add box & registry and now everything should work fine.

Here is a working jsfiddle based on your code:
http://jsfiddle.net/JxpRC/2/
Maybe you used the id somewhere else in your code ?
require(["dijit/form/Select",
"dojo/data/ObjectStore",
"dojo/store/Memory","dojo/domReady!"
], function(Select, ObjectStore, Memory){
var store1 = new Memory({
data: [
{ id: "foo", label: "Foo" },
{ id: "bar", label: "Bar" }
]
});
var os = new ObjectStore({ objectStore: store1 });
var meter_Select = new Select
({store:os,
style:{width:'140px'},
}, "node_meterSelect");
meter_Select.startup();
})

Related

Is it possible to query data while rendering and return its result

When below object is rendered I can do for example something like this:
<div v-for="(card, groupIndex) in cards" v-bind:key="card.id">
<div> {{cards[groupIndex].group.length}} </div>
</div>
This will give me the length of each group and render this in a div
With below object this will result in 2 divs of which the first will show 4
[
{
"id":"BdSxtZL8V4S576i2BTRs",
"group_name":"nameA",
"group":[{
"back":"blabla,
"delayed_till":{"nanoseconds":0,"seconds":1576729260},
"examples":[{
"answer":"blabla",
"example":"blabla"
}],
"front":"blabla"
},
{
"back":"blabla",
"delayed_till":{"nanoseconds":0,"seconds":1095337800},
"examples":[{
"answer":"blabla",
"example":"blabla"
}],
"front":"blabla"
},
{
"back":"blabla",
"delayed_till":{"nanoseconds":0,"seconds":1577219040},
"examples":[
],
"front":"blabla"
},
{
"back":"blabla",
"delayed_till":{"nanoseconds":0,"seconds":1577092680},
"examples":[{
"answer":"blabla",
"example":"blablao"
}],
"front":"blabla"
}]
},
{
"id":"UtKzLYBPygu6iWOb1KMt",
"group_name":"nameB",
"group":[
etc.etc.etc..............
]
}
]
I would like to be able to render the number of items per group for which the date has not been passed yet.
You can use your exact same logic here, and just use a function below and pass in the group which applies a filter to the object collection and uses the delayed_till.seconds property to determine the validity check, something like this:
<div v-for="(card, groupIndex) in cards" v-bind:key="card.id">
<div v-text="groupItemsNotDelayed(cards[groupIndex].group)"> </div>
</div>
Then make your function which performs the filter:
groupItemsNotDelayed(group) {
return group.filter((item) => item.delayed_till.seconds < Date.now()).length
}
By using Date.now() we can get the current time in UTC Epoch, and compare that against our item.delayed_till.seconds to determine if the delayed period has passed (it would have to be less than the current epoch timestamp).
Then we can just call .length on the filtered items to get the count.

How to insert a js array into html using innerHTML?

In order to build a more clean code, i would like to delete an unordered list from html file and insert instead a js array using innerHTML. The problem is that i am new to html/css/js and I have a lot of difficulties in typing the correct syntax and understanding the logic.
In my html file i had a div with id="listOfBeaches "containing a list with beaches. if i delete the ul and I try to insert instead a js array i don't get any result.
<div id="listOfBeaches">
<ul>
<li><h3>Horseshoe Bay</h3></li>
<li><h3>Trunk BAy</h3></li>
<li><h3>El Nido</h3></li>
<li><h3>Reethi Rah</h3></li>
<li><h3>Maundays Bay</h3></li>
</ul>
</div>
I try to replace this html code with the following js code
let beaches= [
{
name: 'Horseshoe Bay',
url: './Horseshoe.html',
},
{
nume: 'Trunk BAy',
url: './Trunk-bay.html',
},
{
name: 'El Nido',
url: './El-Nido.html'
},
{
name: 'Reethi Rah',
url: './Rheeti-Rah.html'
},
{
name: 'Maundays Bay',
url: './Maundays-BAy.html'
}
];
let myBeaches = '';
for (let i = 0; i < beaches.length; i++){
myBeaches = beaches[i].name;
}
document.getElementById('listOfBeaches').innerHTML(myBeaches);
The result should be a list of beaches at the top of my webpage
Can I get any help from you guys?
If you were to look at the output of document.getElementById('listOfBeaches').innnerHTML you would see that it would contain
<ul>
<li><h3>Horseshoe Bay</h3></li>
<li><h3>Trunk BAy</h3></li>
<li><h3>El Nido</h3></li>
<li><h3>Reethi Rah</h3></li>
<li><h3>Maundays Bay</h3></li>
</ul>
So as such, you'll need to build up a similar html entry if you want to replace it using the innerHtml method. You could do something as such:
https://jsfiddle.net/nshe1qL8/

Icon color shows same for all the icons in child component ionic4

I am using ionic 4 and i have a very strange issue. i have created a child components called social icons which is used to like or unlike ..etc. This child component will be called from parent component as shown below.
PARENT COMPONENT
<ion-card *ngFor="let creative of getArray">
<ion-card-header>
<social-icons [coll]="creative" (iconClicked)="updateUserReaction($event,creative?.id)"></social-icons><br>
</ion-card-header>
</ion-card>
Here i am calling child component within ngFor . Also i am passing creative obj to the child component.
creative obj :
{firstname: "Murali", description: "Photography of cute", nooflikes: 0, type: "creative", lastname: "Techwedge", …}
description: "Photography of cute"
elasticSearch_id: "creative_50"
file_type: "jpg"
filepath: "/documents/assets/Images/creative/IMG-20190310-WA0001_50.jpg"
firstname: "Murali"
id: 50
lastname: "Techwedge"
name: "Photography of cute"
noofcomments: 0
nooflikes: 0
noofshares: 0
noofunlikes: 2
resource_name: "IMG-20190310-WA0001_50.jpg"
socialIcons: Array(5)
0: {icon: "thumbs-up", operation: "cancellike", color: "danger"}
1: {icon: "thumbs-down", operation: "unlike"}
2: {icon: "eye", operation: "views"}
3: {icon: "text", operation: "comment"}
4: {icon: "settings", operation: "filter"}
length: 5
__proto__: Array(0)
timestamp: null
type: "creative"
user_id: 6
user_reaction: []
userobj: {id: 6, firstname: "Nikhil", lastname: "n", emailid: "nikhil#temp.org", password: "pass123", …}
views: 17
This is what creative obj data will be.
child component:
<ion-fab bottom>
<ion-grid>
<ion-row>
<ion-col size="2" *ngFor="let icon of coll?.socialIcons" >
<ion-card-title >
<ion-icon [color]="icon?.color" *ngIf="icon.icon != 'text' && icon.icon != 'settings'" [name]="icon.icon" (click)="clickedIcon(icon.operation)" style="font-size: 20px;"></ion-icon>
<ion-icon (click)="navigate()" *ngIf="icon.icon == 'text'" [name]="icon.icon" style="font-size: 20px;"></ion-icon>
<ion-icon *ngIf="icon.icon == 'settings'" [name]="icon.icon" style="font-size: 20px;" [routerLink]="['/filters/sharewith',{'id':coll?.id}]"></ion-icon>
</ion-card-title>
<ion-card-subtitle>
{{icon.value}}
</ion-card-subtitle>
</ion-col>
</ion-row>
</ion-grid>
</ion-fab>
Here in child component i am passing the color aattributes.
Below is the component.ts for child component.
ngOnInit() {
return new Promise((resolve, reject) => {
this.creativeServices.getCreativeReactions1(this.coll["id"],this.coll["userobj"]["id"]).pipe(map(res1=>res1.json())).subscribe(res1=>{
this.coll["user_reaction"] = res1;
this.coll["user_reaction"].map(element=>{
switch(element["latestReaction"]){
case 'like' :{
this.coll["socialIcons"][0]["color"] = "danger"
this.coll["socialIcons"][0]["operation"] = "cancellike"
break;
}
case "unlike":{
this.coll["socialIcons"][1]["color"] = "danger"
this.coll["socialIcons"][1]["operation"] = "cancelunlike"
break;
}
case "cancellike":{
this.coll["socialIcons"][0]["color"] = "default"
this.coll["socialIcons"][0]["operation"] = "like"
break;
}
case "cancelunlike":{
this.coll["socialIcons"][1]["color"] = "default"
this.coll["socialIcons"][1]["operation"] = "unlike"
break;
}
default:{
this.coll["socialIcons"][0]["color"] = "default"
}
}
})
resolve(this.coll)
console.log(this.coll)
})
})
// this.setTitle();
}
As you can see i am making a service call based on the response i get from the service call i am setting the color of icons for each creative object sent from parent component.
ISSUE : Suppose say if there is any value obtained from the response then the color of the icons changes for all the creatives irrespective of the switch condition.
say for a creative if the response from the service call is null then the color will be black.
now for second creative response exists based on the switch conditions the appropriate color is changed to this creative which is fine. But along with this the first creative color also gets changed. i,e this.coll.socialIcons arrays gets updated to all the creative objects.
I guess there is some issue with the way of rendering socialIcons.
Please let me know where am i going wrong?
This bit doesn't seem right:
case 'like' :{
this.coll["socialIcons"][0]["color"] = "danger"
this.coll["socialIcons"][0]["operation"] = "cancellike"
break;
}
case "unlike":{
this.coll["socialIcons"][1]["color"] = "danger"
this.coll["socialIcons"][1]["operation"] = "cancelunlike"
break;
}
case "cancellike":{
this.coll["socialIcons"][0]["color"] = "default"
this.coll["socialIcons"][0]["operation"] = "like"
break;
}
case "cancelunlike":{
this.coll["socialIcons"][1]["color"] = "default"
this.coll["socialIcons"][1]["operation"] = "unlike"
break;
}
default:{
this.coll["socialIcons"][0]["color"] = "default"
}
It's not clear what you're trying to do but whatever it is, you are only setting either ["socialIcons"][0] or ["socialIcons"][1] in all instances.
Problems with the question
You have not asked your question in a clear way, you should try to recreate an example with only the problem presented, and also give us all the information.
You are talking about user_reaction which has latestReaction in your code but when you posted a data sample user_reaction is just [].
If you are trying to run the code against an [] then its going to set the default case every time as its going to get undefined back from each switch test.

WebdriverIO: what is the equivalent of elementIdHtml?

How do I get an element's inner HTML from an elementId using browser object?
Is there something like elementIdHtml available in the WebdriverIO API?
The getHTML link for v4 is returning 403 Forbidden.
my goal is that i need to get all text inside all a._3cnp from an elementId
example html
<div class="container">
<a class="_3cnp">first link</a>
<a class="_3cnp">second link</a>
<a class="_3cnp">third link</a>
</div>
need to convert that to ["first link", "second link", ..]
i have the .container elementId already
this is what i did
.then(() => browser.elementIdElements(someElementId, 'a._3cnp'))
.then(buttonElem => {
console.log('->', buttonElem)
console.log('-->', buttonElem.getHTML)
buttonElem.getHTML().then(x => console.log('---->', x))
return buttonElem.value
})
result of elementIdElements is
buttonElem
{ sessionId: '2e2f144c8895a03da1b8df92f4613a33',
status: 0,
value:
[ { ELEMENT: '0.6603119466268468-24',
'element-6066-11e4-a52e-4f735466cecf': '0.6603119466268468-24' } ],
selector: 'a._3cnp' }
but buttonElem.getHTML is undefined
im using webdriverio standalone from botium-webdriverio-connector
LE:
Change your code accordingly to the following:
.then(() => browser.elementIdElements(someElementId, 'a._3cnp'))
.then(buttonElem => {
// buttonElem's 'value' will contain a list of all the matching elements
// thus, you have to call getHTML() on each item from 'value'
// the following will return the HTML of the first matching element
console.log('\nPrint element HTML: ' + buttonElem.value[0].getHTML());
return buttonElem.value[0].getHTML();
})
A better approach would be to loop between them & print the HTML:
.then(() => browser.elementIdElements(someElementId, 'a._3cnp'))
.value.forEach(buttonElem => {
console.log('\nPrint element HTML: ' + buttonElem.getHTML());
return buttonElem.getHTML();
})
The .getHTML() property is scoped to all the ELEMENT objects. For the sake of more didactical approach, I'm going to consider the task to be manipulating the HTML code found in a series of list items (<li>), from am unordered list (<ul>).
So you can do the following:
browser.getHTML('ul.ourList li.ourListItems') (this will return a list of all the <li>'s HTML code)
browser.element('ul.ourList li.ourListItems').getHTML() (this will return the first <li>'s HTML code)
$('ul.ourList li.ourListItems').getHTML() (this is the equivalent of the command above, only a relaxed version)
If you need to iterate through all the <li>s & get the HTML, do this:
let locator = 'ul.ourList li.ourListItems';
browser.elements(locator).value.forEach(elem => {
let elemHTML = elem.getHTML();
console.log( JSON.stringify(elemHTML) );
elemHTML.doSomethingWithIt();
})
where, elem will is an object with the following format:
{ ELEMENT: '0.285350058261731-1',
'element-6066-11e4-a52e-4f735466cecf': '0.285350058261731-1',
selector: 'ul li.fw-item.fz-16.lh-36.pos-r',
value: { ELEMENT: '0.285350058261731-1' },
index: 0
}

jquery .map is not working on IE 10

I have this jquery code:
$("#tf_zoom").live("click", function () {
var n = $(".tf_thumbs").find("img").attr("src");
var modelid = n.substr(43);
$.post("models/get_gallery", {
"modelid": modelid
}, function (data) {
var imagespathes = $(data).map(function (key, url) {
return ({
href: '<?php echo base_url();?>assets/uploads/files/' + url
});
});
console.log(imagespathes);
$.fancybox.open(imagespathes);
}, "json");
});
and this is my html:
<div id="tf_thumbs" class="tf_thumbs">
<span id="tf_zoom" class="tf_zoom"></span>
<img id="dynam" src="<?php echo base_url();?>assets/uploads/files/<?php echo $firstthumb;?>" alt="Thumb1"/>
</div>
Okay, now my problem is that this code is not functioning on IE 10 and surprisingly it's working like a charm on IE 9, IE 8, IE 7 besides FF and Google Chrome
I read many things about this issue but nothing worked for me.
So, is there any solution for it.
your help is really appreciated.
Update 1 : I am using jquery version 1.7
Perhaps this hint will help you:
I have noticed that .map( $("select").get(0).options ) will not work in IE10 but .map( $("select:first >option") ) will. This is because in ie10 .options returns a select node with an iteration of options.
So see what data is returning in IE10, perhaps it too is not an array. And if so perhaps you can do something like $(new Array(data)).map(... which will satisfy all browsers
You should be using static map function for this:
$.map(data, function(obj, index){...})
See documentation here.
// If data looks like this: [{ url: 'TestUrl' }]
// This should work:
var imagespathes = $.map(data, function(element){
return { href: '<?php echo base_url();?>assets/uploads/files/' + element.url };
});