setCallback returning an ERROR state - lightning component

Question

I'm trying to save a record (update) in salesforce, in a lightning component. I have a popup that retrieve the value of a record : Popup component :

 <aura:attribute name="newContact" type="Contact"
                default="{ 'sobjectType': 'Contact',
                            'FirstName': '',
                            'LastName': '',
                            'Phone': ''
                            }"/>
<aura:attribute name="idCon" type="String"/>    
<div class="slds-modal__content">
            <lightning:input type="text" label="Prénom" value="{!v.newContact.FirstName}" name="prenom" class="input" />
            <lightning:input type="text" label="Nom" value="{! v.newContact.LastName}" name="nom" class="input" />
            <lightning:input type="text" label="Téléphone" value="{!v.newContact.Phone}" name="tel" class="input"/>
        </div>
        <div class="slds-modal__footer">
            <div class="slds-x-small-buttons--horizontal">
                <lightning:button variant="brand" label="Annuler" onclick="{! c.hideModalBox }" />
                <lightning:button variant="brand" label="Enregistrer" onclick="{!c.saveContact}" />                     
            </div>
        </div>

The problem occurs when the saveContact method is called :

saveContact : function(component, event, helper){
    var action = component.get("c.createContact");
    action.setParams({"newContact" : component.get("v.newContact")});
    console.log("newContact first name : " + component.get("v.newContact.FirstName"));

    action.setCallback(this, function(a){
        console.log("state : " + a.getState());
        if(a.getState()==="SUCCESS"){
            var result = a.getReturnValue();
            component.set("v.newContact", result);
            var evt = $A.get("e.c:B_RefreshEvent");
            evt.fire();

            document.getElementById("newContactModal").style.display = "none";
            document.getElementById("backGroundSectionId").style.display = "none";

            component.set("v.newContact",{'sobjectType':'Contact',
                    'FirstName':'',
                    'LastName':'',
                    'Phone':''});

            //helper.hidePopUp(component);
        }
        else if(a.getState() === "ERROR"){
            $A.log("Errors", a.getError());
        }
    });
    $A.enqueueAction(action);
},

So when I click on the save button, nothing happen because the state of the setCallback is "ERROR".

In the apex controller the createContact method is :

@AuraEnabled
public static void createContact(Contact newContact){
    System.debug('### newContact : ' + newContact);
    upsert newContact; 
}

But it seems that I don't pass into it because I can't see the "system.bebug" in my logs... Do tou know how I can make the state to "SUCCESS" ?

Answer 1

To edit a contact you need to pass JSON string of your contact. Then in your controller deserialize it as below.

Apex Controller

@AuraEnabled
    public static void editContactInfo(String contactstr){
        System.debug(contactstr);
        Contact contactToEdit = (Contact)JSON.deserialize(contactstr,Contact.class);
        upsert contactToEdit; 
    }

Popup component controller.js make changes in your saveContact() as below

var action = component.get("c.editContactInfo");
action.setParams({"contactstr" : JSON.stringify(component.get("v.newContact"))});

this code is to create and update the contact. Hope it solves your issue.

Answer 2

Their seems to be problem in your JavaScript. I tried your code on my machine by commenting below lines and it works as expected. Below lines are commented:

var evt = $A.get("e.c:B_RefreshEvent"); evt.fire();

I've assume that you've bind your controller with your component. Below is the JavaScript:

saveContact : function(component, event, helper){
    var action = component.get("c.createContact");
    action.setParams({"newContact" : component.get("v.newContact")});
    console.log("newContact first name : " + component.get("v.newContact.FirstName"));

    action.setCallback(this, function(a){
        console.log("state : " + a.getState());
        if(a.getState()==="SUCCESS"){
            var result = a.getReturnValue();
            component.set("v.newContact", result);
            //var evt = $A.get("e.c:B_RefreshEvent");
            //evt.fire();

            document.getElementById("newContactModal").style.display = "none";
            document.getElementById("backGroundSectionId").style.display = "none";

            component.set("v.newContact",{'sobjectType':'Contact',
                    'FirstName':'',
                    'LastName':'',
                    'Phone':''});

            //helper.hidePopUp(component);
        }
        else if(a.getState() === "ERROR"){
            $A.log("Errors", a.getError());
        }
    });
    $A.enqueueAction(action);
    }