In this example I want to consider a different case. Sometimes you don't only have one div container which needs to be filled out with content but multiple containers which need to be filled out with content according to the link which was clicked by the user. Again we will provide a functionality of changing the label of our button. We will extend this example by handling a larger amount of data in our response. For that reason we will use build in functionality of jQuery to handle JSON requests.



After we will be done, our final solution should look more or less like that:

show 1
show 2
show 3

Here is the jQuery code we will use in this example.

1. Our jQuery code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

$(document).ready(function(){  
  $('.ahref',this).toggle(
    function () {
      var id = $(this).attr('href');
      if($('.box'+id).text() == '') {  
        $.getJSON('json.php',{id:id},function(data){  
          $.each(data, function(i,item){  
            var user_name = item.user_name;
            var user_desc = item.user_desc;
            var html = user_name+" "+user_desc;
            $(".box"+item.id).html(html).slideDown(1000); 
          });  
        });  
        $(this).html("hide");
      } else { 
        $(this).html('hide');  
        $('.box'+id).slideDown(1000);  
      }  
    },  
    function () {  
      var id = $(this).attr('href');
      $(this).html('show');  
      $('.box'+id).slideUp(1000);  
    }  
  );
});

2. Our HTML file:

1
2
3
4
5
6
7

<a href="1" class="ahref">show 1</a>
<a href="2" class="ahref">show 2</a>
<a href="3" class="ahref">show 3</a>
<div class="box1"></div> 
<div class="box2"></div> 
<div class="box3"></div>
<div style="clear:left"></div>

3. Our PHP file:

1
2
3
4
5
6
7
8
9
10
11
12

$id = $_GET['id'];
/**
 *  Database model for retrieving user data etc.
 */
$user = array(
  array(
    'id'        => $id, 
    'user_name' => 'ImUser '.$id, 
    'user_desc' => 'description of a user '.$id.' etc.'
  )
);
echo json_encode($user);

I don't want to waste your time, therefore I will directly move to explaining the code. We are using toggle to switch between functions each time a user clicks on a link. We use the href attribute of our link to save the corresponding id of an object we want to receive. You can use the href attribute to save all the data you can imagine, it is just important to handle it before processing to AJAX request.

In the first function we check, if our div box is empty, to prevent from loading the same content for multiple times. If our div container is empty we use AJAX to retrieve remote data and using the php function json_encode we encode our array to a JSON object. We process the response to display it correctly for the end user and we paste it in corresponding div container. We slide it down to give a nice visual effect and replace the text of the link to "hide".

If our div box contains a text, we simply slide it down. Do not hesitate to delete the if else statement and load the content every time a user clicks a link however, if you have many visitors on your site, it might lead to performance issues.

In our second function we simply hide the content of the div container by sliding it up and we replace the text of the link to show. I'm defining the id of the link every time the function is called, but you can remove it. I'm just using it show you the id of the link you currently clicked on.

I hope this will help you farther with handling multiple div containers. I wrote this post really quickly and did not have time to check it, therefore if you find any mistakes, please inform me about them. Cheers!

load content box 1,3,5
load content box 2,4

OK, let's break this code into pieces. First of all we need our HTML code, where our function can load the content. As usually, don't forget to include the jQuery library, because without nothing will really happen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<style type="text/css">
.box1, .box2, .box3, .box4, .box5 {
	width:100px;
	height:100px;
	border:1px solid #000;
	float:left;
}
span {
	cursor:pointer;
	font-weight:bold;
}
#unload {
	color:red;
}
</style>
<span class="1,3,5">load content box 1,3,5</span><br /><span class="2,4">load content box 2,4</span>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>

I think this code is self explanatory. Our span elements will register an on click event and display the content in according boxes. The only thing you need to know is that class attribute defines the numbers of boxes, in which our content will be displayed (our first link will display content in box1, box3 and box5, therefore the name of the class is '1,3,5'). It's also important that you keep the names of the classes with according numbers in the div containers, because this code won't work either. If you decide to change them, don't forget to change it in the jQuery function as well. Let's move to the jQuery part.

1
2
3
4
5

$(document).ready(function(){
  $('span').click(function() {
    var boxes = $(this).attr('class');
  });
});

