Implementing icon display upon click in a Meteor application

Currently, I am in the process of developing an application using meteor and within one of the templates, I have the following code snippet.

 <h3>
   <b>
     <a class="viewed" href="/jobdetails/{{_id}}">{{title}}</a>
   </b>
   &nbsp;&nbsp;
   <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 am aiming to show the glyphicon eye icon when a user clicks on the href tag and then store this information into a collection. As I am relatively unfamiliar with meteor, I am seeking guidance on how to achieve this functionality using Meteor. Any assistance on the steps to accomplish this would be greatly appreciated. Thank you in advance!

javascriptjqueryhtmlcssmeteor

Answer №1

<h3>
   <b>
     <a class="viewed" href="/jobdetails/{{_id}}">{{title}}</a>
   </b>
   &nbsp;&nbsp;
   <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);
  },
});

Kindly keep in mind that the use of session is to maintain your data across the app. If you wish for this data to persist permanently, consider using collections.

In addition, if you want to ensure the value remains even after a page refresh, you may utilize Session.setPersistent (https://github.com/okgrow/meteor-persistent-session) instead of Session.set

Answer №2

To begin, ensure that your #eyeIcon div is initially hidden. You can achieve this by including the following code in your /client/main.css:

#eyeIcon {
  display: none;
}

Next, utilize the Blaze Template event system to reveal the div when the link is clicked. Modify your Template as shown below:

