YII 2 Framework: Помощь. Работает только на первой странице Gridview
Я сделал Jquery для отображения всплывающих подсказок при наведении курсора мыши на текст. Он отлично работает на всех страницах.
У меня также есть столбец изображения в моем gridview.
Я сделал Jquery, чтобы увеличить эти изображения, когда на них наводит мышь
Но проблема в том, что это работает только на первой странице
Я прочитал несколько статей, в которых предлагается использовать SELECTOR в JS Script, но я понятия не имею, как его реализовать.
Помогите мне, пожалуйста.
Большое вам спасибо, и мне жаль беспокоить вас всех.
Вот мой взгляд код
<?php
\yii\web\JqueryAsset::register($this);
\yii\bootstrap\BootstrapPluginAsset::register($this);
$tooltipjs=<<< 'SCRIPT'
$('body').tooltip({selector: '[data-toggle="tooltip"]'});
SCRIPT;
$this->registerJs($tooltipjs);
$jss = <<< 'SCRIPT'
$(".enlargephoto").hover(function(){
$(".photobox").remove();
var srcval = $(this).attr("src");
var names = $(this).attr("namas");
$("<div class=\'photobox\' ></div>")
.html("<p class=\'names\'>"+names+"</p><img src="+srcval+"></img>")
.appendTo("#usergrids").hide().fadeIn("fast");
},function(){
$(".photobox").remove();
});
$(".enlargephoto").mousemove(function(e){
var xx = e.pageX - 20;
var tt = e.pageY - 120;
$(".photobox").css({top:tt, left:xx});
});
SCRIPT;
$this->registerJs($jss);
$css=<<< 'SCRIPT'
.photobox
{
margin-left:200px;
visibility:visible;
opacity:1;
-moz-opacity:1;
position: absolute ;
padding:10px;
border:2px solid Silver;
background:-moz-linear-gradient(30deg,LightPink,PapayaWhip,NavajoWhite,AliceBlue,AntiqueWhite,Wheat,Khaki,Linen,Ivory,BlanchedAlmond);
background:-webkit-linear-gradient(30deg,LightPink,PapayaWhip,NavajoWhite,AliceBlue,AntiqueWhite,Wheat,Khaki,Linen,Ivory,BlanchedAlmond);
background:-o-linear-gradient(30deg,LightPink,PapayaWhip,NavajoWhite,AliceBlue,AntiqueWhite,Wheat,Khaki,Linen,Ivory,BlanchedAlmond);
box-shadow:2px 4px 75px DarkSlateGray;
-webkit-box-shadow:2px 4px 75px DarkSlateGray;
-moz-box-shadow:4px 2px 75px DarkSlateGray;
}
.photobox img
{
width:200px;
height:200px;
border:2px inset Snow;
}
.photobox .names p
{
line-height:15px;
font-family: 3Dumb ;
font-size:25px;
font-weight:bold;
text-shadow: 3px 3px 3px DarkSlateGray;
color:MidnightBlue;
text-align:center;
text-transform:uppercase;
}
SCRIPT;
$this->registerCss($css);
?>
<?php
use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\Pjax;
use yii\helpers\ArrayHelper;
use yii\helpers\Url;
use yii\helpers\BaseUrl;
$this->title = Yii::t('app', 'Users List');
?>
<div class="user-record-index">
<?php Pjax::begin(['id' => 'userform']); ?>
<?= GridView::widget(['id'=>'usergrids','options' => ['data-pjax' => true ],
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
[
'label' => 'Foto',
'format' => 'html',
'filter'=> '',
'content' => function($data)
{
$dest = Yii::getAlias('@web/');
return Html::img($dest . $data->filepath,[
'class'=>'enlargephoto','width' => '50px','height'=>'50px',
"style"=>"border:1px ridge Silver; box-shadow:2px 3px 15px Black;
-webkit-box-shadow:2px 3px 15px Black;
cursor:pointer",
'namas'=>$data->nama,
]);
},
'contentOptions' => ['class' => 'content-grid-css'],
'headerOptions' => ['class' => 'header-grid-css'],
],
[
'attribute'=>'username',
'format'=>'html',
'content' => function($data)
{
return Html::tag('div', $data->username,
[
'data-toggle' => 'tooltip',
'data-placement'=>'right',
'title'=> $data->nama,
'style'=> 'cursor:pointer;'
]);
},
'options' => ['width' => '120'],
'contentOptions' => ['class' => 'content-grid-css'],
'headerOptions' => ['class' => 'header-grid-css'],
],
[
'attribute'=>'nama',
'format'=>'html',
'content' => function($data)
{
return Html::encode($data->nama);
},
'contentOptions' => ['class' => 'content-grid-css'],
'headerOptions' => ['class' => 'header-grid-css'],
],
[
'attribute'=>'email',
'format'=>[
'Email',
],
'value' => function($data)
{
return Html::encode($data->email);
},
'contentOptions' => ['class' => 'content-grid-css1'],
'headerOptions' => ['class' => 'header-grid-css'],
],
[
'attribute'=>'create_at',
'format' => ['datetime', 'php:d-m-Y H:i:s'],
'options' => ['width' => '120'],
'content' => function($data)
{
return Html::encode($data->create_at);
},
'contentOptions' => ['class' => 'content-grid-css'],
'headerOptions' => ['class' => 'header-grid-css'],
],
[
'class' => \yii\grid\ActionColumn::className(),
//'controller' => 'MarketingController',
'template' => '{update}{delete}{view}',
'header' => Html::a('<i class="glyphicon glyphicon-plus"></i> Add New',['create','id'=>'addb']),
'buttons' =>
[
'update' => function($url, $model, $key)
{
return Html::a('<span class="glyphicon glyphicon-pencil"></span>',
$url,['title'=> Yii::t('app','update'),]);
},
'delete' => function($url, $model, $key)
{
return Html::a('<span class="glyphicon glyphicon-trash"></span>',
$url,['title'=> Yii::t('app','delete'),'data-pjax' => 'userform',
'data-confirm' => Yii::t('app','Are you sure to delete this item'),
'data-method' => 'post',
]);
}
],
'contentOptions' => ['class' => 'content-grid-css'],
'headerOptions' => ['class' => 'header-grid-css'],
],
],
]); ?>
<?php Pjax::end() ?>
</div>Решение
Попробуйте зарегистрировать Js таким образом ..
use yii\web\View;
Тогда ваш код JavaScript реализуется следующим образом …
<?php
$this->registerJs("$('body').tooltip({selector: '[data-toggle="tooltip"]'});
$('.enlargephoto').hover(function(){
$('.photobox').remove();
var srcval = $(this).attr('src');
var names = $(this).attr('namas');
$('<div class=\'photobox\' ></div>')
.html('<p class=\'names\'>'+names+'</p><img src='+srcval+'></img>')
.appendTo('#usergrids').hide().fadeIn('fast');
},function(){
$('.photobox').remove();
});
$('.enlargephoto').mousemove(function(e){
var xx = e.pageX - 20;
var tt = e.pageY - 120;
$('.photobox').css({top:tt, left:xx});
});
", View::POS_END);
Вы также можете попробовать POS_LOAD или POS_READY
Другие решения
Вы, вероятно, используете Ajax GridView. В вашем коде слушатель события «hover» добавляется только к тому элементу, который уже существует на странице при его загрузке. Тебе нужно делегирование мероприятия
$('body').on('mouseenter', '.enlargephoto', function(){
$('.photobox').remove();
var srcval = $(this).attr('src');
var names = $(this).attr('namas');
$('<div class=\'photobox\' ></div>')
.html('<p class=\'names\'>'+names+'</p><img src='+srcval+'></img>')
.appendTo('#usergrids').hide().fadeIn('fast');
});
$('body').on('mouseleave', '.enlargephoto' ,function(){
$('.photobox').remove();
});
$('body').on('mousemove', '.enlargephoto' function(e){
var xx = e.pageX - 20;
var tt = e.pageY - 120;
$('.photobox').css({top:tt, left:xx});
});
Событие зависания больше не существует, поэтому я сломал его в реальных событиях.