how do actions with DOM right after ajax model propagations

[Michael Cherkasov]

Hi there,

there's my code: https://gist.github.com/anonymous/8cb675d8accc3e970e63

I load data via AJAX and populate the data to controller variable that is bound to DOM, it should be rendered 

to list of links, right after this I need to click the first link:

loadEngineersList( function(engineers) {
    $scope.engineers = engineers; // data propagation
    $('#bugsTable a:first').click(); // click
});

But clicking doesn't work, because link doesn't exists at this moment and model isn't rendered yet.

I have on click event that loads other data, so what is right way to activate loading and link selection?

Thanks,
Mikhail.

[Mo Moadeli (CREDACIOUS)]

Could be a variation of things.  Please post a short plunker.

[Michael Cherkasov]

Hi Mo,

short version:

$http.get('engineers/all').success(function(data) { // let's load some data

                $scope.engineers = engineers; // ok, we get Data let's render them on page, $scope.engineers is bound to template
                $('#bugsTable a:first').click(); // now I need to click on created link, I expected that link was created on line above, but it wasn't. So what is the right way to make "click" in this case?
});
 

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/Wbc-KHSQvaU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Sander Elias]

Hi Mo,

Ah, now I get your problem. You need to attach your 'click' in the next digest cycle. When the data comes in, it isn't rendered to the view directly, but rather checked and handled by angular, and then added to the view. This means that when you do a $(xxx).yyy on the next line, the dom isn't there yet. So you need to make sure your code happens in the next cycle. do something like this:

$http.get('engineers/all').success(function(data) { // let's load some data

 $scope.engineers = engineers; // ok, we get Data let's render them on page, $scope.engineers is bound to template

 $timeout(function () {

     $('#bugsTable a:first').click(); // now I need to click on created link, I expected that link was created on line above, but it wasn't. So what is the right way to make "click" in this case?

 },0);
});

Don't forget to inject $timeout in the containing function.

Does that help you a bit?

Regards
Sander