Tbbutton And Tbmodal

Yii 1.1 General Discussion
1

Hi guys,

I’m just wondering if any of you have a better way of doing this?

I am using Yiibooster and have a TbButton which when clicked, should display a modal dialog.

The method shown at the Yiibooster site is nice and simple, but I would like to separate the modal code into separate files so that I don’t clutter my view up too much.

My current solution is to use sessions as such:

main view




// on clicking the button, the session is set

$this->widget(

            'bootstrap.widgets.TbButton',

            array(

                'label' => 'Upload',

                'type' => 'primary',

                'htmlOptions' => array(

                    'data-toggle' => 'modal',

                    'data-target' => '#myModal',                    

                    'onClick' => Yii::app()->session['uploads'] = true,

                ),

            )

        );

?>

<div>

    <?php

    // if the session is set, render the view file containing the modal code

    if (isset(Yii::app()->session['uploads'])) {

        unset(Yii::app()->session['uploads']);

        $this->renderPartial('_upload', array('model'=>$model, 'var'=>$myVar), false, false);

    }

?>

</div>

So when the Upload button is clicked, I get a modal dialog and everything works. However I would like to take that logic out of the view, drop the sessions and use an action in the controller instead. I figure that it is something to do with ajaxOptions but I just can’t figure it out.

As I said, it is working but I will be making use of a lot of modal dialogs and my method just seems dirty! :slight_smile:

Thanks

2

Bump!

Just checking if anyone has any ideas?

I didn’t show the code for my div that the dialog loads into:




<div id="modalConfirm">

    <?php

    if (isset(Yii::app()->session['confirm'])) {

        $vars = Yii::app()->session['confirm'];

        unset(Yii::app()->session['confirm']);

        $this->renderPartial('_confirm', array(

            'vars'=>$vars,

        ), false, false);

    }

?>

</div>

I’m rolling out a couple more modal dialogs and my solution is horrible. It requires a redirect in order to get the dialog to open, i.e., call the action, set the ‘confirm’ session, redirect back to the view, which then opens the dialog.

Today I tried to do it using an ajaxLink. I can see in firebug that the data loads into the div fine, but I don’t see any dialog. :frowning:

Here is what I have:

// _modal.php (Dialog View)




echo CHtml::form();

$this->beginWidget(

    'bootstrap.widgets.TbModal',

    array(

        'id' => 'myModal',

        'autoOpen' => true,

    )

);

<div class="modal-header">

    <a class="close" data-dismiss="modal">&times;</a>

    <h4>Add Comment</h4>

</div>


<div class="modal-body">

    <div class="form">

        <?php echo $vars['data']; ?>

    </div>

</div>

?>    <div class="modal-footer">

        // modal buttons here

    </div>

<?php $this->endWidget();

echo CHtml::endForm();

// Action




public function actionTest()

    {

        $vars = array();

        $vars['data'] = 'This is some data';

        $this->renderPartial('//application/modal/_modal', array('vars'=>$vars), false, false);

        Yii::app()->end();

    }

// View




$this->widget(

    'bootstrap.widgets.TbButton',

    array(

        'label'         =>  'Test Button',

        'buttonType'    =>  'ajaxLink',

        'type'          =>  'link',

        'url'           =>  array('comment/test'),

        'htmlOptions'   =>  array(

            'data-toggle'   =>  'modal',

            'data-target'   =>   '#myModal',

        ),

        'ajaxOptions'   =>  array(

            'type' => 'POST',

            'success' => "function( data )

                  {

                    // handle return data

                    $('#modalConfirm').html(data);

                    $('#myModal').show();

                  }",

        )

    )

);?>

<!-- Modal Dialog -->

<div id="modalConfirm"></div>

On clicking ‘Test Button’, nothing happens but the modelConfirm div is filled in both firebug and in chrome with the dialog view, just no popup. :frowning:

I would really appreciate some ideas if you have any!