YII 2 Framework: Aide. Cela ne fonctionne que sur la première page de Gridview

Question

J'ai fait Jquery pour afficher des info-bulles lorsque la souris survole le texte. Cela fonctionne bien sur toutes les pages. J'ai également une Image Column dans ma vue grid. Je fait Jquery à ces images lorsque grossit la souris est positionné sur les Mais le problème est, il ne fonctionne que sur la première page

J'ai lu quelques articles qui suggère d'utiliser JS Selector Script, mais je n'ai aucune idée comment l'implémenter.

S'il vous plaît Aidez-moi.

Merci beaucoup et je suis désolé de vous déranger tous.

Voici mon avis code

<?php 
 
\t \yii\web\JqueryAsset::register($this); 
 
\t \yii\bootstrap\BootstrapPluginAsset::register($this); 
 
\t $tooltipjs=<<< 'SCRIPT' 
 
\t $('body').tooltip({selector: '[data-toggle="tooltip"]'}); 
 
SCRIPT; 
 
\t $this->registerJs($tooltipjs); 
 

 
\t $jss = <<< 'SCRIPT' 
 
\t $(".enlargephoto").hover(function(){ 
 
\t \t $(".photobox").remove(); 
 
\t \t var srcval = $(this).attr("src"); 
 
\t \t var names = $(this).attr("namas"); 
 
\t \t $("<div class=\'photobox\' ></div>") 
 
\t \t .html("<p class=\'names\'>"+names+"</p><img src="+srcval+"></img>") 
 
\t \t .appendTo("#usergrids").hide().fadeIn("fast"); 
 
\t },function(){ 
 
\t \t $(".photobox").remove(); 
 
\t }); 
 
\t $(".enlargephoto").mousemove(function(e){ 
 
\t \t var xx = e.pageX - 20; 
 
\t \t var tt = e.pageY - 120; 
 
\t \t $(".photobox").css({top:tt, left:xx}); 
 
\t }); \t 
 
SCRIPT; 
 
$this->registerJs($jss); 
 

 
\t $css=<<< 'SCRIPT' 
 
\t \t .photobox 
 
\t \t { 
 
\t \t \t margin-left:200px; 
 
\t \t \t visibility:visible; 
 
\t \t \t opacity:1; 
 
\t \t \t -moz-opacity:1; 
 
\t \t \t position: absolute ; 
 
\t \t \t padding:10px; 
 
\t \t \t border:2px solid Silver; 
 
\t \t \t background:-moz-linear-gradient(30deg,LightPink,PapayaWhip,NavajoWhite,AliceBlue,AntiqueWhite,Wheat,Khaki,Linen,Ivory,BlanchedAlmond); 
 
\t \t \t background:-webkit-linear-gradient(30deg,LightPink,PapayaWhip,NavajoWhite,AliceBlue,AntiqueWhite,Wheat,Khaki,Linen,Ivory,BlanchedAlmond); 
 
\t \t \t background:-o-linear-gradient(30deg,LightPink,PapayaWhip,NavajoWhite,AliceBlue,AntiqueWhite,Wheat,Khaki,Linen,Ivory,BlanchedAlmond); 
 
\t \t \t box-shadow:2px 4px 75px DarkSlateGray; 
 
\t \t \t -webkit-box-shadow:2px 4px 75px DarkSlateGray; 
 
\t \t \t -moz-box-shadow:4px 2px 75px DarkSlateGray; 
 
\t \t } 
 
\t \t .photobox img 
 
\t \t { 
 
\t \t \t width:200px; 
 
\t \t \t height:200px; 
 
\t \t \t border:2px inset Snow; 
 
\t \t } 
 
\t \t .photobox .names p 
 
\t \t { 
 
\t \t \t line-height:15px; 
 
\t \t \t font-family: 3Dumb ; 
 
\t \t \t font-size:25px; 
 
\t \t \t font-weight:bold; 
 
\t \t \t text-shadow: 3px 3px 3px DarkSlateGray; 
 
\t \t \t color:MidnightBlue; 
 
\t \t \t text-align:center; 
 
\t \t \t text-transform:uppercase; 
 
\t \t } 
 
\t \t 
 
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"> 
 
