Issue
I try to pass a data in ajax return and in that data there is function that write in angular 1 ng-click like
$.ajax({
'method': 'GET',
'url': base_url +'party/selectCities?id='+state,
success: function(data) {
var newData = data.replace(/\"/g, "")
if(newData == ""){
}else{
var jsdata = JSON.parse(data);
var html = ``;
$.each(jsdata, function (index, item) {
console.log(item);
html += '<li onclick="selectcityclubs(\'' + item.city + '\');">' + item.city + '</li>';
});
$("#home-city-listing").html(html);
}
}
});
it show in page normally and i inspect that that also show correctly like.
<ul class="partylist ng-scope" id="home-city-listing" ng-controller="clubController">
<li ng-click="selectcityclubs('Chittoor');">Chittoor</li>
<li ng-click="selectcityclubs('Cuddapah');">Cuddapah</li>
<li ng-click="selectcityclubs('East Godavari');">East Godavari</li>
</ul>
why that function not working not any response in page and console not show any error, how to solve this issue please help me
Solution
EDIT: See new JsFiddle to see updated answer without jQuery, using only angular
Stack Overflow Code should also work now
Take a look at Jsfiddle because the StackOverflow code won't run.
Pretty much instead of using jQuery to output the <li> elements, use ng-repeat in the HTML.
The code below uses try/catch to make the HTML load with 2 cities, because it won't work on JsFiddle/StackOverflow with ajax.
If this doesn't work then I'm not sure what your selectcityclubs function is doing and might have an error in there.
// setup variables to make code look as close to original
let base_url = '';
let state = 'NorthBoa';
angular.module('app', [])
.controller('clubController', function($scope, $http) {
// handles the button click
$scope.selectcityclubs = function(c) {
console.log('Button clicked: ' + c);
alert(c);
}
$scope.jsdata = [];
$http.get(base_url + 'party/selectCities?id=' + state)
.then(function onSuccess(response) {
console.log('Success!');
console.log(response);
// make sure you check response.data
$scope.jsdata = response.data.replace(/\"/g, "");
})
.catch(function onError(response) {
console.log('Error, couldnt access ajax.');
console.log(response);
// adding here because we can't get to the AJAX URL
$scope.jsdata = [{
city: 'North Goa'
}, {
city: 'South Goa'
}];
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="app">
<a href="https://jsfiddle.net/dweuc6kL/1/">Take a look at JsFiddle with updated answer for 1.4.8</a>
<h2>Using angular 1.7.5</h2>
<ul class="partylist" id="home-city-listing" ng-controller="clubController">
<li ng-repeat="city in jsdata" ng-click="selectcityclubs(city.city);">{{city.city}}</li>
</ul>
</body>Answered By - treckstar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.