Display user profile in div using ajax

Question

I want to display user profile when admin mouser over on username link. If this is first time, user profile is displayed; then next time ajax should not fire and display user profile without ajax fire.

Answer 1

You need to know the id and the class of the username link.

You can make jQuery listen to the hover, when that event occurs you can call the function which will do the ajax.

But, you need to know the id of the user, the best way to do that is to do something like

<a href='user123.php' class='userHref' id='user_123'>I want to be hovered</a>

Now you have a link to hover over.

$('.userHref').live("hover", function()
{
    var userHrefId = $(this).attr('id');
    var userHrefIdSplit = userHrefId .split('_');
    var userId = userHrefIdSplit[1];
    useAjax(userId);
});

Now you have listened to the hover by listening to any hovering over a link of the class userHref, jquery has responded by taking the id of the a element, splitting the id into 2 seperate items, where the second one indicates the user Id.

Now we have also called with useAjax function and we have sent the id of the user. Now you can POST the userId to a known backend site (rails in your example), which will query the database and return the url to the user image. We then only have to know the id of the div element which you want the image to appear in.

function useAjax(userId);
{
    var id = userId;
    var select = true;
    var url = '../scripts/ajax.php';

    $.ajax(
    {
        // Post select to url.
        type : 'post',
        url : url,
        dataType : 'json', // expected returned data format.
        data : 
        {
                'select' : select, // the variable you're posting.
                'userId' : id
        },
        success : function(data)
        {
            // This happens AFTER the backend has returned an JSON array
            var userUrl, userImg, message;

            for(var i = 0; i < data.length; i++)
            {
                // Parse through the JSON array which was returned.
                // A proper error handling should be added here (check if
                // everything went successful or not)

                userUrl = data[i].userUrl;
                message = data[i].message;
                userImg = "<img src='"+userUrl+"' alt='' title='' />";
                $('#someDiv').html(userImg); // Here's your image.
            }
        },
        complete : function(data)
        {
            // do something, not critical.
        }
    });
}

I'm not familar with rails but you can probably program the backend in a similar wasy as I exmplained here: Javascript function as php?

Search for my answer, it should give you a very detailed example.

I hope this helps.

Tip for the future: Try and google first :)

Answer 2

Assuming you're using jQuery, bind a hover event to the user name link. As so:

$('.username').hover(function (e) {
    console.log("i'm hovering!! on id: "+$(this).attr('data-user-id')); //See the next step for where this came from
}

Next, add the user's id to the username element, perhaps in a data attribute:

<span class="username" data-user-id="1234567890">Username</span>

Next, keep a record of which users are already loaded, perhaps by id. When you fetch something new, add it to the object. I like to keep objects like this on the window.

window.loadedUserInfo = {};

On hover check if the userId key exists in this object. If it does, user it. If not, use an ajax call to get it:

$.ajax({
   url : "path/to/userinfo"+userid,   //I'm assuming you're using restful endpoints
   type : "GET",
   success : function (res) {
      window.loadedUserInfo[userid] = res;
      //Format your popover with the info
   },
   error: function (jqxhr) {
      //something went wrong
   }
})

As for the popover itself, you could probably use a bootstrap popover.

Putting it all together:

$(".username").hover(function (e) {
        console.log("i'm hovering!! on id: "+$(this).attr("data-user-id")); //See the next step for where this came from
    if (typeof window.loadUserInfo[$(this).attr("data-user-id")] == 'undefined') {
      $.ajax({
         url : "path/to/userinfo"+userid,   //I'm assuming you're using restful endpoints
         type : "GET",
         success : function (res) {
            window.loadedUserInfo[userid] = res;
            //Format your popover with the info
         },
         error: function (jqxhr) {
            //something went wrong
         }
      })
    } else {
       //populate popover with info in window.loadUserInfo[$(this).attr('data-user-id')]
    }
 }

Answer 3

To implement the functionality proceed step by step:

1. On mouseover of the username, implement an ajax call that renders user profile in html near the username
2. Through javascript, implement functionality such that when user leaves the username/userprofile, the user profile div is now hidden
3. While making ajax calls in #1 above, check if the div already exist which contains user profile for the userid which you are trying to request. This can be easily achieved by having some id in the user profile part and checking if that #user_profile_#{id} div exists.

Your requirement is too broad to be able to provide any code... If you have problem in implementation of any of the above parts, post them as question separately one by one..