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
– charlietfl, Commented Apr 30, 2017 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
– LucaP, Commented Apr 30, 2017 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 — charlietfl
– charlietfl, Commented Apr 30, 2017 at 23:23
You should use this part of the angular JS library to load the new data in JSON docs.angularjs.org/api/ng/service/$http — Menachem Hornbacher
– Menachem Hornbacher, Commented Apr 30, 2017 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: wearegoingsolo.com/soundcloud — LucaP
– LucaP, Commented May 1, 2017 at 11:16

LucaP · Accepted Answer · 2017-05-04 09:04:36Z

1

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.

answered May 4, 2017 at 9:04

LucaP

7284 gold badges12 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Angular Dev Over a year ago

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.

LucaP Over a year ago

@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

Angular Dev Over a year ago

Really depends on the router you're using! Personally I would recommend looking into 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

Collectives™ on Stack Overflow

Reload script after ajax call

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related