0

I have done a yiibooster wizard form, everything works perfectly BUT i want to force the customer to click in a TbExtendedGridView before he can do the next step.

In the form there are 2 TbExtendedGridView and 2 date fields.

Here is some code of the form:

    <?php $form=$this->beginWidget('bootstrap.widgets.TbActiveForm', array(
    'id'=>'zf-contratos-form',
    // Please note: When you enable ajax validation, make sure the corresponding
    // controller action is handling ajax validation correctly.
    // There is a call to performAjaxValidation() commented in generated controller code.
    // See class documentation of CActiveForm for details on this.
    'enableAjaxValidation'=>false,
    'htmlOptions'=>array('class'=>'well'),
    'action' => array( '/ZfContratos/create' ),
)); ?>
    <div id="wizard-bar" class="progress progress-striped active">
    <div class="bar"></div>
    </div>
    <?php $this->widget(
    'bootstrap.widgets.TbWizard',
    array(
        'type' => 'tabs', // 'tabs' or 'pills'
        'pagerContent' => '<div style="float:right">
                    <input type="button" class="btn button-next" name="next" value="Siguiente" />
                </div>
                <div style="float:left">
                    <input type="button" class="btn button-previous" name="previous" value="Atrás" />
                </div>
                <br /><br />',
        'options' => array(
            'nextSelector' => '.button-next',
            'previousSelector' => '.button-previous',
            'onTabShow' => 'js:function(tab, navigation, index) {
                        var $total = navigation.find("li").length;
                        var $current = index+1;
                        var $percent = ($current/$total) * 100;
                        $("#wizard-bar > .bar").css({width:$percent+"%"});
            }',
            'onTabClick' => 'js:function(tab, navigation, index) {alert("Tab Click Disabled");return false;}',
        ),
        'tabs' => array(
            array(
                'label' => 'Arrendatarios',
                'content' => $this->renderPartial('//ZfContratos/_form_arrendatarios', array('model' => $model, 'form' => $form), true),
                'active' => true
            ),
            array('label' => 'Inmuebles', 'content' => $this->renderPartial('//ZfContratos/_form_inmuebles', array('model' => $model, 'form' => $form), true)),
            array('label' => 'Fecha', 'content' => $this->renderPartial('//ZfContratos/_form_contratos', array('model' => $model, 'form' => $form), true)),
        ),
    )
); ?>

<?php $this->endWidget(); ?>

The procedure would be, first step with "next" disable and when the customer clik on a row of the TbExtendedGridView "next" will be available and he can click on "next" to the next step.

Thank you so much.

CODE TESTED WORKING:

$cs = Yii::app()->getClientScript();
$cs->registerScript('hello', "
    $(window).load(function()
    { 
        alert('hello');
        $('#next').attr('disabled',true);
    });");
$cs->registerScript('button',"
        $('#arrendatario').click(function() 
        {
            $('#next').attr('disabled',false);
    });");
Sergio_HW
  • 155
  • 3
  • 18

1 Answers1

0

You can do this in Jquery. First you have to set Id of TbExtendedGridView. Next Button contains class next Then you do like this

<script type="text/javascript">
window.onload=function(){
$('.next').attr('disabled',true);
}
$(document).ready(
function()
{
   $('.grid-view').click(function() 
{
   $('.next').attr('disabled',false);
});
}
);
</script>

I have used class as selector but u can use use ID as selector as "#selector". You can also use jquery on child elements of grid-view. Above is just an example.
Here is some info about jquery selectors
http://www.w3schools.com/jquery/jquery_ref_selectors.asp

EDIT: try

   <?php $cs = Yii::app()->getClientScript();
$cs->registerScript('hello', "
$(window).load(function()
{ 
    alert('hello');
}
)");
?>

If this works then copy the whole code in this script.

BenMorel
  • 34,448
  • 50
  • 182
  • 322
Rafay Zia Mir
  • 2,116
  • 6
  • 23
  • 49
  • I am trying, no result at the moment :( – Sergio_HW Feb 10 '14 at 16:43
  • please post your code that u have tried. Post your code in question above – Rafay Zia Mir Feb 10 '14 at 16:45
  • – Sergio_HW Feb 10 '14 at 16:47
  • It doesn't work, the alert doesn't show and the wizard form doesn't work properly :S – Sergio_HW Feb 10 '14 at 17:15
  • now its showing the alert, but i tried to put the rest of the function with no result – Sergio_HW Feb 10 '14 at 17:53
  • Actually you will have to see the classes or Id`s using inspect element. Then use those classes. I have just provided example. Now you have to test it. Please see the link regarding selectors jquery, in my answer. If alert is working then other part would also work but u just need to change according to ur needs. – Rafay Zia Mir Feb 10 '14 at 18:04
  • Ok, this is working, and the button is disabled: $cs->registerScript('hello', " $(window).load(function() { alert('hello'); $('#next').attr('disabled',true); });"); – Sergio_HW Feb 10 '14 at 18:14
  • But this make everything works mad: $button->registerScript('button'," $(document).ready(funtion() { $('#arrendatario').click(function() { $('#next').attr('disabled',false); }); });"); – Sergio_HW Feb 10 '14 at 18:15
  • "$button->registerScript". where does that come from? Have u written it? Whats going mad? – Rafay Zia Mir Feb 10 '14 at 18:20
  • yes i separated the "functions", if i put the second script, the buttons don't work, they are available but don't work, and the progress doesn't appear – Sergio_HW Feb 10 '14 at 18:22
  • $button->registerscript will never work and as it is in javascript so it will abandon other scripts to run and will cause error. thats y everything is going mad – Rafay Zia Mir Feb 10 '14 at 18:25
  • If u want to add another script then write the same code, $cs->registerScript with different name. – Rafay Zia Mir Feb 10 '14 at 18:26
  • i edited the post. that is how i have now, any advise? – Sergio_HW Feb 10 '14 at 18:26
  • i tried together and separated, i leave them separated to see errors, but i don't know if it is good to have like that – Sergio_HW Feb 10 '14 at 18:28
  • Ew. W3schools is a terrible resource. The jQuery's own tutorial is much better. – John Dvorak Feb 10 '14 at 18:36