5
  1. Controller that takes the user input for the billing street
  2. send it to the Apex Controller which returns the same thing back
  3. Hides the section
  4. Shows a different section, then on click of a button shows the previous section

Result: Input fields no longer have the value, placeholder is gone, object still has correct values....It only happen when the section is hidden....

App

<aura:application description="myProblemApp" access="PUBLIC" extends="ltng:outApp"> <aura:dependency resource="c:myProblemComponent"/> </aura:application>

Component

<aura:component description="myProblemComponent" controller="myProblemController">

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <aura:attribute name="theAccount" access="public" default="{'sobjectType' : 'Account'}" type="Account" required="true"/>
    <aura:attribute name="isEdit" access="public" type="Boolean" default="true"/>

    <aura:renderIf isTrue="{!v.isEdit}">
        <fieldset class="slds-form--compound">
            <legend class="slds-form-element__label slds-text-title--caps">Address</legend>
            <div class="slds-form-element__group">
                <div class="slds-form-element__row">
                    <lightning:input aura:id="bAddress" name="bAddress" label="Address"
                                     placeholder="Enter Billing Address"
                                     type="String"
                                     value="{!v.theAccount.BillingStreet}"
                                     required="true"/>

                </div>
            </div>

        </fieldset>

        <div class="slds-align--absolute-center">
            <lightning:button aura:id="save_btn" label="Save Billing Address" name="baButton" variant="brand"
                              onclick="{!c.upsertAccount}" disabled="false"/>
        </div>

        <aura:set attribute="else">
            <article class="slds-card slds-card--compact">
                <div class="slds-card__header slds-grid">
                    <header class="slds-media slds-media--center slds-has-flexi-truncate">
                        <div class="slds-media__figure">
                            <span class="slds-icon_container slds-icon-standard-contact"
                                  title="description of icon when needed">
                                <c:svgIcon category="standard" size="small" name="contact"
                                           svgPath="/resource/AppFrontier_Assets/assets/icons/standard-sprite/svg/symbols.svg#user"/>
                            </span>
                        </div>
                        <div class="slds-media__body">
                            <h2>
                                <a href="javascript:void(0);" class="slds-card__header-link slds-truncate">
                                    <span class="slds-text-heading--small">Card Header</span>
                                </a>
                            </h2>
                        </div>
                    </header>
                    <div class="slds-no-flex">
                        <button type="button" onclick="{!c.editAddress}" class="slds-button slds-button--neutral">Edit
                        </button>
                    </div>
                </div>
                <div class="slds-card__body">
                    <div class="slds-grid slds-grid--align-center">
                        Card Body (custom goes in here)
                    </div>
                </div>
                <div class="slds-card__footer">Email</div>
            </article>
        </aura:set>
    </aura:renderIf>


</aura:component>

JS Controller

({
    doInit: function (component, event, helper) {

    },
    upsertAccount: function (component, event, helper) {

        var action = component.get("c.upsertTheAccount");
        var a = component.get("v.theAccount");

        component.find('save_btn').set('v.disabled', true);

        action.setParams({
            "acc": JSON.stringify(a) //Need to stringify this or we get Unable to read sObject Error
        });

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

            if (state == "SUCCESS" && component.isValid()) {
                var r = response.getReturnValue();
                component.set("v.theAccount", r);
                component.set('v.isEdit',false);

            }
            else {
                console.log("failed  ::: " + response.getError()[0].message); // Unable to read sObject

            }
            component.find('save_btn').set('v.disabled', false);
        });

        $A.enqueueAction(action);
    },
    editAddress : function(component){

        console.log(component.get('v.theAccount'));
        component.set('v.isEdit',true);
    }
})

Apex Controller

public class myProblemController {
    @AuraEnabled
    public static Account upsertTheAccount(string acc) {
        Account a = (Account)json.deserialize(acc,Account.class);
        return a;
    }

}

Apex Page

<apex:page id="myProblemPage" showHeader="false" sideBar="false" standardStylesheets="false">


        <apex:includeLightning/>

        <script>

            $Lightning.use("c:myProblemApp", function () {
                $Lightning.createComponent(
                        "c:myProblemComponent",
                        {},
                        "the_content",
                        function (cmp) {
                        });
            });

        </script>

                <div id="the_content">
                </div>

</apex:page>

Screens

On Load

enter image description here

Entered Value

enter image description here

After button click

enter image description here

On Edit Click

enter image description here

Now, i MUST be doing something fundementally wrong here cause this is such a basic scenario that if I am having this much trouble I find it hard to believe anyone can get anything done with lightning. I have spent my whole day trying to get this working but I can't.

I am leaning on you all for assistance....Otherwise, I give up.....

3
  • 1
    Your post has drastically reduced my fledgling interest to convert our SF from Classic to Lightning. Looks like we will further delay our lightning implementation by few more months :)
    – Varun
    Jan 11, 2017 at 2:36
  • Looks like the only way so fare is liberal use of $A.util.toggleClass(ele,'sods-hide') and replacing the renderIf with regular divs......Ugh....
    – Eric
    Jan 11, 2017 at 2:56
  • @ZenSeeker - Don't give up. Its really cool and fun to learn (frustrating at times). It seems very fickle too but when it works it is pretty cool. Once I get it down I will prefer it to VF any day....
    – Eric
    Jan 11, 2017 at 6:45

1 Answer 1

8

I was able to reproduce the issue, its seems like you are using the deprecated aura:renderIf instead of recommended aura:if.

aura:renderIf is Deprecated. Use aura:if instead.

Using aura:if will fix your issue.

6
  • Using auraIf yields Cannot read property 'set' of undefined for me. Will check into it more. Maybe it is the beta component being used with a depreciated component
    – Eric
    Jan 11, 2017 at 3:54
  • @Eric I ran your code in my dev org(winter'17) using a lightning app with the above mentioned fix, the code worked fine.
    – Praveen
    Jan 11, 2017 at 3:57
  • Yea, the above is so you could reproduce it. It is not my exact code. Right now I cannot use aura:if. Caught between rock and hard place.....
    – Eric
    Jan 11, 2017 at 3:58
  • 5
    BTW This is what i LOVE about this place. Something that took me all day (learning curve) is solved within an hour by someone who has seen it before. I would have still been working on this until who knows when. A BIG Thank You!!!!
    – Eric
    Jan 11, 2017 at 4:35
  • 2
    Glad I could help :-). Just doing my part for this awesome community.
    – Praveen
    Jan 11, 2017 at 4:36

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .