0

I can't get the buttons by seaching with the id from controller. Below is the code.

Component

<aura:iteration var="qstList" items="{!v.contactList}">
    <!--Listing the contacts-->

     <aura:iteration var="qst" items="{!v.qstLists}" indexVar="index">
            <tbody>

                    {!qst.Title}
                    <button data-index="{!index}" id="{!qstList.Id}"  class="slds-button slds-button_icon slds-button_icon_border" value="" onclick="{!c.click}">
                    ?
                    </button>
                    <button data-index="{!index}" id="{!qstList.Id}"  class="{!qst.Score=='-1'? 'ButtonP slds-button slds-button_icon slds-button_icon-border':'slds-button slds-button_icon slds-button_icon-border'}"
                            value="-1" onclick="{!c.click}">
                    -1
                    </button>
                    <button data-index="{!index}" id="{!qstList.Id}"  class="{!qst.Score=='0'? 'ButtonP slds-button slds-button_icon slds-button_icon-border':'slds-button slds-button_icon slds-button_icon-border'}"
                            value="0" onclick="{!c.click}">
                    0
                    </button>
                    <button data-index="{!index}" id="{!qstList.Id}"  class="{!qst.Score=='1'? 'ButtonP slds-button slds-button_icon slds-button_icon-border':'slds-button slds-button_icon slds-button_icon-border'}"
                            value="1" onclick="{!c.click}">
                    +1
                    </button>
                    <button data-index="{!index}" id="{!qstList.Id}"  class="{!qst.Score=='2'? 'ButtonP slds-button slds-button_icon slds-button_icon-border':'slds-button slds-button_icon slds-button_icon-border'}"
                            value="2" onclick="{!c.click}">
                    +2
                    </button>

            </tbody>
  </aura:iteration>
</aura:iteration>

Controller

   init: function(component, event, helper) {
    component.set("v.qstLists", [
        {
            Title: "Question 1",
            Score: null
        },
        {
            Title: "Question 2",
            Score: null
        },
        {
            Title: "Question 3",
            Score: null
        },
        {
            Title: "Question 4",
            Score: null
        },
        {
            Title: "Question 5",
            Score: null
        },
        {
            Title: "Question 6",
            Score: null
        }
    ]);
},

  click: function(component, event, helper) {

    var questions = component.get("v.qstLists");
    var listIndx = component.get("v.contactList");
    var btnId = event.target.id;
   // console.log('btnId-=-=-'+btnId);
    for(var i=0; i<listIndx.length;i++){       
         var index = listIndx[i].Id;
         // console.log('index-->'+index+'  '+'event.target.id -->'+btnId);
        if(index == btnId){
        console.log('Insideindex == event.target.id-->'+index+btnId);
        questions[event.target.dataset.index].Score = event.target.value;
        component.set("v.qstLists", questions);
       }
     }
    },
1

SecureComponent#find only finds elements that have a matching aura:id, not a normal id. Further, aura:id doesn't support expression syntax, so you'll have to go about it a different way.

Preferably, you should make a component, like c:question, that displays a single question. This would make your component logic easier to deal with. Alternatively, instead of toggling the classes using $A.util, use an expression to change the class.

<aura:iteration items="{!v.questions}" var="question">
<div id="Q1" class="slds-button-group" role="group">

   <button name="nothing" class="slds-button 
       slds-button_icon slds-button_icon-border" 
       data-question-id="{!question.Id}" value="" onclick="{!c.buttonScore}">?
    </button>

   <button name="nothing" class="{!(question.Score__c==-1?'slds-is-selected':'')+'slds-button 
       slds-button_icon slds-button_icon-border'}" 
       data-question-id="{!question.Id}" value="-1" onclick="{!c.buttonScore}">-1
    </button>

   <button name="nothing" class="{!(question.Score__c==0?'slds-is-selected':'')+'slds-button 
       slds-button_icon slds-button_icon-border'}" 
       data-question-id="{!question.Id}" value="0" onclick="{!c.buttonScore}">0
    </button>

   <button name="nothing" class="{!(question.Score__c==1?'slds-is-selected':'')+'slds-button 
       slds-button_icon slds-button_icon-border'}" 
       data-question-id="{!question.Id}" value="1" onclick="{!c.buttonScore}">1
    </button>

   <button name="nothing" class="{!(question.Score__c==2?'slds-is-selected':'')+'slds-button 
       slds-button_icon slds-button_icon-border'}" 
       data-question-id="{!question.Id}" value="2" onclick="{!c.buttonScore}">2
    </button>