Template.yourTemplate.events({
  'click .viewed'(event, instance) {
    event.preventDefault();
    instance.$('#eyeIcon').show();
  },
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Angular.copy() function selectively copies properties and does not duplicate everything

Exploring a function within a service: $scope.addPeriod = function(newPeriod) { if(newPeriod.from !== '' && newPeriod.until !== '') { var index = $scope.newPeriods.indexOf(newPeriod); ...

javascriptarraysangularjs

Learn how to utilize Vue 3 to access properties that have been passed down from a parent component, even if they

Hey there, hope everything is going well. I'm familiar with react.js, but when I gave vue a try, things felt a bit different. In react, it's easy to access props passed from the parent in the child component without much hassle. However, in vue, ...

javascriptreactjsvue.js

I would like to automatically log out when closing the tab in Mozilla, Internet Explorer 8.0, or Chrome

Hello there, I was wondering if it's feasible to end the session and log out when I close my tab. I'd appreciate it if you could confirm whether this feature has been implemented on your end. Thank you, Manish ...

phpjavascripthtml

Revolutionizing Communication with Flash Websockets

Here are a couple of connected queries: I've read that non-HTML5 browsers can utilize Flash to connect to websockets. https://github.com/gimite/web-socket-js 1. Is there an actual implementation of websockets for Flash within Flash itself? 2. If I ...

htmlflashsocketswebsocket

Exploring the Ins and Outs of Debugging JavaScript in Visual Studio Using

I encountered a peculiar issue while testing some code. When the program is executed without any breakpoints, it runs smoothly. However, if I introduce a breakpoint, it halts at a certain point in the JSON data and does not allow me to single-step through ...

javascriptjsonvisual-studio

Obtain the model value using Yii jQuery and then proceed to submit the form

Within the _form.php view, there is a presence of $model and a CActiveForm $form. I implemented JavaScript code to compare the value of $model->publication_date with the current date. If they are identical, the form will be submitted automatically. Othe ...

javascriptphpjqueryyiimodel

Navigating through object keys in YupTrying to iterate through the keys of an

Looking for the best approach to iterate through dynamically created forms using Yup? In my application, users can add an infinite number of small forms that only ask for a client's name (required), surname, and age. I have used Formik to create them ...

javascriptreactjstypescriptformikyup

How can I store the city name instead of the city id in the database when submitting data from a dependent dropdown select in Ajax PHP?

For the past few days, I have been unable to solve a problem. The issue is as follows: I have a web form with dependent dropdown select boxes where users can choose their city, zip code, and street. However, when the form is submitted, only the city_id ( ...

javascriptphpjquerymysqlajax

Unable to open new tab using target _blank in React js production build

After attempting to access the link, a 404 error appeared in the live version of react js and triggered an error on the firebase hosting platform. <Link target='_blank' to={'/property-details?id='some_id'}/> ...

javascriptnode.jsreactjs

Image positioned above the text in the mobile layout following the text

Can the layout be adjusted so that on desktop, the image is on the right and text on the left in the lower box, but on mobile, the image appears above the text? I understand that placing the image tag after the text tag in HTML would position the image to ...

htmlcsssass

Stop the form from being submitted using ajax if there are no values in the form fields

Having issues with a basic form. Struggling to prevent submission when fields are empty. Is there a straightforward way to validate the fields and stop the form from submitting? Below is the HTML form: <form method="post" name="simpleForm" id="simpleF ...

javascriptjqueryajax

Is it possible for cluetip to function on a hyperlink located in the top right corner of a webpage?

Currently, I am utilizing jquery cluetip for my project. There is a link located at the top right-hand corner of the page, and upon clicking it, I expect the tooltip to display at the bottom of the click location. However, instead of appearing at the desir ...

jquerycluetip

Ways to send data to a popup in svelte

Hey there, I could really use some assistance with my Svelte app. I'm trying to implement a modal and pass a parameter to the modal component in order to customize its content. However, when using the open() function of Modal, we only need to provide ...

javascripthtmlcssmodal-dialogsvelte

Bootstrap CSS: arranging columns for mobile devices

UPDATE: Having implemented the solution provided in the accepted answer below, I find myself back at square one with the original layout before any adjustments were made. The issue still remains unresolved. Any advice on how to achieve the desired design o ...

htmlcsslayoutresponsive-designtwitter-bootstrap-3

Having trouble with the Ng multiselect dropdown displaying empty options?

I'm currently facing a challenge in adding a multiselect dropdown feature to my project. Below is the code I have been working on: HTML <ng-multiselect-dropdown [settings]="searchSettings" [data]="dummyList" multiple> </n ...

javascripthtmlcssangulartypescript

Guide on extracting JSON data from specific nodes using d3.js

Just starting out with d3.js and following the example of a simple molecule created by d3 at http://bl.ocks.org/mbostock/3037015. I have a couple questions: 1. How can I select multiple nodes within the molecule structure? 2. Once selected, how do I ext ...

javascriptjsonhtmld3.js

What are the steps for building modules using Vuex and fetching data using mapState()?

I've been experimenting with separating my Vuex code into modules, but I'm having trouble retrieving data using mapState(). What's the most effective approach for creating modules and utilizing mapping? Here's the structure of my stor ...

javascriptvue.jsvuex

Upon upgrading to webpack 5.x, I encountered the error message `Error: getaddrinfo ENOTFOUND localhost:8081` when trying to run `npm run serve`. What could be causing

Recently, I was tasked with upgrading a Vue project from webpack 4.x to webpack 5.x. Prior to the upgrade, my vue.config.js file looked like this: devServer: { port: 8081, public: process.env.PUBLIC_ADDRESS, }, The variable PUBLIC_ADDRESS was defined ...

javascriptnode.jsvue.jswebpack

Executing 'npm run bundle' with Webpack results in an ERR! with code ELIFECYCLE

As someone new to using Webpack with AngularJS apps, I am eager to learn but facing some challenges. Following the guide by Ken Howard has been helpful, but I encounter an error when attempting to run the bundle. Article by Ken Howard that I've been ...

javascriptangularjsnpmwebpackbundle

JavaScript animation for sequencing traffic lights

I have been working on completing a task that was assigned to me. (iii) Explain the organization of an array that could manage the traffic light sequence. (iv) Develop a script that utilizes the array outlined in part (iii) to create an animated display ...

javascripthtmlarrays