Form inside TbNavbar Dropdown Items YiiBooster

Question

I'm working on Yii Framework and Yii Booster extension as bootstrap. I'm trying to make a Login form inside a dropdown. I have a TbNavbar and on it is the dropdown code, but when I add the login form inside the dropdown it just shows the code inside the drop down.

I use as guide this post:

Here is my code with the form and it's just not working:

<?php  $this->beginWidget('bootstrap.widgets.TbNavbar', array(
'type'=>'inverse',
'brand' => 'Title',  
'fixed'=>'bottom',  
'collapse'=>true,  
'items'=>array(
array(
  'class'=>'bootstrap.widgets.TbMenu',
  'type'=>'inverse',
  'items'=>array(
    array('label'=>'Home', 'url'=>'#', 'active'=>true),
    array('label'=>'Link', 'url'=>'#'),
    array('label' => 'DropDown', 'items' => array(
          array('label' => 'Item1', 'content' => 'Item1 Content'),
          array('label' => 'Item2', 'content' => 'Item2 Content')
        )),
    array('label'=>'Dropdown', 'url'=>'#', 'items'=>array(
      array('label'=>'Action', 'url'=>'#'),
      array('label'=>'Another action', 'url'=>'#'),
      array('label'=>'Something else here', 'url'=>'#'),
      '---',
      array('label'=>'NAV HEADER'),
      array('label'=>'Separated link', 'url'=>'#'),
      array('label'=>'One more separated link', 'url'=>'#'),


    )),
  ),
),


'<ul class="nav pull-right">
               <li><a href="/users/sign_up">Sign Up</a></li>
               <li class="divider-vertical"></li>
               <li class="dropdown">
                   <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
                   <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
                       <?php $form = $this->beginWidget(\'bootstrap.widgets.TbActiveForm\', array(
                          \'id\'=>\'verticalForm\',
                          \'htmlOptions\'=>array(\'class\'=>\'well\'),
                      )); ?>

                      <?php echo $form->textFieldRow($model, \'textField\', array(\'class\'=>\'span3\')); ?>
                      <?php echo $form->passwordFieldRow($model, \'password\', array(\'class\'=>\'span3\')); ?>
                      <?php echo $form->checkboxRow($model, \'checkbox\'); ?>
                      <?php $this->widget(\'bootstrap.widgets.TbButton\', array(\'buttonType\'=>\'submit\', \'label\'=>\'Login\')); ?>

                      <?php $this->endWidget(); ?>
                    </div>
               </li>
           </ul>'  ),)); ?>
<?php $this->endWidget(); ?>

Hearaman · Answer 1 · 2013-07-25T06:27:23.110

Try like this. It is working for me

        <?php
        $this->beginWidget('bootstrap.widgets.TbNavbar', array(
            'type' => 'inverse',
            'brand' => 'Title',
            'fixed' => 'bottom',
            'collapse' => true,
            'items' => array(
                array(
                    'class' => 'bootstrap.widgets.TbMenu',
                    'type' => 'inverse',
                    'items' => array(
                        array('label' => 'Home', 'url' => '#', 'active' => true),
                        array('label' => 'Link', 'url' => '#'),
                        array('label' => 'DropDown', 'items' => array(
                                array('label' => 'Item1', 'content' => 'Item1 Content'),
                                array('label' => 'Item2', 'content' => 'Item2 Content')
                        )),
                        array('label' => 'Dropdown', 'url' => '#', 'items' => array(
                                array('label' => 'Action', 'url' => '#'),
                                array('label' => 'Another action', 'url' => '#'),
                                array('label' => 'Something else here', 'url' => '#'),
                                '---',
                                array('label' => 'NAV HEADER'),
                                array('label' => 'Separated link', 'url' => '#'),
                                array('label' => 'One more separated link', 'url' => '#'),
                        )),
                    ),
                ),
                '<ul class="nav pull-right">
            <li><a href="/users/sign_up">Sign Up</a></li>
            <li class="divider-vertical"></li>
            <li class="dropdown">
                <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
                <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">' . html($this,$model) . '</div>
            </li>
        </ul>'),
                )
        );
        ?>
        <?php $this->endWidget(); ?>

function definition

    <?php
    function html($obj,$model)
    {
        $html='';
        $form = $obj->beginWidget('bootstrap.widgets.TbActiveForm', array(
            'id' => 'verticalForm',
            'htmlOptions' => array('class' => 'well')
                ));
        $html.=$form->textFieldRow($model, 'textField', array('class' => 'span3'));
        $html.=$form->passwordFieldRow($model, 'password', array('class' => 'span3'));
        $html.=$form->checkboxRow($model, 'checkbox');
        $html.=CHtml::submitButton('Login',array('class'=>'btn btn-info'));    
        $obj->endWidget();

        return $html;
    }
    ?>

EDIT:: As per bellow comment

You can stop the default propagation of Bootstrap Drop-down when you are working inside drop down content.

        <script type="text/javascript">
            $(document).ready(function()
            {        
                $('.dropdown-menu').click(function(e)
                {            
                    e.stopPropagation();            
                }); 
            });
        </script>

Thanks! It's now on the dropdown, but when I click the button, doesn't do something :c Additional to that I have some code to stop ptopagation on the thextfields and the "login button", because when you clicked on something at the dropdown it hiddes with no reason. Can that be an issue? — Arely Coca, Jul 24 '13 at 19:16
@AareelyCoca, Please check the Edit to solve the problem you are facing with dropdown. — Hearaman, Jul 25 '13 at 06:29
Ok, I have all the code you put me here and when I click the button it keeps doing nothing :c Would be something else I'm missing? — Arely Coca, Jul 25 '13 at 22:51

score 0 · Answer 2 · answered Mar 30 '14 at 06:49

0

Put this code to your main layouts head. This will load javascript, and menu should work with it.

<?php Yii::app()->bootstrap->registerAssetJs('');?>

answered Mar 30 '14 at 06:49

Szigyártó Mihály

521
6
11

Form inside TbNavbar Dropdown Items YiiBooster

2 Answers2