I use Plangular which is a directive that use Angular JS and Soundcloud API to play some songs. Of course it needs Soundcloud jdk, angular and its js.
I tryed then to load dynamically external content in a div through ajax in this way:
$(document).ready(function(){
$("body").on('click', '#chart_best',function(){
$.ajax({url: "chart_best.html", success: function(result){
$(".container").html(result);
}});
});
$("body").on('click', '#chart_best_indie_pop',function(){
$.ajax({url: "chart_best_indie_pop.html", success: function(result){
$(".container").html(result);
}});
});
$("body").on('click', '#chart_best_punk',function(){
$.ajax({url: "chart_best_punk.html", success: function(result){
$(".container").html(result);
}});
});
});
The new content is loaded correctly, but the player simple doesn't work. It sounds like it needs to reload the JS after the ajax call. I tryed use a .live
but it doesn't work. Also tryed to remove the script and reload them through a $.getScript() but still the player doesn't work. I replicated the issue in this project: https://codepen.io/GoingSolo/project/editor/DNVyJD/ if you click on the left list to load new content, the player simple stop working. Which is the best way to re-load all the scripts Plangular needs to work after my ajax call?
For anyone interested in how I solved this, basically, as suggested, i changed my ajax call into angularjs $http
like this:
gsplayer.controller('SearchBar', function($scope, $http) {
$scope.chart_best = function() {
$scope.dataLoaded = false;
$http.get("../themes/replay/chart_best.php").then(function (response) {
$scope.myData = response.data;
$scope.chartTitle = "Top 20 Tracks";
$scope.dataLoaded = true;
});
};
$scope.chart_best_indie_pop = function() {
$scope.dataLoaded = false;
$http.get("../wp-content/themes/replay/chart_best_indie_pop.php").then(function (response) {
$scope.myData = response.data;
$scope.chartTitle = "Best Indie Pop Tracks";
$scope.dataLoaded = true;
});
};
$scope.chart_best_punk = function() {
$scope.dataLoaded = false;
$http.get("../wp-content/themes/replay/chart_best_punk.php").then(function (response) {
$scope.myData = response.data;
$scope.chartTitle = "Best Punk Tracks";
$scope.dataLoaded = true;
});
};
});
Then i had to rewrite the three php
pages in order to retrieve the desired data in json format and access to myData
.