-2

I am trying to maintain the Back functionality. In our application, we have decided to put a back button and with the click of the back button, I have to maintain all the values of the form which a user has selected or filled. I am doing this in MVC with angularjs.

In the form, we have allowed a user to choose a color for the selected mobile model. So, the form is like the user will prompt to choose a Phone Model and then its Color and finally its Capacity. So, its a dependent fields which will be enabled only if the immediate field is selected.

The Color is created dynamically.

In my code below, which I have shared below is for the Color. After choosing the Color then I have enable the required capacities as well.

var elementName = modelName + '_Black';
var elementNameWithHash = '#' + elementName;
angular.element(elementNameWithHash).trigger("click", elementName);

modelName would be passed to it at dynamically.

The problem here lies is, the code is not executing to trigger a click for the Color section, so that it can be shown as highlighted and the below section of the capacity is enabled.

But, this code won't execute until and unless I am decorating it with setTimeout method like this:

setTimeout(function () { angular.element(elementNameWithHash).trigger("click", elementName) }, 1);

I am not able to understand why it showing this weird behavior to me.

Any light on this, would be greatly appreciated.

And, if I have to call this without setTimeout what I have to do?

HarshSharma
  • 630
  • 3
  • 9
  • 34
  • This sounds like it could be a race condition of sorts, e.g. the hash element isn't yet available if you directly make the call, but waiting for a while allows the call to proceed. You might want to include the full code so we can see it. – Tim Biegeleisen Nov 28 '16 at 07:39
  • @TimBiegeleisen please check and let me know if something else if required. – HarshSharma Nov 28 '16 at 07:52
  • why are you triggering a click on the element? if its to trigger a function which is called on click, just call the function directly. – William B Nov 28 '16 at 07:53
  • 2
    Probably your elements aren't yet loaded. So with setTimeout it gives an extra digest cycle where the document is loaded and the elements are now available, and hence it works with setTimeout. You probably might need to consider this approach. http://stackoverflow.com/questions/18646756/how-to-run-function-in-angular-controller-on-document-ready – Lokesh Nov 28 '16 at 07:57
  • "modelName" value is returned by a promise? – sTx Nov 28 '16 at 08:05
  • this feels like an [XY Problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem/66378#66378). This kind of code in angular isn't normal, and whenever you have to resort to using `setTimeout` (which in itself isn't angular aware, `$timeout` is), you are trying to fight the framework, which probably means there is a better way to do whatever it is you want to accomplish, but you haven't described your goal, only your flawed solution. – Claies Nov 28 '16 at 08:53
  • @Claies I want to call the code without using setTimeout, so that it may work without it. – HarshSharma Nov 28 '16 at 09:29
  • Thanks @Lokesh I have gone through your suggestion but it seems not to be working. – HarshSharma Nov 28 '16 at 09:30
  • that's my point, we don't really know what it is you are trying to do with the code; only that what you are trying to do isn't agreeing with angular. – Claies Nov 28 '16 at 09:43
  • so you are trying to have the server set some angular properties and then automate the click so that angular will process the values? this really seems unusual and unnecessary. this still isn't a [mcve] of your behavior – Claies Nov 28 '16 at 15:45
  • Also, from what you are describing, there are better ways to accomplish what you are trying to do than the way you are trying now. That being said, if automating the click is something you *really* want to do, then a timeout makes sense, since you definitely would have to wait until the DOM has been rendered. – Claies Nov 28 '16 at 15:48

1 Answers1

0

It looks like your code is called before the page is loaded.

Angular has its own function to test on document ready:

angular.element(document).ready(function () {
    // Your code
});
Mistalis
  • 17,793
  • 13
  • 73
  • 97