How to show an icon on click in meteor? - javascript

I am building an application in a meteor and I have a below code in the template.
<h3>
<b>
<a class="viewed" href="/jobdetails/{{_id}}">{{title}}</a>
</b>
<span class="job-type part-time">Part Time</span>
</h3>
<div id="eyeIcon">
<span class="glyphicon glyphicon-eye-open" style="color:green"></span>
</div>
I have to display the glyphicon eye icon on click of a href tag and storing them into a collection. How can I do that? I am new to the meteor. Can anyone help me how can we do it using Meteor. Thanks in advance.

<h3>
<b>
<a class="viewed" href="/jobdetails/{{_id}}">{{title}}</a>
</b>
<span class="job-type part-time">Part Time</span>
</h3>
{{showIcon}}
<div id="eyeIcon">
<span class="glyphicon glyphicon-eye-open" style="color:green"></span>
</div>
{{/if}}
Template.yourTemplate.helpers({
'showIcon': function() {
return Session.get('showIcon');
},
});
Template.yourTemplate.events({
'click .viewed': function(event, instance) {
event.preventDefault();
Session.set('showIcon', true);
},
});
Please note that I have used session to persist your data throughout the app. If you also want to retain this value permanently than you can use collections.
Also, if you to just retain it's value to be persisted on page refresh also, then you can use Session.setPersistent (https://github.com/okgrow/meteor-persistent-session) instead of Session.set

Start by hiding your #eyeIcon div by default. For example, add the following to /client/main.css:
#eyeIcon {
display: none;
}
Then leverage the Blaze Template event system to show the div when the link is clicked. So in your Template:
Template.yourTemplate.events({
'click .viewed'(event, instance) {
event.preventDefault();
instance.$('#eyeIcon').show();
},
});

Related

How to click a button using html or java script which is declared as div

I am writing a powershell script to login to a website. I want to use the button.click functionality but I can't find the button's id. here is what I found by inspecting it.
<div tabindex="0" role="button" class="v-button v-widget default v-button-default">
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
</div>
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
<span class="v-button-caption">Login</span>
Thanks in advance
Given that you aren't sure which one is the one you want, you could just set up an event handler that will trigger for each and then interrogate it for something that can identify it.
// Get all the elements with a class of "v-button-caption" into an array
var buttons = Array.prototype.slice.call(document.querySelectorAll(".v-button-caption"));
// Loop over the array
buttons.forEach(function(btn){
// Set up a click event handler
btn.addEventListener("click", function(evt){
// Print out some identifying information about the clicked element
console.log("You clicked the element who's parent is: " + evt.target.parentElement.nodeName);
});
});
<div tabindex="0" role="button" class="v-button v-widget default v-button-default">
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
</div>
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
<span class="v-button-caption">Login</span>

get bound data on click event

This is my Razor Page containing multiple divs with each div containing either follow or unfollow button with NeighbourhoodName and other stuff.
<p class="lead" style="display: none" data-bind="visible: profiles().length == 0">No neighbourhood found...</p>
<ul data-bind="visible: profiles().length > 0, foreach: profiles">
<li class="media" style="border-top: solid 1px lightgrey; padding-top: 15px;">
<div class="media-body">
<h4 class="media-heading">
<a class="btn pull-right" data-bind="visible: !IsFollowed, attr: { href: followAction }">Follow</a>
<a class="btn btn-danger pull-right" data-bind="visible: IsFollowed, attr: { href: unfollowAction }">Unfollow</a>
</h4>
<em data-bind="text: NeighbourhoodName"></em>
<em data-bind="text: NeighbourhoodId"></em>
//stuck at this line
</div>
</li>
I want to Generate a new page with click on any of the div. So,I want to send id of the neighbourhood to action method with click on respective div. Right now, i am able to get NeighbourhoodId with data-bind attribute but dont know how to send this id to action method with click on any area of div means how to mix this anchor tag. something like that.
This is my follow action url in a knockout code which send neighbourhoodId on follow button click:
self.followAction = location.protocol + "//" + location.host + '/Neighbourhood/Follow?uid=' + data.NeighbourhoodId;
But, i dont want any button. simple click on div should send id to action method.
how to achieve this. please suggest me something.
You simply have to use the click binding on the div, and bind it to a function in your viewmodel.
The function in your viewmodel receives as parameter the knockout context available in the bound element. So, you can directly access the desired data from that function.
<div class="media-body" data-bind="click: yourViewModelFunction">
In your viewmodel, your function should be implemented like this:
yourViewModelFunction = function(data) {
// here you can use data.NeighbourhoodId
}

How to show edit action icon when mouse-over on particular text

