0

how to change button label when user click on this.I am using this:

 <aura:renderIf isTrue="{!v.UTList.UserTargetLists__r.length>0}">
    <input type="button" class="btn btn-primary mb10 addtarget seemore" onclick="{!c.c_UpdateUserTargetList}" value="Remove from Target List" id="{!v.UTList.Id}" />
    <aura:set attribute="else">
        <input type="button" class="btn btn-primary mb10 addtarget seemore" onclick="{!c.c_UpdateUserTargetList}" value="Add to Target List" id="{!v.UTList.Id}" />
    </aura:set>
</aura:renderIf> 

on my controller using this

 hp_UpdateUserTargetList: function(component,event,helper){
        var vlu=document.getElementById(event.target.id).textContent
         var Action = '';
        debugger;
            if (document.getElementById(event.target.id).textContent =='Remove from Target List') {
                Action = 'D';
            }
            else
            {
                Action='A';
            } 
             var action = component.get("c.UpdateUserTargetList");  
                 action.setParams({   
                accountId:account.Id,
                 Action:Action 
        });
        $A.enqueueAction(action);


     }  but it is contain my accountid.but i want it contain my button label text.how could I got button label text?

please help me

1

You could use a ternary operator to set your label, and this would reduce the number of components you are creating, and it means less code to maintain (I've broken the tag in separate lines for clarity):

<input type="button" class="btn btn-primary mb10 addtarget seemore"
onclick="{!c.c_UpdateUserTargetList}" 
value="{!v.UTList.UserTargetLists__r.length > 0 ? 'Remove from Target List' : 'Add to Target List'" 
id="{!v.UTList.Id}" />

To make the branching decision in your controller, I would reuse the same logic that decides on which label is showing:

var Action = cmp.get("v.UTList.UserTargetLists__r.length") > 0 ? "D" : "A";

This is much more concise and much more robust, since the business logic doesn't depend on the presentation layer. This code is easier to verify (it won't fail if there are typos in the button text).

0

First of all you have to use ui:button instead of input type="button". You can use $A.util.addClass to change the classname of the ui:button. Using class name u can change the label.

({

doAction : function(component, event, helper) {

    var button = component.find("myButton");

    $A.util.addClass(button.getElement(), 'invisible');

    ... code
},

})

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.