Reload script after ajax call

Question

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?

Using jQuery to do all this is just completely wrong approach in an angular app — charlietfl, Apr 30 '17 at 23:16
@charlietfl thanks for reply, can you explain me better why it's a bad approach? what should I use instead of jquery to make some ajax calls? — LucaP, Apr 30 '17 at 23:19
Should be using angular methodology and angular `$http` and probably doing this within directive. Strongly suggest reading [“Thinking in AngularJS” if I have a jQuery background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) — charlietfl, Apr 30 '17 at 23:23
You should use this part of the angular JS library to load the new data in JSON https://docs.angularjs.org/api/ng/service/$http — Menachem Hornbacher, Apr 30 '17 at 23:26
@charlietfl thanks for the hint. I'm trying to understand it better, but I have a question. With $http is it possibile to load only json data? Since I'm working in wordpress the pages I'm trying to load are in php, I should transform my php pages into json data? This should be my final goal: https://www.wearegoingsolo.com/soundcloud — LucaP, May 01 '17 at 11:16
@charlietfl I solved using Angular, thanks for address me in the right way — LucaP, May 02 '17 at 10:27

score 1 · Accepted Answer · answered May 04 '17 at 09:04

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.

Good solution. A tip for the future, stay away from using jQuery in combination with angularJS as all jQuery events don't trigger digest cycles (Change detection) try to use as many angular services as possible as they **do** trigger change detection. Which won't leave you banging your head why your view or model isn't updating as you would expect. — realappie, May 04 '17 at 09:08
@Abdel thanks for the tip. Have you any hint about how can I change the url after the http.get? I read the doc for the routing but i'm not sure how to approach it in my working code — LucaP, May 04 '17 at 09:55
Really depends on the router you're using! Personally I would recommend looking into [ui-router](https://github.com/angular-ui/ui-router) as it's still being maintained. If you are done setting up your routes, you will probably have to use the `$state` service by using `$state.go('routeName')` in the callback of your `http.get` ! Here is their [documentation](https://github.com/angular-ui/ui-router/wiki) — realappie, May 04 '17 at 10:17

Reload script after ajax call

1 Answers1