function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Baz DensonBaz Denson 

Lightning Component component.find("comments").get("v.value"); fails on second click

I am trying to record comments in a lightning component, I have the line
  
var task_comments = component.find("comments").get("v.value");


When I click the 'update' button, the whole thing runs fine. If I click the button a second time, its fails and says  
Uncaught Action failed: c:Stopwatch$controller$onClick [component.find(...).get is not a function]

I can't understand why it works on the first click but not on the second click.

 
Raj VakatiRaj Vakati
Can you try to do with an attribute? Rather than using find. I can able to suggest any other approach to seeing your code 
  
component.find("value") vs component.get("v.value")


 
Baz DensonBaz Denson
My Complete Code

Stopwatch.cmp 
<aura:component controller="CaseLogController" 
                implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId"
                access="global">


    <aura:attribute name="start" type="String"/>
    <aura:attribute name="stop" type="String"/>
    <aura:attribute name="sObj" type="String"/>
    <aura:attribute name="field" type="String"/>
    <aura:attribute name="comments" type="String"/>
    <aura:attribute name="stopwatch" type="Object"/>
    <aura:attribute name="LogEntry" type="Case_Log__c[]"/>

    
    <!-- Handle component initialization in a client-side controller -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <div class="slds-clearfix slds-card">        
        <div class="slds-card__header slds-grid slds-align_absolute-center" >
            <header class="slds-media slds-media_center slds-has-flexi-truncate">         
              <div class="slds-media__body slds-align_absolute-center">                 
                  <h2>
                      <span class="slds-text-heading_small slds-align_absolute-center">Task Timer</span>    
                  </h2>
              </div>
            </header>
        </div>
        
		<div class="slds-text-heading_large slds-align_absolute-center">
            <div aura:id="time">               
            </div>
        </div>
        <div class="slds-button-group slds-align_absolute-center" role="group">
                <button id="start" class="slds-button slds-button_success" onclick="{!c.onClick}">Start</button>
                <button id="pause" class="slds-button slds-button_brand" onclick="{!c.onClick}">Pause</button>
                <button id="finish" class="slds-button slds-button_destructive" onclick="{!c.onClick}">Finish</button>
        </div>

<div class="slds-form-element">
  <label class="slds-form-element__label" for="comments">Task Comments</label>
  <div class="slds-form-element__control">
    <aura:iteration items="{!v.LogEntry}" var="log">
             <ui:inputTextArea aura:id="comments" value="{!log.Task_Comments__c}" rows="5"/>
    </aura:iteration>    

  </div>

</div>


      <table class="slds-table slds-table_bordered slds-table_cell-buffer">
      <thead>
        <tr class="slds-text-title_caps">
          <th scope="col">
            <div class="slds-truncate" title="Log Name">Log Name</div>
          </th>
          <th scope="col">
            <div class="slds-truncate" title="User">User</div>
          </th>
          <th scope="col">
            <div class="slds-truncate" title="Length">Length</div>
          </th>
          <th scope="col">
            <div class="slds-truncate" title="Time">Time</div>
          </th>
          <th scope="col">
            <div class="slds-truncate" title="In Progress">In Progress</div>
          </th>
        </tr>
      </thead>
      <tbody>
          <aura:iteration items="{!v.LogEntry}" var="log">
             <tr>
                 <td type="dice">{!log.Name}</td>
                 <td type="dice">{!log.User__c}</td>
                 <td type="dice">{!log.Length__c}</td>
                 <td type="dice">{!log.Time__c}</td>
                 <td type="dice">{!log.In_Progress__c}</td>
    
              </tr> 
    
          </aura:iteration>
       </tbody>
       </table>
    </div>
</aura:component>

