2

I am trying to get this demo working in my org: http://www.johnbrunswick.com/2015/01/salesforce-lightning-example-ideas-experiment/

My component has an onclick that is supposed to display a modal card. When the onclick goes to the javascript it appears to be hanging up on the lightning event setparams. I've added a window.alert before and after the setparams and I only get the screen pop before.

Here is the component. The line that I'm having trouble with is:

div class="card box-shadow-outset" onclick="{!c.openIdeaDetail}" data-ideaid="{!p.Id}"

<aura:component controller="Merchants.CaseCards" implements="force:appHostable">
<aura:attribute name="idea" type="Idea" default="{'sobjectType': 'Idea'}"/>
<aura:attribute name="ideas" type="Idea[]"/>
<aura:attribute name="profilePhotoUrl" type="String"/>
<aura:attribute name="ideaComments" type="IdeaComment[]"/>
<aura:attribute name="textareaNewIdeaValue" type="String" default="" />
<aura:attribute name="searchTerm" type="String" default="" />


<aura:attribute name="newIdea" type="Idea"
                default="{ 'sobjectType': 'Idea',
                         'Title': '',
                         'Body': '',
                         'CommunityId': '09ao0000000a8tqAAA'
                         }"/> 
<aura:attribute name="newIdeaComment" type="IdeaComment" default="{ 'sobjectType': 'IdeaComment', 'CommentBody': ''}"/>         



<Merchants:load filesInParallel="/resource/bootstrapcssmin.sfcss,/resource/animate.sfcss,/resource/bootstrapswitchcss.sfcss"
          filesInSeries="/resource/isotope.sfjs,/resource/jquerymin.sfjs,/resource/modernizr.sfjs,/resource/timeago.sfjs,/resource/bootstrapjs.sfjs,/resource/bootstrapswitch.sfjs" />

<aura:handler event="Merchants:staticResourcesLoaded" action="{!c.initScripts}"/>    
<!-- This attribute will hold out JS object that represents our "cards" -->    
<aura:attribute name="objIsotope" type="Object" />

<!-- Note - fixed header will only work in non S1 environments with our example -->
<div id="fixedheader">
    <div class="titleheader">
        <img src="/resource/BulletTrainLogo" class="logo"/>
    </div>


    <nav class="navbar navbar-default" role="navigation">
        <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div class="navbar-collapse collapse tabs" id="navbar-collapsible">

                <ul class="nav navbar-nav">
                    <li class="tabitem active">
                        <a id="buttonFilterFresh" href="#" onclick="{!c.getFilterFresh}" class="filterbutton">fresh<span></span></a>
                    </li>
                    <li class="tabitem">
                        <a id="buttonFilterOpen" href="#" onclick="{!c.getFilterTop}" class="filterbutton">trending<span></span></a>
                    </li>
                    <li class="tabitem">
                        <a id="buttonFilterComments" href="#" onclick="{!c.getFilterComments}" class="filterbutton">comments<span></span></a>
                    </li> 
                    <li class="tabitem">
                        <a id="buttonFilterTotal" href="#" onclick="{!c.getFilterVoteTotal}" class="filterbutton">total votes<span></span></a>
                    </li>          
                </ul>

            </div>
        </div>
    </nav>               

</div>       


<!-- Using Isotope library - if used commercially you will need a license.  Very inexpensive and worth it! -->    
<div id="grid-gallery" class="grid-gallery" style="-webkit-overflow-scrolling: touch;">
    <section class="grid-wrap">
        <div class="grid"> 

            <aura:iteration items="{!v.ideas}" var="p">
                <div class="card box-shadow-outset" onclick="{!c.openIdeaDetail}" data-ideaid="{!p.Id}">

                    <div class="carddetails">
                        <img src="{!p.Merchants__PhotoURL__c}" class="profilephoto"/>

                        <aura:if isTrue="{!p.NumComments > 0}">
                            <div class="commentcount">                           
                                {!p.NumComments}
                            </div>
                        </aura:if>                                    

                        <h3>{!p.Title}</h3>
                        <p>
                            by {!p.Merchants__Submitted_By__c} <span class="timeago case-date" title="{!p.CreatedDate}">{!p.CreatedDate}</span> 
                        </p>
                    </div>

                    <!-- The "chart" is the color that is applied to each card background -->
                    <Merchants:VoteChart ideaObject="{!p}"/>

                    <!-- Hidden to be used for filtering - could be more elegant, but this is simple -->
                    <p class="votescore" style="display:none">{!p.VoteScore}</p>
                    <p class="numcomments" style="display:none">{!p.NumComments}</p>
                    <p class="freshdate" style="display:none">{!p.CreatedDate}</p>
                    <p class="votetotal" style="display:none">{!p.VoteTotal}</p>
                </div>
            </aura:iteration>

        </div>
    </section>
</div>

