1

Alright, I'm currently working to create on an account mainpage a applet to show each "kid" the user has registered to the site. My idea is simple :

Kid 1 / Kid 2 / Kid 3

As buttons (with style and such) when he goes on this page. When he clicks on one of those buttons/names, I use javascript to show the description of the infos of the kid, etc. When I click on another name, the current content closes and shows the new appropriate content.

The content is dynamically created, so the id's of the divs containing the info are named after the number of kids. Example : content_Info_Kid1, content_Info_Kid2, ... It doesnt matter how many kids there are, they will be named content_Info_Kid32 if need be.

Now, I'm not too comfy with AJAX and javascript in general. In fact, I am not at all.

My first idea was to do this in a separate javascript file.

$(document).ready(function() {
$("#content_info_kid1").hide();
$("#content_info_kid2").hide();
$("#content_info_kid3").hide();
$("#KID_1").click(function () {
 if ($("#content_info_kid1").is(":hidden")){
 $("#content_info_kid2").hide();
 $("#content_info_kid3").hide();
 $("#content_info_kid1").show("slow");
 $(this).css("font-weight","bold");
 $("#KID_2").css("font-weight","normal");
 $("#KID_3").css("font-weight","normal");
 }
});
$("#KID_2").click(function () {
 if ($("#content_info_kid2").is(":hidden")){
 $("#content_info_kid1").hide();
 $("#content_info_kid3").hide();
 $("#content_info_kid2").show("slow");
 $(this).css("font-weight","bold");
 $("#KID_1").css("font-weight","normal");
 $("#KID_3").css("font-weight","normal");
 }
});
$("#KID_3").click(function () {
 if ($("#content_info_kid3").is(":hidden")){
 $("#content_info_kid2").hide();
 $("#content_info_kid1").hide();
 $("#content_info_kid3").show("slow");
 $(this).css("font-weight","bold");
 $("#KID_1").css("font-weight","normal");
 $("#KID_2").css("font-weight","normal");
 }
});
});

Obviously, this is not dynamic. And I don't want to create 32 alternatives, of course. Can somebody point me the right direction to create a dynamic way to show my content based on the number of kids ?

asked Nov 23, 2011 at 1:59
2
  • How is PHP relevant to this code? Commented Nov 23, 2011 at 2:09
  • Why not just have a single content area and retrieve the identified kid's info and put it into that div? Commented Nov 23, 2011 at 2:16

2 Answers 2

2

EDIT (see bottom for updated on loading just one kid data at a time)

An example on how you could achieve that:

<style type='text/css' media='screen'>
 button { margin-left:20px; display:inline; }
</style>
<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script type='text/javascript'>
 function loadKidData(kidID) {
 switch (kidID) {
 case 1 : $('#kName').text(' John Doe');
 $('#kNickname').text(' Speedy');
 $('#kHobbies').text(' Booling');
 break;
 case 2 : $('#kName').text(' Mathews Doe');
 $('#kNickname').text(' Slowy');
 $('#kHobbies').text(' Basketball, baseball');
 break;
 case 3 : $('#kName').text(' Jackson Doe');
 $('#kNickname').text(' J-DOE');
 $('#kHobbies').text(' Archery');
 break;
 case n : $('#kName').text(' Enne Doe');
 $('#kNickname').text(' The-Nanny');
 $('#kHobbies').text(' Anything goes');
 break;
 default : $('#kName').text('');
 $('#kNickname').text('');
 $('#kHobbies').text('');
 }
 }
 jQuery( function () {
 $('.nav').click( function () {
 loadKidData($(this).html().replace('KID ','')*1.0); // *1.0 same as parseInt(...,10).
 })
 });
</script>
</head>
<body>
 <button class='nav' >KID 1</button><button class='nav' >KID 2</button><button class='nav' >KID 3</button>
 <div id='KID_INFO' style='margin:20px auto; overflow:auto; ' >
 <p>Name:<span id='kName'></span></p>
 <p>Nickname:<span id='kNickname'></span> </p>
 <p>Hobbies:<span id='kHobbies'></span> </p>
 </div>
</body>

Sample at: http://zequinha-bsb.int-domains.com/kidsinfo.html

Now, as far as dynamically displaying the data, it will have to do with your resources: database? If so, you could read the data and pass it over:

$.get('url-of-the-database-reading-script',function (data) {
 // assumed all data comes back formatted:
 $('#KIDS_INFO').html(data);
});

I can/could help you further, more details would help. Are you using classic asp (.asp); php; etc?

EDIT:

Instead of this:

jQuery( function () {
 $('.nav').click( function () {
 loadKidData($(this).html().replace('KID ','')*1.0); // *1.0 same as parseInt(...,10)
 })
});

Do this:

jQuery( function () {
 $('.nav').click( function () {
 $.get('your-data-fetching-url?kidID='+$(this).html().replace('KID ','')*1.0, function (data) {
 //assumed the data comes back formatted:
 $('#KIDS_DATA').html(data);
 })
 })
});

Note that I put a question mark at the end of the url; followed by the querystring kidID=

answered Nov 23, 2011 at 2:43
Sign up to request clarification or add additional context in comments.

8 Comments

I do like this method, but I don't quite understand it. The number of kids can be anywhere from 0 to N, thus I don't quite see how the switch formats himself according to the number of kids.
That was just an example on how to show the data. AS AN EXAMPLE. Now, how do you have the data? Database? Hand coded in the page? The more you let us know, the more we can help you!
I am using PHP along with Code Igniter in a MVC pattern. Right now, as the page loads, I use a controller that calls a model that retrieves all the data I need. Then I simply send that array of results to the view as I load it. In the view, my intend is to create the applet out of generated html in which I "fill" the holes using that array of results. From my model, I am able to know how many kids I have for this account. Thus I generate the HTML n times to create the content that will be displayed.
There's where you are making a gigantic mistake: LOADING ALL THE DATA AT ONCE. Rename that page and work with the copy of it changing to load only the passed KID ID number. The final version would use the bottom of my answer; not the switch case.
Is it such a mistake ? A connection to the database must be established everytime I do a request. Is it slower to do one big request instead of many smaller ones ? Moreover, I know this is an example, but how does this code cope with the varying number of kids ? Thank you for your patience and time, as I am merely a student.
|
1

Give each "Kid" button the same class and use that for the click handler. From there, you can associate the "content_info_kid" with the "kid" button either by

1)Using the index of the element. The button for kid2 should be index 1 relative to its parent and the content_info for kid2 should also be index 1 relative to its parent.

or

2)Extract the number from the ID of the button.

Both approaches are documented below.

$('.kid_button').click(function(){
 // get number from index (this starts at '0')
 // if your kid #'s start at 1, you should add 1 to this
 var id = $(this).index();
 // OR...get number from id where id format is kid_{#}
 var id = $(this).attr('id').split('_').pop();
 // now we have the number to append to everything else
 // we should also associate all "content_info" with a class
 // which we will call "kid_content"
 if($("#content_info_kid"+id).is(":hidden")){
 // hide all of the 'kid_contents'
 $(".kid_content").hide();
 // show the one we want
 $("#content_info_kid"+id).show("slow");
 // normalize all buttons
 $(".kid_button").css("font-weight","normal");
 // bold this one
 $(this).css("font-weight","bold");
 }
});
answered Nov 23, 2011 at 2:53

1 Comment

Ah, so you can use classes as event handler ? Maybe that's the key ! I will try this now.

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.