StopwatchController.js 
({
    

     
     doInit: function(component, event, helper) {
         
        function pad(num, size) {
            var s = "0000" + num;
            return s.substr(s.length - size);
        }
        function formatTime(time) {
            var h = 0;
            var m = 0;
            var s = 0;
            var newTime = '';

            h = Math.floor( time / (60 * 60 * 1000) );
            time = time % (60 * 60 * 1000);
            m = Math.floor( time / (60 * 1000) );
            time = time % (60 * 1000);
            s = Math.floor( time / 1000 );


            newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2); 
            return newTime;
        }
        
     //call apex class method
      var action = component.get("c.getLogEntry");
      
      var StartLen, StartTime, task_comments;
      action.setParams({RecId: component.get("v.recordId")});
      action.setCallback(this, function(response) {
       //store state of response
       var state = response.getState();
       if (state === "SUCCESS") {
        //set response value in LogEntry attribute on component.
        component.set('v.LogEntry', response.getReturnValue());
	    var Entry = response.getReturnValue();
         StartLen = Entry[0]['Length__c'];
         
         StartTime = formatTime(StartLen);

         console.log('Length: '+StartTime);
		var div = component.find("time").getElement();
        div.innerHTML =  StartTime;
        }
      });
      $A.enqueueAction(action);
     },
    doScriptLoad : function(component, event, helper) {

	},


    onClick : function(component, event, helper) {
        
        
        var div = component.find("time").getElement();
        var id = event.target.id;
        var timerState = "Loaded";
        var btn = document.getElementById("start"); 
        btn.disabled = false;
        var btn = document.getElementById("pause"); 
        btn.disabled = false;
        var btn = document.getElementById("finish"); 
        btn.disabled = true;
        
        var	clsStopwatch = function() {
            // Private vars
            
            var	now	= function() {
                return (new Date()).getTime();
            };

            // Public methods
            // Start or resume
            this.start = function() {
                console.log(timerState + " : "+ lapTime);
                var btn = document.getElementById("start"); 
                btn.disabled = true;
                var btn = document.getElementById("pause"); 
                btn.disabled = false;                
                var btn = document.getElementById("finish"); 
                btn.disabled = false;    
                //startAt	= StartLen;
                var TempStart = component.get("v.LogEntry");
                
                if (timerState == "Loaded") {startAt = now() - TempStart[0].Length__c;} 
                else {startAt	= startAt ? startAt : now(); }
                console.log (timerState + " " + startAt + " " + lapTime);
                timerState = "Started";
            };

            // Pause
            this.pause = function() {
                timerState = "Paused";

                var btn = document.getElementById("start"); 
                btn.disabled = false;
                var btn = document.getElementById("pause"); 
                btn.disabled = true;
                var btn = document.getElementById("finish"); 
                btn.disabled = false;
                // If running, update elapsed time otherwise keep it
                lapTime	= startAt ? lapTime + now() - startAt : lapTime;
                var task_comments = component.find("comments").get("v.value");
                console.log("Comments: "+task_comments);
                console.log(timerState + " : "+ lapTime);
                startAt	= 0; // Paused
                
                //call apex class method
                var LogEntry = component.get("v.LogEntry[0].Id");
                console.log(LogEntry);
                var pauseaction = component.get("c.pauseLogEntry");
                pauseaction.setParams({ 
                    					Entry : LogEntry,
                                        Elapsed : lapTime,
                                        RecId: component.get("v.recordId"),
                    					Comments: task_comments});

                pauseaction.setCallback(this, function(response) {
                    
                    //store state of response
                    var state = response.getState();
                    console.log(response);
                    if (state === "SUCCESS") {
                        //set response value in LogEntry attribute on component.
                            component.set("v.LogEntry", response.getReturnValue());
                    } 
                    else if (state === "INCOMPLETE") {
                        // do something
                    }
                    else if (state === "ERROR") {
                        var errors = response.getError();
                        if (errors) {
                            if (errors[0] && errors[0].message) {
                                console.log("Pause Error Stack: " + errors[0].stack);
                            }
                        } else {
                            console.log("Unknown error");
                        }
                    }                

                });
                
                $A.enqueueAction(pauseaction);
                
            };


            
            // Finish
            this.finish = function() {
                timerState = "Stopped";
                console.log(timerState + " : "+ lapTime);
                var btn = document.getElementById("start"); 
                btn.disabled = false;
                var btn = document.getElementById("pause"); 
                btn.disabled = false;
                var btn = document.getElementById("finish"); 
                btn.disabled = true;
				var finishaction = component.get("c.finishLogEntry");
                var task_comments = "New Value";



                finishaction.setParams({ Entry : LogEntry,
                                         Elapsed : lapTime,
                                         RecId: component.get("v.recordId"),
                    					Comments: task_comments});
                finishaction.setCallback(this, function(response) {

                    //store state of response
                    var state = response.getState();
                    if (state === "SUCCESS") {
                        //set response value in LogEntry attribute on component.
                        	lapTime = startAt = 0;
                            component.set("v.LogEntry", response.getReturnValue());
      						
                        	
                    } 
                    else if (state === "INCOMPLETE") {
                        // do something
                    }
                    else if (state === "ERROR") {
                        var errors = response.getError();
                        if (errors) {
                            if (errors[0] && errors[0].message) {
                                console.log("Finish Error Stack: " + errors[0].stack);
                            }
                        } else {
                            console.log("Unknown error");
                        }
                    }                


                });

                $A.enqueueAction(finishaction);
                
                
            };
			

            // Duration
            this.time = function() {

                return lapTime + (startAt ? now() - startAt : 0);
            };
        };

        
        var startAt	= startAt || 0;	// Time of last start / resume. (0 if not running)
        var lapTime	= lapTime || 0;	// Time on the clock when last stopped in milliseconds

        var stopwatch = component.get("v.stopwatch");
        var x = stopwatch || new clsStopwatch();
        if(!stopwatch){
        	component.set("v.stopwatch", x);
        }

        function pad(num, size) {
            var s = "0000" + num;
            return s.substr(s.length - size);
        }

        function formatTime(time) {
            var h = 0;
            var m = 0;
            var s = 0;
            var newTime = '';

            h = Math.floor( time / (60 * 60 * 1000) );
            time = time % (60 * 60 * 1000);
            m = Math.floor( time / (60 * 1000) );
            time = time % (60 * 1000);
            s = Math.floor( time / 1000 );


            newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2); 
            return newTime;
        }
 
        function update() {
            div.innerHTML =  formatTime(x.time());
        }

   		switch(id){
            case "start":             
                setInterval(update, 1000);
                x.start();
                update();
                break;
            case "finish":
                x.pause();
                x.finish();
                update();
                break;
            case "pause":
                //x.finish();
                x.pause();
                update();
                break;
            default:
                finish();
                break;
        }
        

	}
})

