0

I am still trying to get a members' page going, where you click on a link to see that member's bio details show in a specific div further down the page. (I don't want to use frames to do this.) Below is the current version I've got, using suggestions from other threads, but nothing happens when I click the links. I'm still a newbie at this, and appreciate any help. I haven't created a fiddle so you can see the whole attribution - one error I noticed from an earlier version was a reference in my code to a version of jQuery older than the ones being used in the fiddles.

<!DOCTYPE HTML> 
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Can YOU get this to work?</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js">
    $(document).ready(function()) {
        $(".link").click(function(){    
            $(".hide").hide();
            var dataType = $(this).attr('data-type');
            $("#" + dataType).show();
        });
    });
    </script>
    <style type="text/css">

    #profiles {background:#FFFFCC; border-style:solid; border-color:#ffd119; padding:15px; width:600px;text-align:left;position:absolute; top:450px;left:180px;}
    .show {display:block; width:600px;}
    .hide {display:none;}
    .biopic {float:left; margin-right:15px; width:200px; height:200px; border-style:solid; border-color:#000099;clear:left;}
    .biostext {display:inline; margin-left:15px; font-family:Georgia, serif; clear:right;}
    #bioLinks {float:left; display:block; font-family:Georgia, serif;  margin-left:25px; margin-top:15px;clear:right;}
    .link {font-family:Georgia,serif; color:#0000ff; text-decoration:none;}

    #Section {font-family:Georgia, serif;float:left; display:block; width:150px; margin-right:15px; margin-top:15px; text-align:right;}
    </style>

    </head>
    <body>
    <div id="Section">
    Honcho<br>Grand Poo-Bah<br>Dogsbody
    </div>
    <div id="bioLinks">
      <div><a href="#" data-type="bio1" class="link">Joe Bloggs</a></div>
      <div><a href="#" data-type="bio2" class="link">Monica Faux</a></div>
      <div><a href="#" data-type="bio3" class="link">John Doe</a></div>
      </div>
    <div id="profiles">
        <div id="bio1" class="hide">
            <div class="biopic"><img src="http://www.northshorebrass.org.nz/images/members_photos/JBloggs.jpg" width="200" height="200" alt="Joe Bloggs"></div>
            <div class="biostext">Joe Bloggs is swell.</div>
            </div>
            <div id="bio2" class="hide">
                    <div class="biopic"><img src="http://www.northshorebrass.org.nz/images/members_photos/MFaux.jpg" width="200" height="200" alt="Monica Faux"></div>
            <div class="biostext">Monica Faux is considering some changes in her life.</div>
        </div>
        <div id="bio3" class="hide">
            <div class="biopic"><img src="http://www.northshorebrass.org.nz/images/members_photos/JDoe.jpg" width="200" height="200" alt="John Doe"></div>
            <div class="biostext">John Doe is an unknown.</div>
        </div>
    </div>
    </body>
    </html>
user2755954
  • 1
  • 1
  • 4
  • 1
    You have the same id attribute for multiple elements (i.e. #bio1 is the id for an anchor and a div). Id's should be unique for each element. – Andrew Briggs Sep 15 '13 at 01:34
  • Thank you, but it still doesn't work. In examining the fiddle (and the fiddles for the previous time the community has tried to solve this problem), I noticed that the fiddles run in HTML5, and my doc was specified as HTML 4.01 transitional. So I modified the code as per Briggs & @scotsninja and adjusted the DOCTYPE as above. Drum roll...still nada. *sound of head banging on desk* Does anybody have more ideas? – user2755954 Sep 21 '13 at 06:25
  • W3.ord validation gives me an error thus "Line 14, Column 13: The text content of element script was not in the required format: Expected space, tab, newline, or slash but found $ instead." The Line & Column reference is to the closing of the script. – user2755954 Sep 21 '13 at 06:45

2 Answers2

2

$.data() is not the proper method for retrieving attributes from an HTML node. You'll want to use the $.attr() method

$(this).attr('data-type');

Will return the value of the data-type attribute set on the links.

scotsninja
  • 109
  • 4
  • 1
    Why is data() not the proper method? The links are using the HTML5 data- attributes. The jQuery api says to retrieve data attributes using data() http://api.jquery.com/data/. – Andrew Briggs Sep 15 '13 at 02:03
  • Sorry, you are right; but `attr()` is faster than `data()` for [simple retrieval](http://jsperf.com/jquery-data-vs-attr/22). The `data()` method will also return attributes, but also performs additional checks for [auto-casting values](http://stackoverflow.com/questions/7261619/jquery-data-vs-attr). In brief, `attr()` is faster for get operations of simple data types, but `data()` is safer for set operations. – scotsninja Sep 15 '13 at 02:21
  • I have modified my code as per the suggestions and those of Briggs, and have been twigged on that your code is HTML5 and my document type was HTML 4.01 Transitional. So I fixed the DOCTYPE and code, and it still doesn't work outside of the fiddle. Further scoping of the attributes in the fiddle isn't helping this newbie - what other assumptions does the fiddle make that my code doesn't? – user2755954 Sep 21 '13 at 06:43
1

Remove or rename the duplicate ID tags (bio1, bio2, bio3).

  <div><a href="#" data-type="bio1" class="link">Joe Bloggs</a></div>
  <div><a href="#" data-type="bio2" class="link">Monica Faux</a></div>
  <div><a href="#" data-type="bio3" class="link">John Doe</a></div>

Using scotsninja's answer:

$(document).ready(function() {
    $(".link").click(function() {    
        $(".hide").hide();
        var dataType = $(this).attr('data-type');
        $("#" + dataType).show();
    });
});

Fiddle: http://jsfiddle.net/V6MTD/

Andrew Briggs
  • 1,329
  • 12
  • 26
  • I see that this works in the fiddle, but this code does not work on the html page. I deleted the id= bits as per your example as well. – user2755954 Sep 21 '13 at 05:49