AngularJS an Jquery

Question

I have a jsp page and i use AngularJs to loop and populate the page

<div ng-repeat="w in weatherData track by $index"
            ng-click="displayWeatherDetail(w.name)"
            class="col-md-4 col-sm-6 portfolio-item ">
            <div class="card portfolio-link ">
                <a class="portfolio-link" data-toggle="modal"
                    href="#portfolioModal6">
                    <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                            <i class="fa fa-plus fa-3x"></i>
                        </div>
                    </div> <img class="img-fluid"
                    src="resources/img/portfolio/06-thumbnail.jpg" alt="City image">
                </a>
                <div class="card-body">
                    <h3 id="test" class="card-title">{{w.name}}</h3>
                    <p class="card-text ">
                        {{w.description}} <span><img src="{{w.icon}}" /></span>
                    </p>

                    <p class="card-text text-muted">
                        Maxumum Temprature: {{w.temp}} &deg C <br> Minimum
                        Temprature: {{w.minTemp}} &deg C <br> Humidity:
                        {{w.humidity}} &deg C
                    </p>

                </div>

            </div>
        </div>

With jquery i want to retrieve the H3 element inside the card-body element with this code:

$(document).ready(function(){
alert($("#test").val());
});

I get as result undefined. If i try with text() i get empty text. Seems like that jquery runs before angularJs finish to populate the view. What i'm trying to accomplish is. I got a lot of city to display, angular take city names and information from my server, with the city name i want to contact google image api to retrieve an image of that city and add it an image inside the previous generated card.

Why do you need to do this?? Just access your own variable `w.name`. There may be several of these so you would have to know which one you wanted. But `$scope.weatherData[x].name` will give you want you want. — Intervalia, Jan 11 '18 at 15:55
but with angular you don't need to use jquery.. just get it within your scope — Phiter, Jan 11 '18 at 15:57
@Phiter ahh i see know does ng-repeat assign the "test" id on each element? Can you provide some link because i'm still learning — Mark Saferty, Jan 11 '18 at 16:01

score 0 · Answer 1 · answered Jan 11 '18 at 15:59

0

Since IDs should be unique select based upon the class.

$(document).ready(function(){
    alert($(".card-title").val());
    });

answered Jan 11 '18 at 15:59

Stephen Flynn

105
9

I got undefined – Mark Saferty Jan 11 '18 at 16:06
I think it might because the jquery ready event is firing before angular is finished rendering. A way to test this is to set a timer delay. `$(document).ready(function(){ setTimeout(function () { alert($(".card-title").val()); }, 5000); });` – Stephen Flynn Jan 11 '18 at 16:58

score 0 · Answer 2 · answered Jan 11 '18 at 15:59

0

This work :

$(document).ready(function(){

        alert("Value: " + $("#test").text());

});

But use JSP with Angular is a big error...

answered Jan 11 '18 at 15:59

Léo R.

2,620
1
10
22

score 0 · Answer 3 · answered Jan 11 '18 at 16:04

0

here is an advice use jsp or angular but not them both in same time, 1)the decision for angular contact google image api after data has been loaded from your server like ajaxRequest((weatherData)=>{/*loop weatherData and contact to google*/}), or 2)you can build a html page with jsp like here Using for loop inside of a JSP than your jquery will return the value for your last id

answered Jan 11 '18 at 16:04

Simon Pasku

539
2
4
17

Thanks for the advice, i appreciate. – Mark Saferty Jan 11 '18 at 16:07
if you don\`t want change your realization, check until angular will create dom then extract the value from it, you could try let ites =0,_inter = setInterval(()=>{ if($("#test").text() || ites++ >10)clearInterval(_inter); console.log($("#test").text() ) },100) – Simon Pasku Jan 11 '18 at 16:22

score 0 · Answer 4 · answered Jan 13 '18 at 15:02

0

Angularjs performed after the document.ready so using jquery the elements are undefined. To fix this problem i used the directives as showed in ng-repeat finish event

answered Jan 13 '18 at 15:02

Mark Saferty

1

AngularJS an Jquery

4 Answers4