Project with zii widgets - CJuiTabs

Yii 1.1 General Discussion
1

I have 4 tabs, as you can see the 4th one is conditional. My problem is when I specify which tab to have the focus on.

View:




<?php


$tabs = array();

$tabs['Details'] = $this->renderPartial('subs/_item_detail', array('item' => $item), true);

$tabs['Flag'] = $this->renderPartial('subs/_item_flag', array('item' => $item), true);

$tabs['Send Inquiry'] = array('ajax' => array('/mbox/gdbmessage/inquiry_form2', 'pid' => $item['id']));

if ($item['is_offer'])

   $tabs['Make Best Offer'] = array('ajax' => array('/garage/offer/make', 'pid' => $item['id']));


$this->widget('zii.widgets.jui.CJuiTabs', array(

                'tabs' => $tabs,

                'options' => array(

                    'collapsible' => false,

                    'selected' => $tab,

                    'height' => '100px',

                    'id' => 'garage-detail'

                ),

));

?>

The above generates 4 tab ids, #yw0_tab_0, #yw0_tab_1, #ui-tabs-1, and #ui-tabs-2 respectively, which I think is not a problem.

Issue:

When $tab=0, the first tab opens as expected

When $tab=1, the second tab opens as expected

When $tab=2, the fourth tab opens - Un expected

When $tab=3, the fourth tab open as expected.

The problem I have found is when tabs 3 is requested focus on (i.e., when tab=2), it makes ajax call to both 3rd and 4th tab. Finally, the 4th gets the focus. Guys, any idea how to fix this is welcome. Thanks.

2

Anyone with a solution. I am not able to figure out a remedy.

3

What is the value variable $tab?

4

0 to 3, I have problem when it is 2.

5

could you post the procesed html and jscript?

thank you

EDIT: What version of Yii are u using?

6

Thanks Sebas. I am using 1.1.3.




<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

  <link rel="stylesheet" type="text/css" href="http://localhost/gfied/js/popeye/jquery.popeye.css">

  <link rel="stylesheet" type="text/css" href="http://localhost/gfied/js/popeye/jquery.popeye.style.css">

  <link rel="stylesheet" type="text/css" href="/gfied/assets/76bcc17f/css/base/jquery-ui.css">

<script type="text/javascript" src="/gfied/assets/c981054/jquery.js">

</script>

<script type="text/javascript" src="http://localhost/gfied/js/popeye/jquery.popeye-2.0.4.min.js">

</script>

<style type="text/css">

.ppy-imglist { position: absolute; top: -1000em; left: -1000em; }

</style>

<title>

gFied : Green and Yellow - Detail Item

</title>

  <meta name="description" content="">

  <meta name="keywords" content="k1, k2, k3">

  <meta name="robots" content="index, follow, NoArchive, NoImageIndex">

  <link rel="stylesheet" type="text/css" href="/gfied/css/main.css">

  <link rel="stylesheet" type="text/css" href="/gfied/css/form.css">

  <link rel="stylesheet" type="text/css" href="/gfied/css/style.css">

<style type="text/css">

.ppy-imglist { position: absolute; top: -1000em; left: -1000em; }

</style>

<style type="text/css">

.ppy-imglist { position: absolute; top: -1000em; left: -1000em; }

</style>

<style type="text/css">

.ppy-imglist { position: absolute; top: -1000em; left: -1000em; }

</style>

</head>

<body>

<div id="header">

<div id="top">

<div id="logo">

<a class="logo" href="http://localhost/gfied/">

text

</a>

</div>

<div id="greet">

Good Evening! Guest,

<a href="/gfied/grbac/authenticate/login">

login

</a>

or

<a href="/gfied/grbac/registration/register">

Register

</a>

<p class="r">

<b class="cr">

Free!

</b>

<a href="/gfied/billboard/post">

Post an Ad

</a>

</p>

</div>

<div id="weather">

</div>

</div>

<div style="clear: both;">

</div>

<div id="nav">

<div id="navigation">

<ul id="yw1">

<li>

<a href="/gfied/garage/items">

Garage

