tutorial #5: Ajax Profile

Online Profiles can be created through Ajax. The profile information is being displayed from an external JSON file. Here, we use a simple profile, as an example.

In this demonstration, you will learn how to create an Ajax-generated Online Profiles. You will learn how to build the jQuery code needed and understand the purpose of each line. Also, you will learn about the elements needed for an Ajax-generated Online Profiles in HTML and CSS.

Below is demonstration of the Ajax- generated Online Profiles. You can see within the HTML and CSS structure that the content is being generated by Ajax and JSON.

My Profile

The How-To

HTML


<div id="ajax-profile">

<img id="profile-img" src="img/profile_img.png" alt="My Profile">
<h2>My Profile</h2>
<p class="spinner"></p>
<div id="profileinfo"></div>

</div>

JSON


{
"fname": "Bryan",
"lname":"Knight",
"email":"bryan_knight@stu.aii.edu",
"age": 10000,
"hobbies": ["Web Design-","Games-","Comics-","Philly Sports-","Trolling"]
}

CSS


.spinner {
height:400px;
width:400px;
background:url(img/tutorial/tutorial_5/spinner.gif) top left no-repeat;
}

#ajax-profile {
	border:#155a7a thin solid;
	border-radius:5px; 
	padding:25px;
}

#profile-img {
	clear: both;
    float: left;
    margin: 20px;
    padding-top: 10px;
}

jQuery

                
$(document).ready(function() {
//The functions will be executed, once the page is ready.

      $.ajax({//Starts the Ajax request.
          
          type:"POST",//Posts data from the servers.
          url:"example/profile.json.php",//Links to the JSON file. 
          data:{"userid":7},
//This will access the database and grab the user id that equals to 7. 
          dataType: "json",//Asks for the JSON file.
          beforeSend: function(){//Creates a function called beforeSend. 
              $('.spinner').show();
  //Will display the element with an attribute of "spinner".
          },
          
          success: function(data) {
//alert(data.fname);//Optional: Displays the first name as an alert.
$('<h2>'+data.fname+data.lname+'
('+data.age+')'</h2>').appendTo('#profileinfo');//Will add the data of "fname","lname", and "age" to the element with the attribute named "profileinfo".  
$(''<p>'<a href="mailto:'+data.email+'">
'+data.email+''</a>'</p>').appendTo('#profileinfo');//A hyperlink will be add to the email address.
var list = $(''<ul id="hobbylist">'</ul>');
//Puts the "hobbylist" in a list.
              
          $(data.hobbies).each(function() {
  //Creates a function that access the data for hobbies.
              $('<li>'+this+'</li>').appendTo(list);
      //Gets a list at the end of hobbies. 
              
          });
          list.appendTo('#profileinfo');
      //This will add the list to "profileinfo".  
      },
      
      error: function(){
          $('#profileinfo').addClass('alert').html('Sorry! Try Again')
      },//This is a function that will alert the user if form is wrong.  
      complete: function(){
          $('.spinner').hide();
      //Will hide the element with an attribute of "spinner".
              
      }
          
      });//Close The Ajax request.
  });//Close.