aria-expanded returns undefined

Question

I am trying to work with toggling and having some issues with it returning it's value, here is my jQuery:

$(function() {
    var x = $('#tab-battle').attr('aria-expanded');
    var y = $('#tab-tradeskills').attr('aria-expanded');
    console.log($('#tab-tradeskills').attr('aria-expanded'));
    if (x == 'true'){
        $('#battle-wrapper').css('display', '');
    } 
    else{
        $('#battle-wrapper').css('display', 'none');
    }
    if (y == 'true'){
        $('#tradeskill-wrapper').css('display', '');
    }
    else{
        $('#tradeskill-wrapper').css('display', 'none');
    }
});

Here is my HTML:

<ul class="tabs">
    <li class="tab-battle active"><a id="tab-battle" data-toggle="tab" aria-expanded="true">Battle</a></li>
    <li class="tab-tradeskills"><a id="tab-tradeskills" data-toggle="tab" aria-expanded="false">Trade Skills</a></li>
</ul>

EDIT: Forgot to say: it is returning as undefined.

 var x = $('#tab-battle').attr('aria-expanded'); var y = $('#tab-tradeskills').attr('aria-expanded'); console.log($('#tab-tradeskills').attr('aria-expanded')); if (x == 'true'){ $('#battle-wrapper').css('display', ''); } else{ $('#battle-wrapper').css('display', 'none'); } if (y == 'true'){ $('#tradeskill-wrapper').css('display', ''); } else{ $('#tradeskill-wrapper').css('display', 'none'); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="tabs"> <li class="tab-battle active"><a id="tab-battle" data-toggle="tab" aria-expanded="true">Battle</a></li> <li class="tab-tradeskills"><a id="tab-tradeskills" data-toggle="tab" aria-expanded="false">Trade Skills</a></li> </ul>

Here is my full HTML this is my main html file, which includes serveral different HTML files:

<html>
<head>
    <title># - KoG</title>
    <link rel="stylesheet" type="text/css" href="../components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../styles/game/default.css">
    <script src="../components/jquery/dist/jquery.min.js"></script>
    <script src="../js/game.js"></script>
</head>

<body>
<div class="container">
    <nav class="navbar navbar-default" role="navigation">
        <ul class="navbar navbar-nav">
            <li><button id="btn-actions">Actions</button></li>
            <li><button id="btn-profile">Profile</button></li>
            <li><button id="btn-kingdom">Kingdom</button></li>
            <li><button id="btn-inventory">Inventory</button></li>
            <li><button id="btn-alliance">Alliance</button></li>
            <li><button id="btn-mail">Mail Box</button></li>
            <li><button onclick="location.href='user/logout'" type="button">Logout</button></li>
        </ul>
    </nav>
    <div class="main-content">
        <div class="sidebar" id="sidebar">
            <!-- Include Side Bar Left -->
            <script>
            $(function(){
                $('#sidebar').load('sidebar_left.ejs');
            });
            </script>
        </div>
        <div class="game">
            <div class="quest-bar">
                <p>Quest ###<p>
            </div>
            <div class="action-timer">
                Action Timer Place Holder
            </div>
            <div class="game-content" id="game-content">
            <!-- Import views -->
                <script>
                $(function(){
                    $('#game-content').load('actions.ejs');
                });
                </script>
            </div>
        </div>
        <div class="kingdom" id="kingdom">
            <!-- Include Side Bar Right    -->
            <script>
            $(function(){
                $('#kingdom').load('sidebar_right.ejs');
            });
            </script>
        </div>
    </div>
    <div class="statistics" id="stats-button statistics-h4">
        <div class="statistic-row" id='statistic-row'>
            <!-- Include Statistics -->
            <script>
            $(function(){
                $('#statistic-row').load('statistics.ejs');
            });
            </script>
        </div>
    </div>
</div>
<script src="../components/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

My guess is, it is trying to read the id before the file gets included. EDIT: Okay so this is NOT the issue, for some reason it won't return any values for any attributes for any id, and I'm not exactly sure why.

EDIT: Okay, so I've come to the conclusion that it is because I am including these html files. What I don't understand is why. I guess the jQuery loads before it can read the ID of the included elements from said file. I'd rather not have to make a jQuery file for every included HTML file just to combat this. I'm not even sure that would work either.

Answer 1

I have figure it out, I had to use the load and pass in the function with it, as well.

    $('#game-content').load('actions.ejs', function(){
      $('#tab-battle').click(function(){
        var x = $('#tab-battle').attr('aria-expanded');
        if (x != 'true') {
          $('#battle-wrapper').show();
          $('#tradeskill-wrapper').hide();
        }
      });

      $('#tab-tradeskills').click(function(){
        var y = $('#tab-tradeskills').attr('aria-expanded');
        if (y == 'false') {
          console.log(y);
          $('#battle-wrapper').hide();
          $('#tradeskill-wrapper').show();
        }
      });
    });
  }
});

aria-expanded returns undefined

Question

1 answers

solution1
0 2017-12-21 09:30:01

aria-expanded returns undefined

Question

1 answers

solution1 0 2017-12-21 09:30:01

solution1
0 2017-12-21 09:30:01