We load our event listeners as soon as our DOM is loaded. In the first part of this code an event listener, which will be triggered whenever a user clicks on a span element. The first thing our function does is saving of the class value in variable 'boxes'.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$(document).ready(function(){
  $('span').click(function() {
    var boxes = $(this).attr('class');
    if($(this).html() == 'unload boxes '+boxes) {
      var empty = boxes.split(',');
      for(var i=0;i<5;i++) {
        $('.box'+empty[i]).html('');
        $(this).attr('id','')
      }
      $(this).html('load content box '+boxes);
    } else {
      $.getJSON('json.php',{boxes:boxes},function(data){
        $.each(data, function(i,item){
          $(item.class).html(item.text);
        });
      });
      $(this).html('unload boxes '+boxes);
      $(this).attr('id','unload')
    }
  });
});

Full code might be a little bit tricky, therefore I'll try to explain it as good as possible. We add and if else statement. The first part of our statement will be responsible for unloading the boxes (simply removing the content out of them), the second part will do exactly the opposite. Let's start with explaining the second part first, cause that's the part, which will be executed first. We use an HTTP GET request to retrieve JSON data from an external file. In our case it will be json.php (content of this file will follow). As an addition we pass an argument boxes, which will tell our php file, for which boxes we want to load the content. After we receive the JSON data, we loop through it and paste it into according boxes. It is worth to mention in this moment that our script will receive a multi-dimensional array, in which we will save the classes of the boxes, in which we want to display our text and according texts. After our loop is done, we will replace the text of the link and add an id to give it a different color.

The first part of the script checks the text of the link, which was clicked by the user. If it contains the string, with which we replaced it, after loading of JSON data was done, we use again the class of our span attribute to remove the text from according boxes and we replace the text again.

The only thing left is the content of php file, which we used to create JSON data.

1
2
3
4
5
6
7
8
9

$array = array ();
$boxes = explode(',',$_GET['boxes']);
 
foreach($boxes as $box) {
  $push = array('class' => '.box'.$box, 'text' => 'test for box '.$box);
  array_push($array,$push);
}
 
echo json_encode($array);

In our php file we first initialize our array and we split the received data. For each value we received we extend our array adding a class name and corresponding text. In the last part we encode the array into JSON data and echo it. You can do all the magic you can imagine in this file. You can use IDs of the articles or users from your database and save it in the array. You can even extend this array and the jQuery function by extra fields.

One thing worth mentioning is that we use id attribute to change the color of our links. It is not really best practice, because multiple ids with the same name in one document wont validate with W3C rules. However, we do that on client side, therefore it shouldn't be an issue for a validation.

That's all. I hope you like this example. I know it's pretty custom and you will need to adjust it for your needs, but I hope it's clear enough for you to understand how JSON works and how to proceed retrived JSON data.

show

Let's break it into pieces.
[source:javascript]
$(document).ready(function(){
$('.link').toggle(
function () {
if($('#box').text() == '') {
$.ajax({
url:'your_file.txt',
method:'GET',
success:function(r) {
$('.link').html('hide');
$('#box').html(r).hide().slideDown(1000);
},
error:function() {
alert('file does not exist');
}
});
} else {
$(this).html('hide');
$('#box').slideDown(1000);
}
},
function () {
$(this).html('show');
$('#box').slideUp(1000);
}
);
});

[/source]
Because we want to write unobtrusive code, we want that our code should be executed whenever the DOM is ready. On each element with class 'link' we will toggle between two functions. In the first function we check, if our element with id 'box' is empty. If it is we use AJAX request to load the content from a remote file (in our case your_file.txt). For that reason you can use any other file. You can even pass parameters and request content relevant only for your case. For that reason you would have to add extra parameter 'data' in AJAX request of this function.

If the request was successful, we replace 'show' with 'hide', past the requested content in our container with id 'box', hide it and slide it down to get a nice visual effect. If this request retrieves an error, an alert box with information that the file wasn't found will be displayed. This function does the if - else check only because we want to do the AJAX request only once.

The second function is pretty simple. It basically replaces 'hide' with 'show' again and it slides up our div container. If a user clicks on 'show' button again, we wont need to use AJAX request anymore, because the text was already past in our DOM. Here is the HTML and CSS code for the body section of our document:
[source:HTML]

show

[/source]
If you want a nice effect of an arrow pointing up or down depending on the case, you can extend this function with some class replacements. Have fun with playing around with this one.