CODEWITHSUNDEEP
jquerytemplatesmeteoraddclass
kevinius
kevinius

Reputation: 4610

Meteor: working with popups & modals

I have this template that represents a corporate article.

<template name="articleDetail">

<section class="articles">

    {{#with articleData}}

    <article>

        <div>

            <div>

                <div class="logo">{{logo}}</div>
                <div class="name">{{name}}</div>

            </div>

        </div>

    </article>

    {{/with}}

</section>

This template receives data from this helper:

    Template.articleDetail.articleData = function(){

        return articleDB.findOne({_id:Session.get("clickedOnArticle")})

    }

An article is displayed as a popup. When the user clicks on an article (from a list of articles) the detail article (template above) is shown with a display:block.

I use this event for that:

    Template.articleOverview.events({

        "click .article":function(event, template){

            Session.set("clickedOnArticle", event.currentTarget.getAttribute("data-article-id"))

            $(".adArticle").addClass("active")

        }

    })

The problem is that i have to click 2 times on an article.

What am i doing wrong here?

thx,

Upvotes: 1

Views: 1094

Answers (1)

kevinius
kevinius

Reputation: 4610

The solution was rather simple:

The {{#with articleData}} block was initially false, so the html of the template was not rendered to the page.

When i clicked on an article the {{#with articleData}} returned true (because there now was data inside it) but i had to click a second time to get the jquery to fire (to add the class .active).

So the key was to get the adArticles template in the page on load and not on click. To do that i just returned true if the query from the db returned false. 

    Template.adArticles.articleData = function(){

        return tikiDB.findOne({_id:Session.get("clickedOnArticle")}) || true

    }

So the only thing that changed is the || true bit and now everything works as expected. I do wonder however if there is another solution to this.

Upvotes: 2

Related Questions