3

マウスオーバーでajaxを起動すると、ユーザープロファイルが表示されませんが、2回目にマウスオーバーすると表示されます。ユーザープロファイルを表示するためにツールチップを使用しています。

私のコードを修正してください

$(document).ready(function(){
    $(".user_profile").bind("mouseover",function(){
      id = $(this).attr('id')
      user_id=id.split('_')[1];
    $.ajax({
        url: "/admin/inbox/user_profile",
        data: {user_id : user_id},
        success: function(data){
            $("#"+id).qtip({
                content:{
                    text: data,
                    title:{
                        text: "User Profile"
                    }
                },
                style: {name:'blue', tip:true}
            });
        }
    });
});

});

4

3 に答える 3

2

$.ajaxは非同期であるためmouseover、qtip が作成される前にイベントが返されます。

ページが読み込ま$.ajaxれると、事前にページに表示されているすべてのユーザー プロファイルのデータを取得し、このデータを配列に保存してから、既に入力されている配列のデータを使用して各 qtip を作成できます。

于 2013-03-07T21:49:38.767 に答える
1

私はこの問題を解決しました

私は解決策を読みました：

「$.ajax は非同期であるため、qtip が作成される前にマウスオーバー イベントが返されます。

ページが読み込まれると、$.ajax を実行して、ページに表示されているすべてのユーザー プロファイルのデータを事前に取得し、このデータを配列に保存してから、既に入力されている配列のデータを使用して各 qtip を作成できます。"

$(document).ready(function(){
var i=0,j=0;
$(".user_profile").each(function(){
    id = $(this).attr('id')
    user_id=id.split('_')[1];
    my_user_ids[i++]=user_id;
    my_ids[j++]=id;
});
$.each( my_ids, function(index, value){
  $.ajax({
    url:"/admin/inbox/user_profile",
    data: {user_id : my_user_ids[index]},
    success: function(data){ 
      myArray[value]=data;
      $("#"+my_ids[index]).qtip({
        content:{
          text: myArray[my_ids[index]],
          title:{
            text: "New User's Profile"
          }
        },
        show: 'mouseover',
        hide: 'mouseout',
        style: {name:'blue', tip:true}
      });  
     }
   });
  });
});
于 2013-03-08T19:39:48.790 に答える
0

マウスオーバーをバインドする必要はありません。これは、qtipプラグインによってすでに実行されています。bindを使用すると、最初のマウスオーバーイベントでイベントに「競合」が発生します。バインドの代わりにjQuery.hoverを使用して、単純に解決を実行します。

    $(document).ready(function() {
    $(".user_profile").hover(function() {
    {
        id = $(this).attr('id')
        user_id=id.split('_')[1];
        $.ajax({
            url: "/admin/inbox/user_profile",
            data: {user_id : user_id},
            success: function(data) {
                $("#"+id).qtip({
                    content: {
                        text: data,
                        title: {
                            text: "User Profile"
                        }
                    },
                    style: {name:'blue', tip:true}
                });
            }
        });
    });
});
于 2013-03-07T21:44:09.357 に答える