+ Start a Discussion
Aruna VasahanAruna Vasahan 

Jquery append in lightning components

Hi guys,
           In my lightning controller I have a jquery code like this.
var Obj = JSON.parse(response.getReturnValue());
    $("#type").html("Type :");
    $("#demo").html(Obj.Type);
For this I'm receiving in 2lines.But I need my output to be displayed in a single line, like
 Type : Something
For this in Jquery there are methods like append, after, prepend. But when I tried to use them I'm not able to get the desired output. Does anyone know about this?

Thanks
Aruna


 
Best Answer chosen by Aruna Vasahan
Roshni RahulRoshni Rahul
Hi aruna,

Got the solution for you.
$("#type").html("Type :"+Obj.Type );

You the above code.
If it not,please let me know.
Its working fine for me :) . Please mark it as best answer if it works.

Regards 
Roshni

 

All Answers

Roshni RahulRoshni Rahul
Hi Aruna,

Please try the below.
var Obj = JSON.parse(response.getReturnValue());
var addString  = $("#demo").html(Obj.Type);
$("#type").html("Type :"+addString );
If its not working, let me know.

Regards
Roshni
 
Aruna VasahanAruna Vasahan
Roshni,
         I haven't received the expected output.
  This is what I received as output  -->Type :[object Object]
Thanks
Aruna
 
Roshni RahulRoshni Rahul
Can you check the console and find the index of the Object.
OR can you post your code so we can find the issue.
Aruna VasahanAruna Vasahan
Hi Roshini,
              I debugged my code but I was not able to find the mistake So I have uploaded my code below.Please look after it.
<aura:component controller="ParamController" access="global" implements="force:lightningQuickAction,force:hasRecordId">
   <ltng:require scripts="{!$Resource.jQuery}" />
    Record Id is 

<ui:outputText aura:id="client"  
    value="{!v.recordId}" click="{!c.echo}" />
    
    <div id="type"></div>
 <div id="demo"></div>
    
     <div id="industry"></div>
    <div id="demo1"></div>
    
    <div id="rating"></div>
    <div id="demo2"></div>
        
 </aura:component>
({
    echo : function(component, event, helper) {
          var nameField = component.find("client");

	       var expname = nameField.get("v.value");

       var action = component.get("c.serverEcho");
        action.setParams({ recordId :expname });

  action.setCallback(this, function(response) {
            var state = response.getState();


            if (state === "SUCCESS") {
              var Obj = JSON.parse(response.getReturnValue());
      
             
               var addString = $("#demo").html(Obj.Type);
               $("#type").html("Type :"+addString );
                     
                
                $("#industry").html("Industry :");    
                $("#demo1").html(Obj.Industry);
                
                $("#rating").html("Rating :");
                $("#demo2").html(Obj.Rating);
                
                    
            }
        
            else if (state === "INCOMPLETE") {
               
            }
          
            else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " + 
                                 errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });

        $A.enqueueAction(action);
    }
})

public class ParamController {
     @AuraEnabled
public static String serverEcho(Id recordId) {


 Account acct=[SELECT Type,Industry,Rating FROM Account WHERE Id=:recordId];
   System.debug('hello');
    System.debug('Hai there!!!');
    
 //return acct;
 
 String ser=JSON.serialize(acct);
   
   // System.debug('ser'+ser);
    return ser;
    }
}
Thanks
Aruna
 
Roshni RahulRoshni Rahul
Hi aruna,

Got the solution for you.
$("#type").html("Type :"+Obj.Type );

You the above code.
If it not,please let me know.
Its working fine for me :) . Please mark it as best answer if it works.

Regards 
Roshni

 
This was selected as the best answer
Aruna VasahanAruna Vasahan
Roshini,
          I am receiving output as  Type :undefined
I don't know what's wrong here.
Thanks
Aruna
 
Roshni RahulRoshni Rahul
I have tried by assigning recordID of account.
<ui:outputText aura:id="client" value="0012800000RBuxI" click="{!c.echo}" />
Then im getting output as
User-added image
Just check whether there is any error while passing ID.
 
Aruna VasahanAruna Vasahan
Hi,
    I have given my code & screenshot below.
<ui:outputText aura:id="client"  
    value="00128000010WzFTAA0" click="{!c.echo}" />

User-added image
Thanks
Aruna
Roshni RahulRoshni Rahul
Hi Aruna,

The problem is that for the record you have entered, you havent selected the type for that record. It is empty.
User-added image

If you select the type, Then it will show. Just try it..
Aruna VasahanAruna Vasahan
Roshini,
          Yes the account which I took to test my code was not entered with account type. Now I got the desired output. Thanks :D
Regards
Aruna
Roshni RahulRoshni Rahul
:).. If it works, can you mark my answer as best answer.