1

How to display popup ajax information of user when user mouseover on username or picture of users with views. i want fetch information from profile user with ajax no hidden. such as Facebook or LinkedIn

5
  • 1
    Any particular reason you want it in ajax, not just hidden and shown when needed?
    – Mołot
    Jul 1, 2013 at 10:43
  • @Mołot yes i show when in need
    – user1630
    Jul 1, 2013 at 10:49
  • I would create a custom module which loads the user profile with a specific view mode when hovering the username. You would need PHP and Javascript for that. UPDATE: I put it into a sandbox on drupal.org.
    – yannickoo
    Jul 1, 2013 at 12:12
  • This doesn't really answer the question at hand :-/
    – Chapabu
    Jul 4, 2013 at 10:04
  • May you expand your answer? As it is, it is not much helpful for the OP or future readers.
    – apaderno
    Jul 8, 2013 at 10:10

3 Answers 3

7
+50

Hope this will help you

In Drupal 7, for your requirement you can use qTip (Stylish jQuery Tooltips) module with Views.

  • After installing and configuring qTip, go through the qtip examples(refer qtip README.txt).
  • For this example I have created a view with some user fields, these fields will popup on hovering user picture

  • Create a new view and add fields which you want to show on the popup. enter image description here

  • For showing user information in popup, you need to give the proper structure(read qtip README.txt).

  • I have added the HTML structure for profile_image view field

    enter image description here

  • On mouse hover of the user picture, user information will popup. And make CSS changes as per your requirement.

  • You can also refer BeautyTips, for example you can refer this link

Drupal 7 : Ajax load

Steps

  • To show user details on hover you need to add attributes to the username, it can be done using preprocess function template_preprocess_username in your active theme tempalte file.
     
    function themeName_preprocess_username(&$variables) {
      $variables['attributes_array'] = array('class' => array("user-info"), 'data-uid' => $variables['account']->uid);//adding more attributes for your requirement
    }
    
  • Create a view with the fields you want to show on popup.
  • Create a menu to get user details like get/user_details/%, where % is the user-id. This menu will returns user details.

    function test_menu() {
    ...
    $items['get/user_details/%'] = array(
    'title' => t(''),
    'type' => MENU_CALLBACK,
    'page callback' => 'get_user_details_ajax_callback',
    'page arguments' => array(2),
    'access arguments' => array('access content'),
    );
    ...
    return $items;
    }
    //Implement the ajax callback to get user details
    function get_user_details_ajax_callback ($uid) {
    $html = '';
    $html = views_embed_view('VIEWNAME','display_id', $uid);
    return $html;
    }
    

  • For showing the user details on hover, you need to make a ajax call using $.ajax

  • Once the user hover the username get the data-uid attribute and make a ajax call to get user info.
  • Once you get the user details append it and show as popup.

    Drupal.behaviors.getUserDetails = {
        attach: function (context, settings) {
          var replace_wrapper = 'user-'+$(this).attr('data-uid')+'details';
          //add html to show user details
          $( "a.user-info" ).each(function( index ) {
            if(!$(this).closest('div').hasClass('user-details-wrapper')){

          $(this).append("<div class='user-details-wrapper'><div class'"+replace_wrapper+"'></div></div>");
        }
      });
      $('a.user-info').mouseenter(function(){
        if($(replace_wrapper).is(':empty')){//if empty then make ajax call and
          var url = Drupal.settings.basePath + 'get/user_info/'+ $(this).attr('data-uid');
          $.ajax({
            url: url,
            type: 'GET',
            success: function (data) {
              //create html and append to replace_wrapper
              var user_detail_html = '';
              //code to get user html here
              $(replace_wrapper).each(function( index ) {
                $(this).html(user_detail_html);
              });
            }
          });
        }else{
          //show popup here
          $('user-details-wrapper').show();
        }
      }).mouseleave(function() {
        //hide popup here
        $('user-details-wrapper').hide();
      });
     }
    }
    

  • Make changes as per your requirement

    Note : views_embed_view

2
  • thank you for answering i want to ajax load. i want in my site anywhere is show username not only when with views filed username
    – user1630
    Jul 6, 2013 at 5:09
  • @reza I have update my answer for ajax load.
    – Inizio
    Jul 9, 2013 at 7:02
0

I would create a new path in a custom module.

function MODULE_menu() {
  $items['get/profile/%/ID'] = array(
    'page callback' => 'get_info',
    'page arguments' => array('$nid', 1),
    // …
  );
}

In your page callback use the following code.

function  get_info($nid) {
  $userInfo = user_load($nid);

  // Create your HTML.

  return $output;
}

When the user is hovering the mouse on the username, you make an AJAX call to that URL.

 $.ajax({
   type: "POST",
   url: "<?php echo url('get/profile'); ?>/"+NID,
   async: false,
   cache: false,
   timeout: 30000,
   success: function(resp) {
     $('popUp').html(resp);
   }
 }); 

I don't need to create a view for that, but if you need to use it you can create a view and in your page callback use the following code.

function  get_info($nid) {
  views_embed_view('VIEWNAME');
  return $output;
}
2
  • do you test your solution!?
    – user1630
    Jul 9, 2013 at 5:57
  • yes, just create a new module and use hook_menu to create a new path with params, so you can get NID to get client's info with user_load(). Jul 9, 2013 at 9:51
0

I found this sandbox module from October 2012 that might be helpful: https://drupal.org/sandbox/zeet/1801738:

simple module to display the users profile information in popup balloon

1