CaseLogController.apxc 
({
    

     
     doInit: function(component, event, helper) {
         
        function pad(num, size) {
            var s = "0000" + num;
            return s.substr(s.length - size);
        }
        function formatTime(time) {
            var h = 0;
            var m = 0;
            var s = 0;
            var newTime = '';

            h = Math.floor( time / (60 * 60 * 1000) );
            time = time % (60 * 60 * 1000);
            m = Math.floor( time / (60 * 1000) );
            time = time % (60 * 1000);
            s = Math.floor( time / 1000 );


            newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2); 
            return newTime;
        }
        
     //call apex class method
      var action = component.get("c.getLogEntry");
      
      var StartLen, StartTime, task_comments;
      action.setParams({RecId: component.get("v.recordId")});
      action.setCallback(this, function(response) {
       //store state of response
       var state = response.getState();
       if (state === "SUCCESS") {
        //set response value in LogEntry attribute on component.
        component.set('v.LogEntry', response.getReturnValue());
	    var Entry = response.getReturnValue();
         StartLen = Entry[0]['Length__c'];
         
         StartTime = formatTime(StartLen);

         console.log('Length: '+StartTime);
		var div = component.find("time").getElement();
        div.innerHTML =  StartTime;
        }
      });
      $A.enqueueAction(action);
     },
    doScriptLoad : function(component, event, helper) {

	},


    onClick : function(component, event, helper) {
        
        
        var div = component.find("time").getElement();
        var id = event.target.id;
        var timerState = "Loaded";
        var btn = document.getElementById("start"); 
        btn.disabled = false;
        var btn = document.getElementById("pause"); 
        btn.disabled = false;
        var btn = document.getElementById("finish"); 
        btn.disabled = true;
        
        var	clsStopwatch = function() {
            // Private vars
            
            var	now	= function() {
                return (new Date()).getTime();
            };

            // Public methods
            // Start or resume
            this.start = function() {
                console.log(timerState + " : "+ lapTime);
                var btn = document.getElementById("start"); 
                btn.disabled = true;
                var btn = document.getElementById("pause"); 
                btn.disabled = false;                
                var btn = document.getElementById("finish"); 
                btn.disabled = false;    
                //startAt	= StartLen;
                var TempStart = component.get("v.LogEntry");
                
                if (timerState == "Loaded") {startAt = now() - TempStart[0].Length__c;} 
                else {startAt	= startAt ? startAt : now(); }
                console.log (timerState + " " + startAt + " " + lapTime);
                timerState = "Started";
            };

            // Pause
            this.pause = function() {
                timerState = "Paused";

                var btn = document.getElementById("start"); 
                btn.disabled = false;
                var btn = document.getElementById("pause"); 
                btn.disabled = true;
                var btn = document.getElementById("finish"); 
                btn.disabled = false;
                // If running, update elapsed time otherwise keep it
                lapTime	= startAt ? lapTime + now() - startAt : lapTime;
                var task_comments = component.find("comments").get("v.value");
                console.log("Comments: "+task_comments);
                console.log(timerState + " : "+ lapTime);
                startAt	= 0; // Paused
                
                //call apex class method
                var LogEntry = component.get("v.LogEntry[0].Id");
                console.log(LogEntry);
                var pauseaction = component.get("c.pauseLogEntry");
                pauseaction.setParams({ 
                    					Entry : LogEntry,
                                        Elapsed : lapTime,
                                        RecId: component.get("v.recordId"),
                    					Comments: task_comments});

                pauseaction.setCallback(this, function(response) {
                    
                    //store state of response
                    var state = response.getState();
                    console.log(response);
                    if (state === "SUCCESS") {
                        //set response value in LogEntry attribute on component.
                            component.set("v.LogEntry", response.getReturnValue());
                    } 
                    else if (state === "INCOMPLETE") {
                        // do something
                    }
                    else if (state === "ERROR") {
                        var errors = response.getError();
                        if (errors) {
                            if (errors[0] && errors[0].message) {
                                console.log("Pause Error Stack: " + errors[0].stack);
                            }
                        } else {
                            console.log("Unknown error");
                        }
                    }                

                });
                
                $A.enqueueAction(pauseaction);
                
            };


            
            // Finish
            this.finish = function() {
                timerState = "Stopped";
                console.log(timerState + " : "+ lapTime);
                var btn = document.getElementById("start"); 
                btn.disabled = false;
                var btn = document.getElementById("pause"); 
                btn.disabled = false;
                var btn = document.getElementById("finish"); 
                btn.disabled = true;
				var finishaction = component.get("c.finishLogEntry");
                var task_comments = "New Value";



                finishaction.setParams({ Entry : LogEntry,
                                         Elapsed : lapTime,
                                         RecId: component.get("v.recordId"),
                    					Comments: task_comments});
                finishaction.setCallback(this, function(response) {

                    //store state of response
                    var state = response.getState();
                    if (state === "SUCCESS") {
                        //set response value in LogEntry attribute on component.
                        	lapTime = startAt = 0;
                            component.set("v.LogEntry", response.getReturnValue());
      						
                        	
                    } 
                    else if (state === "INCOMPLETE") {
                        // do something
                    }
                    else if (state === "ERROR") {
                        var errors = response.getError();
                        if (errors) {
                            if (errors[0] && errors[0].message) {
                                console.log("Finish Error Stack: " + errors[0].stack);
                            }
                        } else {
                            console.log("Unknown error");
                        }
                    }                


                });

                $A.enqueueAction(finishaction);
                
                
            };
			

            // Duration
            this.time = function() {

                return lapTime + (startAt ? now() - startAt : 0);
            };
        };

        
        var startAt	= startAt || 0;	// Time of last start / resume. (0 if not running)
        var lapTime	= lapTime || 0;	// Time on the clock when last stopped in milliseconds

        var stopwatch = component.get("v.stopwatch");
        var x = stopwatch || new clsStopwatch();
        if(!stopwatch){
        	component.set("v.stopwatch", x);
        }

        function pad(num, size) {
            var s = "0000" + num;
            return s.substr(s.length - size);
        }

        function formatTime(time) {
            var h = 0;
            var m = 0;
            var s = 0;
            var newTime = '';

            h = Math.floor( time / (60 * 60 * 1000) );
            time = time % (60 * 60 * 1000);
            m = Math.floor( time / (60 * 1000) );
            time = time % (60 * 1000);
            s = Math.floor( time / 1000 );


            newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2); 
            return newTime;
        }
 
        function update() {
            div.innerHTML =  formatTime(x.time());
        }

   		switch(id){
            case "start":             
                setInterval(update, 1000);
                x.start();
                update();
                break;
            case "finish":
                x.pause();
                x.finish();
                update();
                break;
            case "pause":
                //x.finish();
                x.pause();
                update();
                break;
            default:
                finish();
                break;
        }
        

	}
})