Question

suppose i have a list of users….

<a href="#">user1</a>
<a href="#">user2</a>
<a href="#">user3</a>

i want to switch div content related to the user while click on it and also want to align that div to the bottom right corner….i.e.

user1 user2 user3

how i should do that with jquery and $.ajax()

Answer 1

From my understanding, you want to load user-content asynchrnously:

// attach this logic to the clicking of any link with class 'user'
$("a.user").click(function(e){
  // prevent default behavior of link
  e.preventDefault();
  // gather our username from the link
  var username = $(this).text();
  // fire off a POST, containing our username
  $.post("get-content.php", {user:username}, function(response){
    // set the HTML of <div id='content'></div> to whatever was received
    $("#content").html(response);
  // Indicates we're expecting HTML back
  }, "html");
});

— Works with —

<a href="#" class="user">user1</a>
<a href="#" class="user">user2</a>
<a href="#" class="user">user3</a>
<div id="content">
  Load a users details
</div>