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

Elements of Data Pagination in Vuetify Data Tables

My data-table is filled with thousands of data inputs, so I am using the default Vuetify pagination to display only 5, 10, or 25 items at a time on the table. However, I am in need of a way to determine which data is currently visible on the table. For ex ...

javascriptvue.jsvue-componentvuetify.js

Having difficulty in choosing and displaying the dropdown values

Below is the code snippet: WebElement pooldropdown=driver.findElement(By.xpath("/html/body/section/section[2]/div[1]/select")); Select sel = new Select(pooldropdown); List<WebElement> list = sel.getOptions(); System. ...

javascriptseleniumwebdriver

The Angular Google Maps Module fails to initialize

After updating angular-google-maps to version 2.0.1 via bower and adding the required dependencies (bluebird, jquery, loadash), I noticed that my app works fine when I comment out google-maps. This suggests that the issue lies with angular-google-maps. He ...

javascriptangularjsgoogle-mapsangular-google-maps

Tips on boosting CSS specificity in Material-UI's makeStyle for styled components in order to successfully override the root style

As a newcomer in the world of React, I am attempting to utilize MUI makeStyles to customize the existing styles. However, I have encountered an issue where setting fontWeight to 'bold' does not seem to work, even when using !important. Any sugges ...

cssreactjsnext.jsmaterial-ui

Executing a PHP script after successful execution of another script

tag, I am encountering the following script: Two minor issues: With the button being disabled after a click, it wont allow to click again if for instance an error is returned as shown above. It should only disable it after the input has been released $fo ...

javascriptphpjquerymysqlajax

Pedaling back and forth along a sequence

Is there a way to implement forward and backward buttons for a clickable list without using arrays, as the list will be expanding over time? I have already achieved changing color of the listed items to red, but need a solution to navigate through the list ...

javascriptjqueryhtmlcss

Can we display various React components based on the screen size?

I am looking to implement various components that will display at different breakpoints. I attempted this using Material-UI import withWidth, { isWidthUp } from '@material-ui/core/withWidth'; function MyComponent(props) { if (isWidthUp('s ...

javascriptreactjsresponsive-designmaterial-ui

Horizontal SWF's are providing spaces of white in between them

I'm struggling with removing the white space between SWFs on my HTML page. I've tried using 'block' in CSS, but it's not working for a horizontal layout. Adding "0" for the border hasn't helped either. I'm getting frustr ...

htmlcssflashactionscript-3

Creating dynamic radio buttons in AngularJS

How can I create dynamic radio buttons in angularjs, using mobile numbers from this json array? challengeSelectInfo: [ {"mob_0" : "xxxxx1211"}, {"mob_1" : "xxxxx1211"}, {"mob_2" : "xxxxx1211"} ] I attempted to use ng-repeat and loop through c ...

javascriptangularjs

Creating an Angular directive that handles asynchronous attribute interpolation

I am facing an issue with my custom directive. In the link function attributes, I am trying to access the value of attributes.user. Here is how the directive is used in my view page: <div my-directive user="{{user.name}}"></div> The user obje ...

javascriptangularjs

Ensure that the alert for an Ajax JSON record count remains active when the count is

Trying out Ajax JSON for the first time has been a bit tricky. Even though I hard coded "Record: 1" on the server side, it keeps alerting me with a total record of 0. I'm not sure where I went wrong. Could it be an issue with how I passed the array da ...

javascriptjsonajaxvbscriptasp-classic

Bootstrap for a more streamlined container

https://i.sstatic.net/fJ8nt.png My Bootstrap setup includes a container-fluid with multiple cards inside. I want to adjust the container layout to stack the cards more closely together in a vertical direction, instead of being displayed in a grid format. ...

html

Ways to showcase a div exclusively on UC mini browser

I'm looking for help to create a script that will only display a div with the class "info-box" in UC Mini browser. This div should be hidden in all other browsers. Can someone assist me with this? <!doctype html> <html> <head> <m ...

javascriptjquerycssproxy

Updating Bootstrap 5.3 Modal to Have a Fixed Backdrop when Opened (Using JavaScript/JQuery)

Is there a way to change the backdrop of an open modal to 'static' using jQuery or JavaScript? I want to prevent the user from closing the modal by clicking outside after they have clicked the 'Submit' button on the modal. I've tri ...

javascripttwitter-bootstrapmodal-dialogbootstrap-5

Can you include an optional selector in SASS?

Here is an interesting concept: adding a CSS-selector optionally to the existing selector stack within a mixin. This is what I envision: @mixin myMixin(mobileSelector:true) { @if(mobileSelector) { .foo .mobile:before, } .classXY .subclass:before ...

csssassdart-sass

Splitting a list of accordions into two columns with CSS and React - a step-by-step guide!

I am looking for a way to showcase a list of Accordions in a two-column layout. Each Accordion consists of both a Summary and Details section, with the Details being visible only when the Summary is clicked. Unfortunately, I won't delve into the imple ...

htmlcssreactjscss-grid

Unable to present the information due to a codeigniter error in retrieving the data

Encountering an issue where the data cannot be displayed and it's showing an error message of undefined variable: avg. Below is the script being used: The controller function: public function rate_config() { $rt = $_POST['hasil_rating&a ...

phphtmlmysqlcodeignitercodeigniter-3

The value in the textarea will stay unchanged even after the form has been submitted

I recently resolved my previous issue, but now I am seeking advice on how to prevent a textarea from clearing its input after submitting a form. You can view the jsFiddle here: http://jsfiddle.net/rz4pnumy/ Should I modify the HTML form? <form id="for ...

javascriptjqueryhtmlforms

Is there a way for me to include .js or .cpp prior to using the Vim shortcut key gf?

When using a programming language like nodejs, the require function does not require the addition of the .js extension. For example: var Assert = require('./app_base'); However, in vim, when using gf, it cannot find app_base without the .js ext ...

javascriptnode.jsvim

Dynamically implementing event listeners in JavaScript to remove specific elements based on their

My website has a list of phones displayed as ul li. When a user clicks the "Buy" button, it should create a new li within another div called "ordersDiv". Users can delete their purchase from the cart by clicking "Remove", which should remove the li with ma ...

javascriptjqueryhtml