Title Popover In List View

Yii 1.1 General Discussion
1

I am trying to popover a dialog box by clicking a link (Click here) in List view. The popover works fine but when i click any of the Click here link, it shows the title of first data in a list. I want to show corresponding title when clicks the link for each data item.

Index.php




<?php if(!empty($_GET['tag'])): ?>

<h1>Posts Tagged with <i><?php echo CHtml::encode($_GET['tag']); ?></i></h1>

<?php endif; ?>


<?php $this->widget('zii.widgets.CListView', array(

	'dataProvider'=>$dataProvider,

	'itemView'=>'_view',

	'template'=>"{items}\n{pager}",

)); ?>


<script>

    $(document).ready(function () {

      $("#closebtn").click(function () {

        $("#dlg").hide('800', "swing", function () { $("#bkg").fadeOut("500"); });

      });

      $(".opn").click(function () {

        if (document.getElementById('bkg').style.visibility == 'hidden') {

          document.getElementById('bkg').style.visibility = '';

          $("#bkg").hide();

        }

        if (document.getElementById('dlg').style.visibility == 'hidden') {

          document.getElementById('dlg').style.visibility = '';

          $("#dlg").hide();

        }

        $("#bkg").fadeIn(500, "linear", function () { $("#dlg").show(800, "swing"); });

      });    


    });

  </script>

_view.php




<div class="post">

<?php echo $data->title;

echo $data->author;

?> 

</div>

<div class="normal">

    

     <p><a href="#" class="opn">Click here</a></p>

    

  </div>

  

  <div class="blockbkg" id="bkg" style="visibility: hidden;">

    <div class="cont" id="dlg" style="visibility: hidden;">

      <div class="closebtn" title="Close" id="closebtn"></div>

      <?php echo $data->title; ?>

    </div>

  </div>

Thanks.

2

You have multiple elements with the ID "dlg" on the page (one for each record). It would be much easier to remove the ID completely and do something like this:




      $(".closebtn").click(function () {

        var dlgElem = $(this).closest('.cont');

        var bkgElem = dlgElem.closest('.blockbkg');


        dlgElem.hide('800', "swing", function () { bkgElem.fadeOut("500"); });

      });


      $(".opn").click(function () {

        var bkgElem = $(this).closest('.normal').find('.blockbkg');

        var dlgElem = bkgElem.find('.cont');


        if (bkgElem.css('visibility') == 'hidden')

          bkgElem.css('visibility', '').hide();


        if (dlgElem.css('visibility') == 'hidden')

          dlgElem.css('visibility', '').hide();


        bkgElem.fadeIn(500, "linear", function () { dlgElem.show(800, "swing"); });

      });

It makes sense to stick with jQuery rather than mixing and matching with regular javascript too.

Is there any reason that you’re choosing to write your own dialog solution rather than use the functionality built into jQuery UI?

EDIT

I’ve just noticed that your “normal” div doesn’t wrap the dialog section, so you’d want to add another wrapping div.

Your code could look like this using jQuery UI:

_view.php




<div class="post">

    <?= CHtml::encode($data->title); ?>

    <?= CHtml::encode($data->author); ?>


    <div class="normal">

        <p><a href="#" class="opn">Click here</a></p>

    </div>


    <div class="cont" title="Details" style="display:none;">

        <?= CHtml::encode($data->title); ?>

    </div>

</div>

index.php




<? Yii::app()->clientScript->registerCoreScript('jquery.ui'); ?>


<?php if(!empty($_GET['tag'])): ?>

<h1>Posts Tagged with <i><?php echo CHtml::encode($_GET['tag']); ?></i></h1>

<?php endif; ?>


<?php $this->widget('zii.widgets.CListView', array(

        'dataProvider'=>$dataProvider,

        'itemView'=>'_view',

        'template'=>"{items}\n{pager}",

)); ?>


<script type="text/javascript">

    $(document).ready(function(){

        $('.opn').click(function(){

            $(this).closest('.post').find('.cont').dialog();

        });

    });

</script>

There might need to be some arguments to dialog(), I can’t remember off hand. Also, I wrapped your link and dialog section inside the .post div.