</a>

</li>

</ul>

</div>

<span class="" id="ajax">

&nbsp;&nbsp;

</span>

</div>

</div>

<div style="clear: both;">

</div>

<div id="filter-section">

<div id="filter-left">

<h1>

Garage @ Aurora, CO

</h1>

</div>

<div id="filter-rite">

<a href="#" id="yt0">

Change Category

</a>

<a href="#" id="yt1">

Nearby cities

</a>

<a href="#" id="yt2">

Change State

</a>

<a href="/gfied/garage/watch/watches">

My watches

</a>

<a href="/gfied/garage/post/manager">

Sell Item

</a>

<a href="/gfied/mbox/inbox">

pBox

</a>

</div>

</div>

<div style="clear: both;">

</div>

  <br>

<div id="container" style="">

<div id="content">

<div class="gRow">

<div class="gCol" style="width: 420px; margin: 0pt; height: 400px;">

  <link rel="stylesheet" type="text/css" href="http://localhost/gfied/js/popeye/jquery.popeye.css">

  <link rel="stylesheet" type="text/css" href="http://localhost/gfied/js/popeye/jquery.popeye.style.css">

<script type="text/javascript" src="/gfied/assets/c981054/jquery.js">

</script>

<script type="text/javascript" src="http://localhost/gfied/js/popeye/jquery.popeye-2.0.4.min.js">

</script>

<script type="text/javascript">

$('head').append('<style type="text/css"> .ppy-imglist { position: absolute; top: -1000em; left: -1000em; } </style>');

</script>

<div style="height: 400px; width: 400px; float: left; margin: 0pt; z-index: 100;" class="ppy-placeholder">

<div style="height: 404px; width: 410px; float: none; margin: 0px 0px 10px;" class="ppy-placeholder">

<div style="height: 404px; width: 410px; float: none; margin: 0px;" class="ppy-placeholder">

<div style="height: 404px; width: 410px; float: none; margin: 0px;" class="ppy-placeholder">

<div style="position: absolute; width: auto; height: auto; margin: 0px; top: 0px; left: 0px; right: auto;" class="ppy ppy-active" id="ppy2">

<ul class="ppy-imglist">

<li>

<a href="http://localhost/gfied/images%5Cgarage%5Clarger/2/2178913.jpg">

  <img src="http://localhost/gfied/images%5Cgarage%5Clarger/2/2178913.jpg">

</a>

</li>

<li>

<a href="http://localhost/gfied/images%5Cgarage%5Clarger/2/delloptiplex_gx150_tower.jpg">

  <img src="http://localhost/gfied/images%5Cgarage%5Clarger/2/delloptiplex_gx150_tower.jpg">

</a>

</li>

</ul>

<div class="ppy-outer">

<div class="ppy-stagewrap">

<div class="ppy-stagewrap">

<div class="ppy-stagewrap">

<div style="background-image: url(&quot;http://localhost/gfied/images%5Cgarage%5Clarger/2/2178913.jpg&quot;);" class="ppy-stage">

<div style="opacity: 0;" class="ppy-nav">

<div class="nav-wrap">

<a class="ppy-prev" title="Previous image">

Previous image

</a>

<a class="ppy-next" title="Next image">

Next image

</a>

</div>

</div>

<div class="ppy-counter">

Images:

<strong class="ppy-current">

1

</strong>

/

<strong class="ppy-total">

2

</strong>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<script type="text/javascript">

/*<![CDATA[*/

$(document).ready(function () {

var options = {

caption:false,

duration:300,

}

$("#ppy2").popeye(options);

});

/*]]>*/

</script>

</div>

<div class="gCol" style="width: 558px; height: 441px;">

<div class="row2" style="width: 558px; height: 341px; overflow: auto; padding-top: 2px;">

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="yw0">

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">

<li class="ui-state-default ui-corner-top">

<a href="#yw0_tab_0">

Details

</a>

</li>

<li class="ui-state-default ui-corner-top">

<a href="#yw0_tab_1">

Flag

</a>

</li>

<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">

<a href="#ui-tabs-1">

