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">×</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">×</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);
}
Best Answer
figured it out. The namespace is case sensitive so it should have been:
helper.getIdea(component, selectedId);$j("#ideadetail").modal('show');}