Applying javascript to generated content - javascript

Being fairly new to Meteor, I'm stuck with an issue I encountered while generating input "on-the-fly" with a Helper. Indeed, what I'm trying to do is to generate a left labeled input with a dropdown but the problem is that I have to call the method $('.ui.dropdown').dropdown();
After creating each input with its corresponding dropdown, and I don't know how to do it properly with semantic-UI and Meteor environment.
Here is my helper creating the inputs:
'filterColumns': function() {
return Session.get('s_filterColumns');
}
Where 's_filterColumns' is an array looking like ["Firstname", "Lastname", "LivingPlace"]
And here is the HTML template using the helper to generate inputs:
<div id="fields">
<div class="ui grid">
{{#each filterColumns}}
<div class="eight wide column">
<label>{{this}}</label>
<div class="ui left labeled input">
<div class="ui dropdown label">
<div class="text">Start by</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Start by</div>
<div class="item">Contains</div>
<div class="item">End by</div>
</div>
</div>
<input type="text">
</div>
</div>
{{/each}}
</div>
</div>
But then, when populating the session variable with new content, the inputs are being created accordingly but the javascript dropdown method is not called again and so my left label is not a dropdown.
If you have any recommendations regarding anything in my conception I'd be glad to learn from someone more experienced than me.


If you are unsure when to call $('.ui.dropdown').dropdown(), try running it inside Template.myTemplate.onRendered() where myTemplate is the name of your template. Given that you have multiple dropdowns though you might want to put the html that's inside your {{#each }} into its own template and use that for onRendered().
Note: Community Wiki answer created because question was answered by Michel Floyd in the comments.

Related

Interact with buttons inside of an aria list-item

In our current frontend we want to add accessibility improvements. The current challenge is to make the list of items including additional actions more accessible. Our document structure is based on the following idea:
<div class="products-list" role="list">
<div class="product" role="listitem">
<div class="product-name">Product A</div>
<div class="product-actions>
<div class="action-icon" role="button">First</div>
<div class="action-icon" role="button">Second</div>
</div>
</div>
</div>
At the moment it's possible to select the list-items, however the a11y border highlights the entire list item (div.product). Hence it's not possible to focus the buttons. Defining a sublist using list/listitem roles for div.product-actions was not of benefit. Do you have any ideas how to achive this?

Trying to hide/show partials based on if a input has text node.js handlebars

so I have a page. there's a search bar. if the search bar has no text inputted, the page displays two partials, one for featured apps and one for most popular. but if someone inputs any text at all into the search bar then the featured apps and most popular apps partials disappear and the search results partial shows up. instead what happens is neither partials load. there's just a big blank space where they should be.
I tried doing this with jQuery but was having no luck. so now I'm back to trying to use dynamic partials but am also having no luck with that. if this can only be done with something like jQuery please let me know.
I was briefly trying to use a handlebar helper but I could not link it to the input id="searchApps" element without throwing an error because it keeps saying searchApps is undefined.
index.hbs (if this is missing any divs it's cause it's just part of the code)
<div class="col-2 offset-1">
<div class="column-side">
<div class="sidebar">
<input id="searchApps" type="text" placeholder="Search apps...">
{{!-- so once someone types the first character here the searchResults partial should render. and it should be dynamic so results should further refine with each additional character typed--}}
{{>sidebar}}
</div>
</div>
</div>
{{#if 'searchApps.length === 0'}}
<div id="searchResultsHomePage">
<div class="col-7 offset-1">
{{>searchResults}}
</div>
</div>
{{else}}
<div id="homePageNoSearch">
<div class="col-7 offset-1">
{{>featuredApps}}
</div>
<div class="most-popular-grid">
{{>mostPopularApps}}
</div>
</div>
{{/if}}
here is the jQuery I tried in the index.hbs file just before the </body> tag
<script type="text/javascript">
$('#searchApps').on('change', function(){
if ($(this).val() == ""){
<div id="homePageNoSearch">
<div class="col-7 offset-1">
{{>featuredApps}}
</div>
<div class="most-popular-grid">
{{>mostPopularApps}}
</div>
</div>
} else {
<div id="searchResultsHomePage">
<div class="col-7 offset-1">
{{>searchResults}}
</div>
</div>
}
});
</script>
so anyone know how I can do this?
thanks

Cannot populate dropdown from Javascript Semantic UI

I have a dropdown which i am trying to populate from the javascript. But i am unable to do it.
This is my HTML
<div class="ui fluid search selection dropdown values">
<input type="hidden" name="values" selectOnBlur={false}>
<i class="dropdown icon"></i>
<div class="default text">Select a category</div>
<div class="menu">
</div>
</div>
And this is the JS
$('.ui.dropdown.values').dropdown({values:[{name:"oi",value:32},{name:"yo",value:2}]})
Please find the codepen link below
CodePen
Thanks

Can be fixed by changing versions to:
https://code.jquery.com/jquery-3.2.1.min.js
https://cdn.jsdelivr.net/npm/semantic-ui#2.2.13/dist/semantic.min.js
Because the dropdown library's version you used didn't support populating via JS (as per docs)

How to use dropdown behaviors using Semantic-UI for Meteor?

I'm using Semantic-UI for Meteor. Let's say I have a dropdown like this:
<div class="ui floating dropdown labeled search icon button">
<i class="world icon"></i>
<span class="text">Select Language</span>
<div class="menu">
<div class="item">Arabic</div>
<div class="item">Chinese</div>
<div class="item">Danish</div>
<div class="item">Dutch</div>
</div>
</div>
And initializing it like this:
Template.DropdownTemplate.onRendered(function() {
this.$('.ui.dropdown').dropdown()
})
But how do I reach the behaviors of that dropdown, which, according to the documentation on the Semantic-UI site, look like this:
$('.your.element')
.dropdown('behavior name', argumentOne, argumentTwo)
;
An example is this clear behavior:
$('.ui.dropdown).dropdown('clear')
This simple behavior doesn't work (nor does any other behavior) in Meteor for some reason. Callbacks work, but not the behaviors.
Does anyone have a workaround for this?

JavaScript value in HTML with JQuery

I implemented that in JavaScript:
$('#dash_adc_avg').html(adc_avg);
And this in HTML:
(part A)
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="box">
<div class="big-text" id="dash_adc_avg"></div>
<div class="description">
<i class="fa fa-chevron-up"></i>
Energy Monitor AS
</div>
</div>
</div>
And this in HTML:
(part B, same file as part A)
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<section class="widget index">
<header>
<h4>
<i class="fa fa-bars"></i> Status word <small> </small>
</h4>
</header>
<div class="body">
- Test: <div class="text" id="dash_adc_avg"></div><br>
etc.
Unfortunately, the visualization of the content from var adc_avg works properly for "part A" ONLY. Does anyone know why?
Thank you!
By the way and independent: I'm looking for a way to visualize JSON-Data (as Objects) on the website, without changing them. Any ideas?

From the id attribute section of the HTML specification:
The id attribute specifies its element's unique identifier (ID).
The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.
IDs must be unique in HTML. Because of this, JavaScript only ever looks for one instance of an ID and then stops searching. In your case, the ID being pulled is the one in part A - your code never bothers looking further than that.
Change your "dash_adc_avg" ID into a class instead:
<!-- Part A -->
<div class="big-text dash_adc_avg"></div>
<!-- Part B -->
- Test: <div class="text dash_adc_avg"></div><br>
Then with your jQuery select on the class instead of the ID:
$('.dash_adc_avg').html(adc_avg);
I'm not going to bother answering the second part of your question, which is about visualising JSON data, as it has absolutely nothing to do with the main part of the question and is completely separate. Please ask that as a different question.

An identity has to be unique in the page.
It's still possible to use the id attribute to find the elements, but then you have to use it as an attribute, not as an identity:
$('[id=dash_adc_avg]').html(adc_avg);
Generally a class is used instead when you want to put it on multiple elements. There is no benefit of keeping the dupliate id attributes as they don't work as identities.

You are using duplicate id's dash_adc_avg which is a invalid HTML instead of id's use class and modify your Jquery selector as shown :-
$('.dash_adc_avg').html(adc_avg);

you should use class when you are using same name for more than once on same page in your html:
$('.dash_adc_avg').html(adc_avg);

It is considered bad practice to use the same id tag on multiple places, I would suggest that you instead use class for your dash_adc_avg
$('.dash_adc_avg').html(adc_avg)
And this in HTML: (part A)
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="box">
<div class="big-text" class="dash_adc_avg"></div>
<div class="description">
<i class="fa fa-chevron-up"></i>
Energy Monitor AS
</div>
</div>
</div>
And this in HTML: (part B, same file as part A)
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<section class="widget index">
<header>
<h4>
<i class="fa fa-bars"></i> Status word <small> </small>
</h4>
</header>
<div class="body">
- Test: <div class="text" class="dash_adc_avg"></div><br>

Your id must be unique and if not the first element found by that id will be selected.
For multiple selection for same thing/functionality use class instead of id.

Categories

Resources