Send Inquiry

</a>

</li>

<li class="ui-state-default ui-corner-top">

<a href="#ui-tabs-2">

Make Best Offer

</a>

</li>

</ul>

<div class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" id="yw0_tab_0">

<div style="height: 275px;">

<h2 class="bg_black30" style="overflow: hidden; background: none repeat scroll 0% 0% rgb(155, 155, 155); color: rgb(255, 255, 255);">

Dell P3 128MB 20GB DVD CD LAN Modem

</h2>

<div class="gRow">

<div class="gCol">

Posted on: 09/05/2010 12:47:23

</div>

<div class="gCol fr">

<div class="fr">

Aurora, CO

</div>

</div>

</div>

<div class="gRow">

<div class="fl" style="clear: both; padding: 0pt; margin-bottom: 2px;">

<a class="r10" title="seller rating/profile page" href="/gfied/profile/user/view/puid/2">

&nbsp;

</a>

</div>

<div class="fl">

(1)

</div>

<div class="gCol fr">

<span class="button16">

<a class="user" title="seller profile page" href="/gfied/profile/user/view/puid/2">

&nbsp;

</a>

</span>

deepak

</div>

</div>

<div class="gRow">

<div class="gCol c">

Condition:

<b>

Used

</b>

</div>

<div class="gCol fr">

<div class="footer-icons-other">

<b class="ship" title="will ship">

&nbsp;

</b>

</div>

</div>

</div>

<hr style="clear: both;">

<div class="gRow" style="height: auto;">

<div style="height: 172px; overflow-y: scroll;">

<div class="tag128n">

<div class="price" style="">

$35.00 &nbsp;

</div>

<div class="qty" style="clear: both;">

<p>

Quantity:

</p>

<p class="b">

0

</p>

</div>

</div>

<p>

This computer works great and is good for internet, music, word processing, email, spreadsheets, and most other business/home uses. If you add $10.00 I'll throw in matching Viewsonic 19" Monitor and Viewsonic Keyboard. (That would be $35, total) Pentium III 800Mhz - 128MB RAM - 20GB HDD - DVD Reader - CD Burner Windows XP SP3 2 USB Ports Built in LAN networking (10/100) (Use for broadband or DSL internet) 56K dial-up modem (Fax, Internet)

</p>

</div>

</div>

</div>

</div>

<div class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" id="yw0_tab_1">

<style type="text/css">

