Returning HTML (with PHP) after jQuery Ajax function.

Question

I'm trying to use Ajax together with jQuery to make a little window pop up when you click on a username in my custom forums.

My current code for the script:

   $(document).ready(function(){
 $('#profile_link').click(function(){

   $.ajax({
    type : 'POST',
    url : 'viewuser.php',
    dataType : 'html',
    contentType : 'text/html',
    data: {
     username : $('#username').val()
    },
    success : function(html){
     $('#message').addClass('success');
     $('#message').hide().append(html).fadeIn();
    }
   }); 

    return false;
 });
});

I tried using html(), but that didn't work at all, as it didn't even display the response, even though I could see the response in Firebug.

Here's the code to viewuser.php:

        <?php 
      $docRoot = getenv("DOCUMENT_ROOT");

      require_once $docRoot.'/settings.php';

      loginMySQL();

      selectDatabase();

      $user = $_POST['username'];

      $sql = mysql_query ("SELECT `UserName`,`Avatar`,`Biography`,`Birthday`,`UserLevel`,`BanStatus` FROM users WHERE `UserName` = '$user'");

      $UserInfo = mysql_fetch_array($sql);
       $UserAvatar = $UserInfo['Avatar'];
       $UserBio = $UserInfo['Biography'];
       $UserBirth = $UserInfo['Birthday'];
       $UserLevel = $UserInfo['UserLevel'];
       $BanStatus = $UserInfo['BanStatus'];

   // additional code
   ...
      ?>
      <div class="nav_space">
      </div>
// additional code
      <div class="user_profile_wrapper">
       Hello
       <?=$BanStatus;?>
       <i>Username / Power level:</i>
       <div class="user_profile_name" <?=$LevelColour;?>>
       <?=$user;?> <i><?=$UserLevel;?></i>
       </div>
       <i>User avatar:</i>
       <div class="user_profile_avatar">
      <?
       if (strlen($UserAvatar) > 1) {
       ?>
       <img/ src="<?=$UserAvatar;?>" alt="" width="100" />
       <?
       }
      ?>
       </div>
       <i>Biography:</i><br />
       <div class="user_profile_bio">
       <?=$UserBio;?>
       </div>
       <i>Birthdate:</i>
       <div class="user_profile_birthdate">
       <?=$UserBirth;?>
       </div>
       <?=$AUserLevel;?>
      </div>
      <div class="nav_space">
      </div>

And the problem is, when it returns the code, it doesn't actually display any of the variables ($BanStatus, $UserLevel, anything).

Any ideas?

Answer 1

Ideally you shouldn't change between <?php and <? as I believe support for short tags is being dropped.

Also, you haven't sanitised your user name

$user = mysql_real_escape_string  ($_POST['username']);

Updated 1

The code below is a working example, I have cleaned up your code a little bit. However with your original code changing username : $('#username').val() to username : $('#username').html() should work for you.

Code for so.html

  <a href="www.google.com" id="profile_link"><div id="username">Someusername</div></a>

  <div id="message"></div>
<script>
  $("#profile_link").click(function(event){
    event.preventDefault();
    var v_username = $("#username").html();
    $.post("viewuser.php",{"username": v_username},function(data) {
      $('#message').addClass('success').hide().html(data).fadeIn();
    }, "html");

  });
</script>

Code for viewuser.php

<?php
echo "The submitted request was for the username $_POST[username]";
?>

Output:

The submitted request was for the username Someusername

Updated 2

Code for so.html

  <a href="www.google.com" class="profile_link"><span class="username">Username1</span></a>
    <a href="www.google.com" class="profile_link"><span class="username">Username2</span></a>

  <div id="message"></div>
<script>
  $(".profile_link").click(function(event){
    event.preventDefault();
    var v_username = $(this).children(".username").html();
    $.post("viewuser.php",{"username": v_username},function(data) {
      $('#message').addClass('success').hide().html(data).fadeIn();
    }, "html");

  });
</script>

I've updated it once again for you. We use $(this).children(".username") to ensure that we return the username from the selected link. We've changed to to use classes as there are more than one instance of each element now, and I've changed the html to use a span tag as it's a bit more appropriate.