1

I am trying to display a form with dropdown values; one dependent on the other. They work fine independently. But when I put them together with the callback, I do not get any values. Please assist. Controller: onSelectArea: function(component, event,helper){ helper.getState(component,event,helper); },

onSelectState: function(component,event,helper){

        helper.getCountry(component,event,helper);
}

Helper:

getState : function(component,event,helper) {

        var action = component.get("c.getStateValue");
        action.setParams({
        "State": component.find('States').get('v.value'),
    });
     action.setCallback(this,function(a){
        component.set("v.State",a.getReturnValue());

    });

   $A.enqueueAction(action); 

 },    

    getCountry: function(component, event,helper){
       var action = component.get("c.getCountryValue");
            action1.setParams({
            "Stat": component.find('States').get('v.value'),
            "Area": component.find('Area').get('v.value'),

        });
        action.setCallback(this,function(a){
                           component.set("v.Country",a.getReturnValue());

                           });
        $A.enqueueAction(action);

}

Class :
public static List<String> getStateValue(string State){
         .......
       }
       return StateList;

     }

    public static List<String> getCountryValue(string Stat, string Area){
        ..........

        }
        return CountryList;
}
  • I've tried various ways for the callback, but none of them worked. – Priya Jun 5 '18 at 9:13
0

From my point of view you have to put the snd call (after the first dropdown is selected) into the first callback. Since it is an async call you can have a situation where the first function is still running while you already call the snd one. Therefore, you have to wait for the results of your first callback and only if the results are there, you can call the other one.

no. This won't work with the 2 actions called after each other. Try something like:

// first query - callback action
var action = component.get("c.doYourQueryInController");
    action.setParams({
        queryString : query,
    });
action.setCallback(this, function(data) {
   var state = data.getState();
   if (state === "SUCCESS") {
      var yourResultsFromFirstQuery = data.getReturnValue();
      //check if results are "valid"
      // snd query
      var getComponentsAction = component.get("c.doYourQueryInController");
      sndAction.setParams({
        queryString : yourQueryString,
   });
   sndAction.setCallback(this, function(data) {
   //similar logic like before
   }}); 
   $A.enqueueAction(sndAction);
   //outer/first query here again
   ...
   });
   $A.enqueueAction(action);

So you call the snd callback function 'inside' the first one.

  • the value of the state is set based on area and the value of country is set based on State. So, they are being invoked with separate actions in the controller? – Priya Jun 5 '18 at 10:25
  • I've tried - action2.setCallback(this, function(a) { component.set("v.Country",a.getReturnValue()); }); $A.enqueueAction(action2); $A.enqueueAction(action); – Priya Jun 5 '18 at 10:27
0

I was facing the same issue when building dependent country state lists. I recommend havin a loog at JavaScript promises. That way you can

  • Define promise, that is executing a function including a callback.
  • Define even more promises, in case there is another dependency.
  • And then with promise.then() check whether the picked country is valid and fetch states.

It might look confusing in the beginning, but it makes sure, that your callbacks returned and returned the way you wanted.

  • @utm, that didn't work either. I could get only Area dependent State values. But not the country value. – Priya Jun 12 '18 at 3:50
  • Wait, are the countries dependent on the states? So one of the dependencies (area controlling state) is working? How is it working and why can't you continue with the same technique to get the second dependency working, too? – Schnaps Jun 15 '18 at 13:01
  • Yes. The State values are dependent on Area and that populates correctly. But for the country to populate, I'd need to make another callback and that's where I think this fails; like two callback functions (nested)? – Priya Jun 19 '18 at 5:49
  • Did you try working with promises? That way you can make sure, that only WHEN your area and states where loaded(and loaded without error) your callback for countries starts running. That way you can control that nesting mess a little easier, once you understand promises. Helped me a lot. – Schnaps Jun 23 '18 at 16:49
  • No. Haven't tried that as yet. Is there any documentation for the same that I could refer? – Priya Jun 28 '18 at 6:06

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.