Thanks, so the only way is to flatten my sub document to something like customer.name, user.name array? (your solution uses a different datamodel as input)
I know, my last reply doesn’t fulfill your thing exactly. But will give an idea. Just take required vales from dB to render on ui, and put it in like Json object format and access it in html.
The only thing still left is that if I restart the server, the values are not populated of the listbox (if I insert a new item in the customer collection, then the listbox works. Deleting an item does not force the update)
If i inspect the html, i DO see the users already. So it looks like the javascript is not working of the semantic ui dropdown. The dropbox won’t open.
If you’re not using es6 (ecmascript package), you can’t use fat arrow functions so you’d have to do:
var self = this;
Meteor.defer(function () {
self.$(".dropdown").dropdown();
});
This may not fully solve the issue, if you are expecting the data to be reactive. You may be able to move the defer block inside the helper, so it will call dropdown() whenever the data changes.
Hopefully this is a step in the right direction though
Should I give the drop downs maybe different id or class names?
Ps: on the other side: after I have modified my collection it always works, I only have the issue with a fresh page. So maybe it has nothing to do with this
Btw, to be honest I have just copy pasted the sample code from semantic, and then it works. So. I don’t really know how to modify it as you suggested.
Works for me with just the this.$('#my-dropdown').dropdown() in the onRendered callback.
I suggest you re-create the most basic app possible and work it out from there. Sorry for the wild goose chase here, often DOM manipulation requires a setTimeout to ensure everything is rendered first.
will try that one. thanks. I noticed that if I press f5 (refresh) the dropdown does not work. If I enter some customers in the collection it starts working…
I think there is a bug. I tried tried the demo code: it works. Then i tried my own code again in little steps, it broke, it “undo” my code in sublime text, and it still was not working…
so… the final outcome… it was due to the fact I used a if else statement…
now that I commented out the code it works… thanks for your help sofar!
<template name='simulateUserLogin'>
<!-- {{#if noCustomers}}
<div class="ui icon message">
<img class="icon" src="images/id.png">
<div class="content">
<div class="header">
<h4>No users</h4>
</div>
<p> Please insert at least one user in a customer so we can simulate the Single Sign on</p>
</div>
</div>
{{else}} -->
<div class="ui icon message">
<img class="icon" src="images/id.png">
<div class="content">
<div class="header">
<h4>Simulate a user login</h4>
</div>
<p> We will pass this user and his group membership in a JSON object to Qlik Sense and in this way we create a Single Sign on</p>
<div class="ui selection dropdown">
<input name="gender" type="hidden">
<div class="default text">Select a value</div>
<i class="dropdown icon"></i>
<div class="menu">
{{#each customers}} {{#each users}}
<div class="item" data-value="{{name}}" data-text="{{name}}">
<i class="male icon"></i> {{name}} ({{../name}})
</div>
{{/each}} {{/each}}
</div>
</div>
</div>
</div>
<!-- {{/if}} -->
</template>
we need a way that we can ensure that a template is not rendered at all. I am playing with the if and unless but I have the idea that that is not really the way to go… that also caused this isssue, and I see the screen flickering. How do you guys do this?