How to show / hide edit icon on mouseover and mouseout on particular text.
Here is my html code snippet
<ul>
<li>
<a id="pop" href="javascript:;;" data-content="test Desc" data-id="123">
<span class="testNameInfo">Test</span>
</a>
<div class="pull-right icons-align">
<i class="fa fa-pencil"></i>..
<i class="fa fa-plus"></i>
<i class="fa fa-times"></i>
</div>
</li>
</ul>
when page loads the fa-pencil icon is in hide state. When i mouse over on text, it should show fa-pencil icon. Remaining icons (add and delete) are always in show state.
Here is my javascript to hide the fa-pencil icon
$("a.editInline").css("display","none");
Am using backbone and marionette js frameworks, so i need to register the events in view.
Please let me know what is the best way to get out from my issue.
You can do as below:
$('.testNameInfo').on('mouseover mouseout',function(){
$(this).closest('li').find('.editInline').toggle();
//find the closest li and find its children with class editInLine and
//toggle its display using 'toggle()'
});
UPDATE
DEMO
#JamieBarker made his point which is valid here so I would suggest to try below code instead
$("a.editInline").css("display","none");
$('li').on('mouseover mouseout',function(){
$(this).find('.editInline').toggle();
//find its children with class .editInLine and
//toggle its display using 'toggle()'
});
Better to use CSS than JavaScript if you can:
a.editInline {
display:none;
}
li:hover a.editInline {
display:inline-block;
}
UPDATE
Performance/Simplicity wise I'd advise going with the CSS solution provided. If all else you can use then JS solution.
Optional CSS Solution
.editInline {
display: none;
}
#pop:hover .icons-align .editInline {
display: inline-block;
}
JS Solution
$(function() {
$(".editInline").hide(); // Use this if CSS is not wanted
$("#pop").hover(function() {
$(".editInline").show();
}, function() {
$(".editInline").hide();
});
});

Meteor using different Sessions with {{#each}} for click event

I want to use different Sessions for a specific click event within a {{#each}} block. The problem is that HTML elements will be displayed for all {{#each}} block members, but I only want it for the one, a user performs the click event on.
Here is my code:
...
{{#each articles}}
<tr id="{{_id}}" class="article-row">
<td class="articles">
{{> article}}
</td>
</tr>
{{/each}}
...
<template name="article">
{{#if editArticle}}
<div class="input-group">
<span class="input-group-addon">Edit article</span>
<input type="text" name="edit-article-input" class="form-control" placeholder="Name your article." value="{{title}}">
<span class="input-group-btn">
<button class="btn btn-success glyphicon glyphicon-ok edit-article-submit" data-type="last"></button>
</span>
</div>
{{else}}
<div class="panel panel-default article">
<div class="panel-heading">
<h3 class="panel-title">{{title}}</h3>
</div>
<div class="panel-body">
<button class="glyphicon glyphicon-pencil btn btn-default btn-xs edit-article"></button>
</div>
</div>
{{/if}}
</template>
Helper methods and events:
Template.article.helpers({
editArticle: function() {
return Session.equals('editArticle', true);
}
});
In the template with the {{#each}} block I use this helper method:
'click .edit-article': function(e, t) {
e.preventDefault();
Session.set('editArticle', true);
}
Now the problem is, that if I click on the button .edit-article the {{#if editArticle}} block appears on every article. I just want it for the one I clicked on.
Any help would be greatly appreciated.
This is a perfect example of how Session isn't always the right tool for the job when it comes to template reactivity. Unless you actually need to know which article is being edited outside of the template, I'd strongly recommend using a ReactiveVar or ReactiveDict rather than a global variable like Session. It's a little more to write but, in my opinion, a much more encapsulated and elegant solution. Here's the outline of the code you'd need:
Template.article.created = function() {
this.isEditing = new ReactiveVar(false);
};
Template.article.events({
'click .edit-article': function(e, template) {
e.preventDefault();
template.isEditing.set(true);
},
submit: function(e, template) {
e.preventDefault();
template.isEditing.set(false);
}
});
Template.article.helpers({
editArticle: function() {
return Template.instance().isEditing.get();
}
});
Note that you'd need to do meteor add reactive-var for this to work. For more details, see my post on scoped reactivity.

On click function of Prototype Javascript

HI ,
I am using Prototype Javascript for my application .
I am having a Html like
<span style="display: none;">
<span class="fn">
<span class="given-name">NAME</span>
<span class="family-name"> </span>
</span>
<span class="email">email#gmail.com</span>
<span class="tel"></span>
<span class="role">Developer</span>
<a class="underlin" href="/users/username">View</a>
<a class="additional_click" href="">Show Additional Details</a>
<span style="display: none;" class="additional_detail">
Personal Number : 82374894725
</span>
</span>
I am trying a task of when clicking on Show Additional details the span next to that should be displayed and the Innerhtml should be replaced with Hide Additional Details .
And on clicking Hide additional Details , the span (additional_detail) should hide
I have written a Javascript (Prototype) for this
$$(".additional_click").each(function(el){
el.observe("click", function(event) {
event.element().next().show();
el.replace("Hide additional details");
});
});
How to write the Js for on clicking Hide Additional Details to get the span to hide. And to replace the text to Show additional details
In your event function, check if the span was visible. If it was, then hide it and change the text to "Show additional details", and if it wasn't, then show it and change the text to "Hide additional details".
$$(".additional_click").each(function(el) {
el.observe("click", function(event) {
if(el.next().visible())
{
el.next().hide();
el.innerHTML = "Show additional details";
}
else
{
el.innerHTML = "Hide additional details";
el.next().show();
}
Event.stop(event);
});
});
Also remember to stop the event, so that the browser doesn't actually follow the link.

Categories