0

This might be a bit to read, but I think it would be fairly confusing without some context. Right now, I have a site that has angular keeping the same header on all my pages, simply including an ng-view to load a specific page's content. My index.html file looks something like this

<!DOCTYPE html>
<html lang="en">
<!-- MY HEADER -->

<div class="ng-view"></div>

<!-- MY FOOTER -->

<!-- Angular scripts -->
<script src="js/angular/angular.min.js"></script>
<script src="js/angular-route/angular-route.min.js"></script>

<!-- Angular app script -->
<script src="js/app.js"></script>

<!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

<!-- MY JAVASCRIPT-->
<script src="js/filter.js"></script>

</html>

In one of my views, I am trying to set up a table filter (filtering a list of tournaments based on year). The view file is named archives.html, and currently looks like:

<div class="row">
<div class="col-lg-12">
  <div class="panel panel-default">
      <div class="panel-body">
        <div align="center">
          <div class="btn-group">
            <button type="button" class="btn btn-filter" data-target="2016">2016</button>
            <button type="button" class="btn btn-filter" data-target="2015">2015</button>
            <button type="button" class="btn btn-filter" data-target="2014">2014</button>
          </div>
        </div>
        <br>
      <div class="table-responsive">
        <table class="table table-filter table-hover">
          <thead class="thead-inverse">
              <tr> 
                <th>Tournament</th>
                <th>Link</th>
              </tr>
          </thead>
          <tbody>
              <tr data-status="2016">
                <td>Capilano Junior</td>
                <td><a href="http://bcgazone4.bluegolf.com/bluegolf/bcgazonefour16/event/bcgazonefour165/leaderboard.htm">Results</a></td>
              </tr>
              <tr data-status="2015">
                <td>Point Grey Junior</td>
                <td><a href="http://bcgazone4.bluegolf.com/bluegolf/bcgazonefour16/event/bcgazonefour1611/leaderboard.htm">Results</a></td>
              </tr>
              <tr data-status="2014">
                <td>Shaughnessy Junior</td>
                <td><a href="http://bcgazone4.bluegolf.com/bluegolf/bcgazonefour14/event/bcgazonefour144/leaderboard.htm">Results</a></td>
              </tr>
          </tbody>
        </table>  
      </div>
    </div>
  </div>
</div>

And finally, the javascript code, in js/filter.js: 

$(document).ready(function () {

$('.btn-filter').on('click', function () {
  var $target = $(this).data('target');
  if ($target != 'all') {
    $('tbody tr').css('display', 'none');
    $('tbody tr[data-status="' + $target + '"]').fadeIn('slow');
  } else {
    $('tbody tr').css('display', 'none').fadeIn('slow');
  }
});
});

I am assuming that angular loads all of the scripts I included in my index.html file for each individual view, such that in filter.js, the table in my archives.html view will be successfully located. However, nothing is happening with the filter. Am I wrong in this assumption, or am I being careless with other parts of the javascript?

Punit Gajjar
  • 4,937
  • 7
  • 35
  • 70
K. Li
  • 68
  • 1
  • 12
  • if you have a js code executing when you view is not loaded and you are binding some event to one or more elements that may exist in the view then those events wont get binded because when you element is not even present in the DOM you can not bind anything to it, So what i would say is try to bind this event after biew loads. Have a look at this http://stackoverflow.com/questions/30332945/jquery-click-events-not-working-with-angularjs – Manish Nov 21 '16 at 05:25
  • this pointed me in the right direction, thanks a lot. – K. Li Nov 21 '16 at 19:43

2 Answers2

0

You have two problems right now. First, you declared the buttons with id="btn_filter" so the event listener should be bound with "#" 

$('#btn-filter').on('click', function () {});

Second, "id" should be unique per DOM elements and should not be repeated like you did.

Edit: Based on edits on question, there is a typo with class="btn_filter" and $('.btn-filter') replace underscore with dash.

Edit: Another problem is $('.tbody tr[data-status="' + $target + '"]') replace .tbody with tbody

Mouneer
  • 12,827
  • 2
  • 35
  • 45
  • sorry, that was a typo. I had tried that earlier, and had forgotten to change that back. Just to clarify, with the "btn btn-filter" class, it still has the same problem. – K. Li Nov 21 '16 at 00:17
  • You're completely right. The other '.tbody' lines above and below should also be changed to 'tbody' shouldn't they? – K. Li Nov 21 '16 at 01:18
  • Yes, exactly the same :) – Mouneer Nov 21 '16 at 01:25
  • Glad to answer you question. Don't forget to mark my answer as the correct one. – Mouneer Nov 21 '16 at 01:27
  • unfortunately it's still broken haha – K. Li Nov 21 '16 at 05:04
  • It would be a logical error .. so please describe what the purpose exactly of your code and let me check ho to help. Update your question and I will check later. – Mouneer Nov 21 '16 at 09:14
0

Managed to find a working solution by making a controller inside my app.js set up specifically for my view, and calling a function I defined in my controller through an ng-click that triggers the javascript for the relevant button. The console logs work now, as I believe it was a problem with trying to access an element before the view had been successfully loaded. Thanks to everyone who helped out.

snippet from archives.html

<div align="center">
          <div class="btn-group">
            <button type="button" class="btn btn-primary" id="btn2016" ng-click="toggle_year(2016)">2016</button>
            <button type="button" class="btn btn-primary" id="btn2015" ng-click="toggle_year(2015)">2015</button>
            <button type="button" class="btn btn-primary" id="btn2014" ng-click="toggle_year(2014)">2014</button>
            <button type="button" class="btn btn-primary" id="btn2013" ng-click="toggle_year(2013)">2013</button>
            <button type="button" class="btn btn-primary" id="btn2012" ng-click="toggle_year(2012)">2012</button>
            <button type="button" class="btn btn-primary" id="btn2011" ng-click="toggle_year(2011)">2011</button>
            <button type="button" class="btn btn-primary" id="btn2010" ng-click="toggle_year(2010)">2010</button>
          </div>
        </div>

App.js:

var app = angular.module('zone_4_app', ['ngRoute']);

app.config(function($routeProvider) {
$routeProvider
  .when('/', {
    templateUrl: 'pages/archives.html',
    controller: 'archiveController'
  })

  // A bunch of other routing 
});

app.controller('archiveController', ['$scope', function($scope) {
$scope.toggle_year = function(year) {

  console.log('filter button clicked: ' + year);
  var $target = year;
  var $btn = '#btn' + year;
  if ($target != 'all') {

    $('.btn-primary').each(function () {
            $(this).removeClass('active');
        });
    $('tbody tr').css('display', 'none');
    $('tbody tr[data-status="' + $target + '"]').fadeIn('slow');
    $($btn).addClass('active');
    console.log('printing out results of year: ' + year);
  } else {
    $('tbody tr').css('display', 'none').fadeIn('slow');
    console.log('no results');
  }

}

}]);

K. Li
  • 68
  • 1
  • 12