0

管理者がユーザー名リンクにマウスオーバーしたときにユーザープロファイルを表示したい。初めての場合は、ユーザー プロファイルが表示されます。次回はajaxが起動せず、ajaxが起動しないとユーザープロファイルが表示されません。

4

3 に答える 3

0

ユーザー名リンクの ID とクラスを知る必要があります。

jQuery にホバーをリッスンさせることができます。そのイベントが発生すると、ajax を実行する関数を呼び出すことができます。

ただし、ユーザーのIDを知る必要があります。これを行う最善の方法は、次のようにすることです

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

これで、ホバーするリンクができました。

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

これで、クラス userHref のリンクにホバリングするのをリッスンして、ホバーをリッスンしました。jquery は、a 要素の ID を取得して応答し、ID を 2 つの個別の項目に分割します。2 番目の項目はユーザー ID を示します。

これで、useAjax 関数も呼び出して、ユーザーの ID を送信しました。これで、userId を既知のバックエンド サイト (この例では rails) に POST できます。これにより、データベースにクエリが実行され、URL がユーザー イメージに返されます。次に、画像を表示する div 要素の ID を知るだけで済みます。

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.
        }
    });
}

私はレールに慣れていませんが、おそらくここで説明したように、バックエンドを同様の方法でプログラミングできます: Javascript function as php?

私の答えを検索してください。非常に詳細な例が得られるはずです。

これが役立つことを願っています。

将来へのヒント: まずはググってみてください :)

于 2013-03-06T18:38:52.557 に答える
0

jQuery を使用していると仮定して、ホバー イベントをユーザー名リンクにバインドします。そのとおり：

$('.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
}

次に、ユーザーの ID を username 要素 (おそらく data 属性) に追加します。

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

次に、おそらく id によって、どのユーザーが既にロードされているかを記録します。何か新しいものを取得したら、それをオブジェクトに追加します。私はこのようなオブジェクトを窓に置くのが好きです。

window.loadedUserInfo = {};

カーソルを合わせると、このオブジェクトに userId キーが存在するかどうかを確認します。その場合は、それを使用してください。そうでない場合は、ajax 呼び出しを使用して取得します。

$.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
   }
})

ポップオーバー自体については、おそらくブートストラップ ポップオーバーを使用できます。

すべてを一緒に入れて：

$(".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')]
    }
 }
于 2013-03-06T18:44:10.343 に答える
0

機能を実装するには、段階的に進めます。

  1. ユーザー名のマウスオーバーで、ユーザー プロファイルをユーザー名の近くに html でレンダリングする ajax 呼び出しを実装します。
  2. JavaScript を使用して、ユーザーがユーザー名/ユーザー プロファイルを離れたときにユーザー プロファイルの div が非表示になるような機能を実装します。
  3. 上記の #1 で ajax 呼び出しを行うときに、要求しようとしているユーザー ID のユーザー プロファイルを含む div が既に存在するかどうかを確認します。idこれは、ユーザー プロファイル パーツにいくつかを配置し、その#user_profile_#{id}div が存在するかどうかを確認することで簡単に実現できます。

要件が広すぎてコードを提供できません...上記の部分の実装に問題がある場合は、質問として個別に投稿してください..

于 2013-03-06T18:44:46.140 に答える