\t <?php Pjax::begin(['id' => 'userform']); ?> 
 
    <?= GridView::widget(['id'=>'usergrids','options' => ['data-pjax' => true ], 
 
     'dataProvider' => $dataProvider, 
 
     'filterModel' => $searchModel, 
 
     'columns' => [ 
 

 
\t \t \t [ 
 
\t \t \t \t 'label' => 'Foto', 
 
\t \t \t \t 'format' => 'html', 
 
\t \t \t \t 'filter'=> '', 
 
\t \t \t \t 'content' => function($data) 
 
\t \t \t \t { 
 
\t \t \t \t \t $dest = Yii::getAlias('@web/'); 
 
\t \t \t \t \t return Html::img($dest . $data->filepath,[ 
 
\t \t \t \t \t \t 'class'=>'enlargephoto','width' => '50px','height'=>'50px', 
 
\t \t \t \t \t \t "style"=>"border:1px ridge Silver; box-shadow:2px 3px 15px Black; 
 
\t \t \t \t \t \t \t \t -webkit-box-shadow:2px 3px 15px Black; 
 
\t \t \t \t \t \t \t \t cursor:pointer", 
 
\t \t \t \t \t \t 'namas'=>$data->nama, 
 
\t \t \t \t \t ]); 
 
\t \t \t \t }, 
 
\t \t \t \t 'contentOptions' => ['class' => 'content-grid-css'], 
 
\t \t \t \t 'headerOptions' => ['class' => 'header-grid-css'], 
 
\t \t \t \t 
 
\t \t \t ], 
 
\t \t \t [ 
 
\t \t \t \t 'attribute'=>'username', 
 
\t \t \t \t 'format'=>'html', 
 
\t \t \t \t 'content' => function($data) 
 
\t \t \t \t { 
 
\t \t \t \t \t return Html::tag('div', $data->username, 
 
\t \t \t \t \t [ 
 
\t \t \t \t \t \t 'data-toggle' => 'tooltip', 
 
\t \t \t \t \t \t 'data-placement'=>'right', 
 
\t \t \t \t \t \t 'title'=> $data->nama, 
 
\t \t \t \t \t \t 'style'=> 'cursor:pointer;' 
 
\t \t \t \t \t ]); 
 
\t \t \t \t }, 
 
\t \t \t \t 'options' => ['width' => '120'], 
 
\t \t \t \t 'contentOptions' => ['class' => 'content-grid-css'], 
 
\t \t \t \t 'headerOptions' => ['class' => 'header-grid-css'], 
 
\t \t \t ], 
 
\t \t \t 
 
\t \t \t [ 
 
\t \t \t \t 'attribute'=>'nama', 
 
\t \t \t \t 'format'=>'html', 
 
\t \t \t \t 'content' => function($data) 
 
\t \t \t \t { 
 
\t \t \t \t \t return Html::encode($data->nama); 
 
\t \t \t \t }, 
 
\t \t \t \t 'contentOptions' => ['class' => 'content-grid-css'], 
 
\t \t \t \t 'headerOptions' => ['class' => 'header-grid-css'], 
 
\t \t \t ], 
 
\t \t \t 
 
\t \t \t [ 
 
\t \t \t \t 'attribute'=>'email', 
 
\t \t \t \t 'format'=>[ 
 
\t \t \t \t \t 'Email', 
 
\t \t \t \t ], 
 
\t \t \t \t 'value' => function($data) 
 
\t \t \t \t { 
 
\t \t \t \t \t return Html::encode($data->email); 
 
\t \t \t \t }, 
 
\t \t \t \t 
 
\t \t \t \t 'contentOptions' => ['class' => 'content-grid-css1'], 
 
\t \t \t \t 'headerOptions' => ['class' => 'header-grid-css'], 
 
\t \t \t ], 
 
\t \t \t [ 
 
       'attribute'=>'create_at', 
 
\t \t \t \t 'format' => ['datetime', 'php:d-m-Y H:i:s'], 
 
\t \t \t \t 'options' => ['width' => '120'], 
 
\t \t \t \t 'content' => function($data) 
 
\t \t \t \t { 
 
\t \t \t \t \t return Html::encode($data->create_at); 
 
\t \t \t \t }, 
 
\t \t \t \t 
 
\t \t \t \t 'contentOptions' => ['class' => 'content-grid-css'], 
 
\t \t \t \t 'headerOptions' => ['class' => 'header-grid-css'], 
 
\t \t \t ], 
 
\t \t \t [ 
 
\t \t \t \t 'class' => \yii\grid\ActionColumn::className(), 
 
\t \t \t \t //'controller' => 'MarketingController', 
 
\t \t \t \t 'template' => '{update}{delete}{view}', 
 
\t \t \t \t 'header' => Html::a('<i class="glyphicon glyphicon-plus"></i>&nbsp;Add New',['create','id'=>'addb']), 
 
\t \t \t \t 'buttons' => 
 
\t \t \t \t [ 
 
\t \t \t \t \t 'update' => function($url, $model, $key) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t return Html::a('<span class="glyphicon glyphicon-pencil"></span>', 
 
\t \t \t \t \t \t $url,['title'=> Yii::t('app','update'),]); 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t 'delete' => function($url, $model, $key) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t return Html::a('<span class="glyphicon glyphicon-trash"></span>', 
 
\t \t \t \t \t \t $url,['title'=> Yii::t('app','delete'),'data-pjax' => 'userform', 
 
\t \t \t \t \t \t 'data-confirm' => Yii::t('app','Are you sure to delete this item'), 
 
\t \t \t \t \t \t 'data-method' => 'post', 
 
\t \t \t \t \t \t ]); 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t } 
 
\t \t \t \t ], 
 
\t \t \t \t 'contentOptions' => ['class' => 'content-grid-css'], 
 
\t \t \t \t 'headerOptions' => ['class' => 'header-grid-css'], 
 
\t \t \t ], 
 
     ], 
 
    ]); ?> 
 
\t <?php Pjax::end() ?> 
 
</div>

Answer 1

Essayez Js enregistrer cette façon ..

use yii\web\View; 

Ensuite, votre code javascript mettre en œuvre comme ça ...

<?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); 

Vous pouvez également essayer POS_LOAD ou POS_READY

Answer 2

Vous utilisez probablement un Ajax GridView. Dans votre code, l'écouteur de l'événement "hover" est ajouté uniquement à l'élément qui existe déjà dans la page lorsqu'il est chargé. Vous avez besoin event delegation

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

L'événement vol stationnaire n'existe plus si je l'ai cassé dans les événements réels.