.tdh { display: block; font-size:20px; color:#9B9B9B; font-weight: bold; }

</style>

<table style="height: 275px; overflow: hidden;">

<tbody>

<tr>

<td class="c tdh" style="padding-top: 20px;">

Flagging Denied!

  <br>

</td>

</tr>

<tr>

<td class="c at" style="padding-top: 50px;">

<b class="c">

To avoid misuse, only members can flag item.

</b>

</td>

</tr>

</tbody>

</table>

</div>

<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="ui-tabs-1">

<form id="pbox-form" action="/gfied/mbox/gdbmessage/inquiry_form2/pid/1" method="post">

<div class="form" style="height: 275px; overflow: hidden;">

  <img style="float: right;" src="http://localhost/gfied/css/bg/stamp.png" alt="stamp">

  <input name="Pbox[ref_id]" id="Pbox_ref_id" value="1" type="hidden">

  <input name="Pbox[subject]" id="Pbox_subject" value="Inquiry - Dell P3 128MB 20GB DVD CD LAN Modem" type="hidden">

  <input name="Pbox[email_toName]" id="Pbox_email_toName" value="deepak" type="hidden">

  <input name="Pbox[email_fromName]" id="Pbox_email_fromName" value="Guest User" type="hidden">

  <input name="Pbox[notify_toName]" id="Pbox_notify_toName" value="" type="hidden">

<div class="row">

<p class="cr">

Welcome guest! this will expose your email address to the seller.

</p>

<label for="Pbox_email" class="required">

Email

<span class="required">

*

</span>

</label>

  <input size="45" maxlength="90" name="Pbox[email]" id="Pbox_email" value="" type="text">

<div id="Pbox_email_em_" class="errorMessage" style="display: none;">

</div>

</div>

<div class="row">

<label for="Pbox_To:">

To:

</label>

deepak

</div>

<div class="row">

<label for="Pbox_Subject:">

Subject:

</label>

Inquiry - Dell P3 128MB 20GB DVD CD LAN Modem

</div>

<div class="row">

<label for="Pbox_message" class="required">

Message

<span class="required">

*

</span>

</label>

<textarea style="width: 385px; height: 60px;" name="Pbox[message]" id="Pbox_message">

</textarea>

</div>

<div class="row buttons fr">

<a href="#" class="mail button32 fr send_inquiry-form" title="send inquiry">

&nbsp;

</a>

</div>

</div>

</form>

</div>

<div class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" id="ui-tabs-2">

<style type="text/css">

.rot { display: block; writing-mode: tb-rl; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); font-size:20px; color:#9B9B9B; font-weight: bold; }

</style>

<div class="gRow" style="height: 272px;" id="offers">

<p class="rot fr c" style="margin: 0pt; padding: 20px 0pt 0pt;">

asking

  <br>

$35.00

</p>

<div style="width: 400px; height: 130px;">

<p class="b cr">

Only member can make offer. Guest may send inquiry,

</p>

<a class="button150" href="/gfied/grbac/authenticate/login">

login

</a>

  <br>

  <br>

<a class="button150" href="/gfied/grbac/registration/register">

register

</a>

</div>

<div class="gRow yellow">

<div class="gCol b w60 c">

Status

</div>

<div class="gCol b w80 r">

Offer

</div>

<div class="gCol b w20 r">

&nbsp;

</div>

<div class="gCol b w140">

Date

</div>

<div class="gCol b w20 r">

&nbsp;

</div>

<div class="gCol b">

User

</div>

</div>

<div style="height: 130px; overflow-y: scroll;">

<div class="gRow evn">

<div class="gCol w60 c">

  <img src="http://localhost/gfied/css/i16/offer_H.png" alt="">

</div>

<div class="gCol w80 r">

$30.00

</div>

<div class="gCol w20 r">

&nbsp;

</div>

<div class="gCol w1140">

09/05/2010 05:59:39

</div>

<div class="gCol w20 r">

&nbsp;

</div>

<div class="gCol">

mon

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="row2 bg_black128" style="background-color: rgb(163, 163, 163); width: 100%; height: 48px; padding-top: 5px;">

  <link rel="stylesheet" type="text/css" href="http://localhost/gfied/js/popeye/jquery.popeye.css">

  <link rel="stylesheet" type="text/css" href="http://localhost/gfied/js/popeye/jquery.popeye.style.css">

  <link rel="stylesheet" type="text/css" href="/gfied/assets/76bcc17f/css/base/jquery-ui.css">

<script type="text/javascript" src="/gfied/assets/c981054/jquery.js">

</script>

<script type="text/javascript" src="http://localhost/gfied/js/popeye/jquery.popeye-2.0.4.min.js">

</script>

<div style="padding-top: 3px;" class="fr w60">

<span id="watch-icon-1">

<a href="#" id="GDB:DEL:1" class="button32 unwatch watch-1" ,="" title="Unwatch this item">

&nbsp;

</a>

</span>

</div>

<div style="padding-top: 3px;" class="fr w60">

<b class="sold" title="this item is on hold">

&nbsp;

</b>

</div>

<script type="text/javascript" src="/gfied/assets/76bcc17f/js/jquery-ui.min.js">

</script>

<script type="text/javascript">

/*<![CDATA[*/

$(document).ready(function () {

var options = {

caption:false,

duration:300,

}

$("#ppy2").popeye(options);

});

jQuery('#yw0').tabs({'collapsible':false,'selected':'3','height':'100px','id':'garage-detail'});

$("a.e2f0-1").click(function()

{

var params=$(this).attr("id");

$("#ajax").addClass("ajax-loader");

$.ajax(

{

url:"/gfied/garage/watch/toggle",

type:"POST",

data:{"params":params},timeout: 2000,

success:function(data)

{

$("#watch-icon-1").html(data);

$("#ajax").removeClass("ajax-loader");

}

})

return true;

});

$("a.watch-1").click(function()

{

var params=$(this).attr("id");

$("#ajax").addClass("ajax-loader");

$.ajax(

{

url:"/gfied/garage/watch/toggle",

type:"POST",

data:{"params":params},timeout: 2000,

success:function(data)

{

$("#watch-icon-1").html(data);

$("#ajax").removeClass("ajax-loader");

}

})

return true;

});

/*]]>*/

</script>

</div>

</div>

</div>

<div style="clear: both;">

<p class="b bg_green h24">

Seller's other items

</p>

<div class="gRow">

<div class="gCol mini">

<fieldset class="mini">

<legend class="mini">

$35.00

</legend>

<div class="title">

Dell P3 128MB 20GB DVD CD LAN Modem

</div>

<div class="gRow image c">

  <img class="c" src="http://localhost/gfied/images%5Cgarage%5Cthumbs/2/2178913.jpg" alt="thumbq">

  <img src="http://localhost/gfied/images%5Cgarage%5Cthumbs/2/delloptiplex_gx150_tower.jpg" alt="">

</div>

<div class="condition gRow">

Used

</div>

<div class="description">

This computer works great and is good for internet, music, word processing, email, spreadsheets, and most other business/home uses. If you add $10.00 I'll throw in matching Viewsonic 19" Monitor and Viewsonic Keyboard. (That would be $35, total) Pentium III 800Mhz - 128MB RAM - 20GB HDD - DVD Reader - CD Burner Windows XP SP3 2 USB Ports Built in LAN networking (10/100) (Use for broadband or DSL internet) 56K dial-up modem (Fax, Internet)

</div>

<div class="gRow icons">

<div class="footer-icons-other">

<span class="button16">

<a class="detail" title="view detailed item page" href="/gfied/garage/item/detail/pid/1">

&nbsp;

</a>

</span>

</div>

<div class="footer-icons-other">

<span class="button16">

<a class="offer" title="make best offer" href="/gfied/garage/offer/make/pid/1">

&nbsp;

</a>

</span>

</div>

<div class="footer-icons-other">

</div>

<div class="footer-icons-other">

<b class="ship" title="will ship">

&nbsp;

</b>

</div>

</div>

</fieldset>

</div>

<div class="gCol mini">

<fieldset class="mini">

<legend class="mini">

$50.00

</legend>

<div class="title">

PC P4

</div>

<div class="gRow image c">

  <img class="c" src="http://localhost/gfied/images%5Cgarage%5Cthumbs/2/dellpc2.jpg" alt="thumbq">

  <img src="http://localhost/gfied/images%5Cgarage%5Cthumbs/2/delloptiplex_gx150_tower.jpg" alt="">

</div>

<div class="condition gRow">

Openbox

</div>

<div class="description">

barely used computer

</div>

<div class="gRow icons">

<div class="footer-icons-other">

<span class="button16">

<a class="detail" title="view detailed item page" href="/gfied/garage/item/detail/pid/25">

&nbsp;

</a>

</span>

</div>

<div class="footer-icons-other">

<span class="button16">

</span>

</div>

<div class="footer-icons-other">

<b class="delivery" title="will deliver">

&nbsp;

</b>

</div>

<div class="footer-icons-other">

<b class="ship" title="will ship">

&nbsp;

</b>

</div>

</div>

</fieldset>

</div>

</div>

</div>

</div>

<div style="clear: both;">

</div>

  <br>

<div id="footer">

<a href="http://localhost/">

about us

</a>

◊

<a href="http://localhost/">

main home

</a>

◊

<a href="http://localhost/gfied/site/features">

features

</a>

◊ Creation of

<a href="http://www.incisivesystem.com/">

Incisive System

</a>

</div>

<div id="legal">

<a href="http://localhost/">

Copyright

</a>

◊

<a href="http://localhost/">

Privacy

</a>

◊

<a href="http://localhost/gfied/site/features">

Accessibility

</a>

</div>

<script type="text/javascript" src="/gfied/assets/76bcc17f/js/jquery-ui.min.js">

</script>

<script type="text/javascript">

/*<![CDATA[*/

jQuery(document).ready(function() {

$(document).ready(function () {

var options = {

caption:false,

duration:300,

}

$("#ppy2").popeye(options);

});

jQuery('#yw0').tabs({'collapsible':false,'selected':'3','height':'100px','id':'garage-detail'});

$("a.e2f0-1").click(function()

{

var params=$(this).attr("id");

$("#ajax").addClass("ajax-loader");

$.ajax(

{

url:"/gfied/garage/watch/toggle",

type:"POST",

data:{"params":params},timeout: 2000,

success:function(data)

{

$("#watch-icon-1").html(data);

$("#ajax").removeClass("ajax-loader");

}

})

return true;

});

$("a.watch-1").click(function()

{

var params=$(this).attr("id");

$("#ajax").addClass("ajax-loader");

$.ajax(

{

url:"/gfied/garage/watch/toggle",

type:"POST",

data:{"params":params},timeout: 2000,

success:function(data)

{

$("#watch-icon-1").html(data);

$("#ajax").removeClass("ajax-loader");

}

})

return true;

});

jQuery('#yt0').live('click',function(){jQuery.ajax({'type':'POST','beforeSend':function(){

$("#ajax").addClass("ajax-loader");},'complete':function(){

$("#ajax").removeClass("ajax-loader");

return false;},'url':'/gfied/garage/items/categories','cache':false,'data':jQuery(this).parents("form").serialize(),'success':function(html){jQuery("#content").html(html)}});return false;});

jQuery('#yt1').live('click',function(){jQuery.ajax({'type':'POST','beforeSend':function(){

$("#ajax").addClass("ajax-loader");},'complete':function(){

$("#ajax").removeClass("ajax-loader");

return false;},'url':'/gfied/garage/items/cities','cache':false,'data':jQuery(this).parents("form").serialize(),'success':function(html){jQuery("#content").html(html)}});return false;});

jQuery('#yt2').live('click',function(){jQuery.ajax({'type':'POST','beforeSend':function(){

$("#ajax").addClass("ajax-loader");},'complete':function(){

$("#ajax").removeClass("ajax-loader");

return false;},'url':'/gfied/garage/items/states','cache':false,'data':jQuery(this).parents("form").serialize(),'success':function(html){jQuery("#content").html(html)}});return false;});

});

/*]]>*/

</script>

</div>

</body>

</html>

Tab IDs are: #yw0_tab_0, #yw0_tab_1, #ui-tabs-1 and #ui-tabs-2.




<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">

<li class="ui-state-default ui-corner-top">

<a href="#yw0_tab_0">

Details

</a>

</li>

<li class="ui-state-default ui-corner-top">

<a href="#yw0_tab_1">

Flag

</a>

</li>

<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">

<a href="#ui-tabs-1">

Send Inquiry

</a>

</li>

<li class="ui-state-default ui-corner-top">

<a href="#ui-tabs-2">

Make Best Offer

</a>

</li>

</ul>

The PHP code in view file is as follows




<?php


$tabs = array();

$tabs['Details'] = $this->renderPartial('subs/_item_detail', array('item' => $item), true);

$tabs['Flag'] = $this->renderPartial('subs/_item_flag', array('item' => $item), true);

$tabs['Send Inquiry'] = array('ajax' => array('/mbox/gdbmessage/inquiry_form2', 'pid' => $item['id']));

if ($item['is_offer'])

   $tabs['Make Best Offer'] = array('ajax' => array('/garage/offer/make', 'pid' => $item['id']));


$this->widget('zii.widgets.jui.CJuiTabs', array(

                'tabs' => $tabs,

                'options' => array(

                    'collapsible' => false,

                    'selected' => $tab,

                    'height' => '100px',

                    'id' => 'garage-detail'

                ),

));

?>
7

Dear,

There is a small bug.

Replace


'selected' => $tab,

with


'select' => $tab,

Thanks