</div>

If you use a question component, your questionnaire component would look like this:

<aura:iteration items="{!v.questions}" var="question">
    <c:question question="{!question}" />
</aura:iteration>

And the question component itself would contain all of the logic for displaying the question.


Self-Contained Example

<aura:application extends="force:slds">
    <aura:attribute name="questions" type="Object[]" />
    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <aura:iteration items="{!v.questions}" var="question" indexVar="index">
        <div>
            {!question.Title}
            <button data-index="{!index}" class="slds-button slds-button_icon slds-button_icon_border" value="" onclick="{!c.click}">
            ?
            </button>
            <button data-index="{!index}" class="{!join(' ', 'slds-button slds-button_icon slds-button_icon_border ', (question.Score=='-1'?'slds-is-selected':''))}" value="-1" onclick="{!c.click}">
            -1
            </button>
            <button data-index="{!index}" class="{!join(' ', 'slds-button slds-button_icon slds-button_icon_border ', (question.Score=='0'?'slds-is-selected':''))}" value="0" onclick="{!c.click}">
            0
            </button>
            <button data-index="{!index}" class="{!join(' ', 'slds-button slds-button_icon slds-button_icon_border ', (question.Score=='1'?'slds-is-selected':''))}" value="1" onclick="{!c.click}">
            1
            </button>
            <button data-index="{!index}" class="{!join(' ', 'slds-button slds-button_icon slds-button_icon_border ', (question.Score=='2'?'slds-is-selected':''))}" value="2" onclick="{!c.click}">
            2
            </button>
        </div>
    </aura:iteration>
</aura:application>

Controller

({
    init: function(component, event, helper) {
        component.set("v.questions", [
            {
                Title: "Question 1",
                Score: null
            },
            {
                Title: "Question 2",
                Score: null
            },
            {
                Title: "Question 3",
                Score: null
            }
        ]);
    },
    click: function(component, event, helper) {
        var questions = component.get("v.questions");
        questions[event.target.dataset.index].Score = event.target.value;
        component.set("v.questions", questions);
    }
})

Note: slds-is-selected probably doesn't do what you think it does anyways, so you'll need to try a different SLDS setup, such as the Radio Button Group, but this should help you get started.

  • Thanks.. But I have a list of more than 10+ questions.. Is making components for each of them a good idea ? – Brav Aug 6 '17 at 14:21
  • @BijilRavindran I'm writing up a demo. One sec... – sfdcfox Aug 6 '17 at 14:30
  • This is very helpful although I don't see how I can put the expression syntax here.. I need to raise these questions separately from another iterating list of objects which is why I had put id's for each button Eg: "{!'Q1btn'+qstList.Id}" .. – Brav Aug 6 '17 at 22:31
  • @BijilRavindran With nested lists, you can use the various indexVar to drill down in to your data. – sfdcfox Aug 6 '17 at 22:35
  • Thanks.. I have updated my changed code above.. The button gets selected on click but if I answer to a list of questions for one contact the same gets reflected for all the other contacts. I believe I am setting up the "v.question" attribute at the end of click function wrong. How can I make sure that the question attribute I set is only for the specific contact ? DO I need to make some changes in the init function ? – Brav Aug 8 '17 at 7:12

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.