<!-- Bootstrap modal used to show details for a given idea -->
<div class="modal fade" id="ideadetail">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header detail">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">{!v.Idea.title}</h4>
                <Merchants:renderHTML rawHTML="{!v.idea.Body}"/>
                <Merchants:VoteBox parentIdeaId="{!v.idea.id}"/>  

            </div>
            <div class="modal-body comments">
                <div class="container-fluid">
                    <aura:iteration items="{!v.ideaComments}" var="ic" indexVar="i">
                        <div class="row comment fade-in" style="{!'-webkit-animation-delay:' + i + '00ms;'}">
                            <div class="col-md-1"><img src="{!ic.CreatorSmallPhotoUrl}" class="commentphoto"/></div>
                            <div class="col-md-11"><div class="ideacommentbody">{!ic.CommentBody}<br/>
                                <span class="timeago case-date" title="{!ic.CreatedDate}">{!ic.CreatedDate}</span></div>
                            </div>
                        </div>
                    </aura:iteration>
                </div>
            </div>
            <div class="modal-body">

                <div class="container-fluid">
                    <div class="row commentcreate">
                        <div class="col-xs-3 col-md-1"><img src="{!v.profilePhotoUrl}" class="commentphoto currentuser"/></div>
                        <div class="col-xs-9 col-md-10">

                            <div class="group">
                                <ui:inputText aura:id="commentBody" label="" value="{!v.newIdeaComment.CommentBody}" required="true"/>
                                <span class="highlight"></span>
                                <span class="bar"></span>
                                <label class="material">Your Comment</label>
                            </div>

                        </div>
                        <div class="col-xs-12 col-md-1">
                            <a href="#" onclick="{!c.postIdeaComment}" data-ideaid="{!v.idea.id}" class="linkstandard">Post</a>
                            <!--<button type="button" class="btn btn-danger" onclick="{!c.postIdeaComment}" data-ideaid="{!v.idea.id}">Post</button>-->
                        </div>
                    </div>
                </div>

            </div>                        
            <div class="modal-footer" style="display:none">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->    


<!-- Bootstrap modal used for people to create ideas -->
<div class="modal fade" id="newidea" data-easein="fadeInLeft" data-easeout="fadeOutLeft" >
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Share an Idea</h4>
            </div>
            <div class="modal-body">
                <div class="group">      
                    <ui:inputText aura:id="createtitle" value="{!v.newIdea.Title}" required="true"/>
                    <span class="highlight"></span>
                    <span class="bar"></span>
                    <label class="material">Title</label>
                </div>

                <p>

                    <ui:inputText aura:id="createdescription" label="" placeholder="Details" value="{!v.newIdea.Body}" class="hidden" />

                    <textarea rows="4" cols="50" onchange="{!c.changeField}" placeholder="Tell us about it..."></textarea>

                </p>
                <div class="row">
                    <input type="checkbox" name="my-checkbox" class="toggle" value="{!v.newIdea.Merchants__Anonymous__c}" data-label-text="Anonymous" data-on-color="danger"/>                
                </div>
                <div class="row">
                    <input type="checkbox" name="my-checkbox" class="toggle" value="{!v.newIdea.Merchants__Confidential__c}" data-label-text="Confidential" data-on-color="danger"/>
                </div> 

                <select id="Category" value="{!v.newIdea.Category}">
                    <option value="Cost">Cost</option>
                    <option value="Revenue">Revenue</option>
                    <option value="Policy">Policy</option>
                </select>

            </div>
            <div class="modal-footer">

                <a id="postButton" href="#" onclick="{!c.postIdea}" class="linkstandard red">Post</a>
                <a id="cancelButton" data-dismiss="modal" class="linkstandard grey">Cancel</a>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->        


<!-- Button to create an idea, the position is done via JS.  Not ideal, but it will check to see where
  it is continously, as I could not get a clean way to get an onscroll JS event for the UI
                 when using in S1 -->
<div class="row">
    <button type="button" class="btn btn-primary circle" id="createidea" data-toggle="modal"
            data-target="#newidea">+</button>        
</div>    

The Controller just for this:

openIdeaDetail : function(component, event, helper) {     
    var idea = component.get("v.idea");
    var selectedItem = event.currentTarget;
    var selectedId = selectedItem.dataset.ideaid;
    var evt = $A.get("e.merchants:OpenIdea");

    evt.setParams({"currentIdeaId": selectedId}).fire();    

  helper.getIdea(component, selectedId);    

  $j("#ideadetail").modal('show');}

And the Helper just for this:

getIdea: function(component, objectid, callback) {        
    var action = component.get("c.getIdea");
    action.setParams({
      "objectId": objectid
    });
    var self = this;

    action.setCallback(this, function(a) {
        component.set("v.idea", a.getReturnValue());
    });
    $A.enqueueAction(action);

    var action = component.get("c.getComments");
    action.setParams({
      "objectId": objectid
    });

    action.setCallback(this, function(a) {
        component.set("v.ideaComments", a.getReturnValue());

        // Hack - should use an aura:asyncRerender event, but the following
        // is done so this executes after the aura:iteration finishes
        // modifying the DOM after it gets data
        setTimeout(function(){
            $j(".timeago").timeago();
        }, 10);

    });
    $A.enqueueAction(action);        
}
2

figured it out. The namespace is case sensitive so it should have been:

openIdeaDetail : function(component, event, helper) {     
var idea = component.get("v.idea");
var selectedItem = event.currentTarget;
var selectedId = selectedItem.dataset.ideaid;
**var evt = $A.get("e.Merchants:OpenIdea");**

evt.setParams({"currentIdeaId": selectedId}).fire();    

helper.getIdea(component, selectedId);

$j("#ideadetail").modal('show');}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.