Generates a push button that can submit the current form in POST method.

Syntax

public static string ajaxSubmitButton(string $label, mixed $url, array $ajaxOptions=array ( ), array $htmlOptions=array ( ))

Example

echo CHtml::ajaxSubmitButton(
    'Submit',
    'your-url',
    array(
       'type'=>'POST',
       'dataType'=>'json',
       'success'=>'js:function(data){
           if(data.result==="success"){
              // do something on success, like redirect
           }else{
             $("#some-container").html(data.msg);
           }
       }',
    )
);
Output:
<input type="submit" name="yt0" value="Submit" id="yt0" />


<script type="text/javascript">
jQuery('body').on('click', '#yt0', function () {
    jQuery.ajax({
        'type': 'POST',
        'dataType': 'json',
        'success': function (data) {
            if (data.result === &quot;success&quot;) {
                // do something on success, like redirect
            } else {
                $(&quot;#some-container&quot;).html(data.msg);
            }
        },
        'url': 'your-url',
        'cache': false,
        'data': jQuery(this).parents(&quot;form&quot;).serialize()
    });
    return false;
});
});
</script>

Return values

string, the generated button tag

Examples

  • Example #1 : Yii client-side form validation before ajax submition

    /*
    1) Register the snippet into the HEAD. Be sure that it is linked after jquery.yii.js is linked.
     
    2) Configure your CActiveForm instance like this:
    */
     
    $this->beginWidget('CActiveForm', array(
        ...
        'enableClientValidation'=>true,
        'clientOptions'=>array(
            'validateOnSubmit'=>true,
            'afterValidate'=>'js:$.yii.fix.ajaxSubmit.afterValidate'
        )
        ...
    );
    /*
    3) Configure your CHtml::ajaxSubmitButton instance like this:
    */
     
    echo CHtml::ajaxSubmitButton('Whateverlabel', 'whateverurl', array(
        ...
        'beforeSend'=>'js:$.yii.fix.ajaxSubmit.beforeSend("#YOUR_FORM_ID")'
        ...
    );
    Output:
    ;$.yii.fix = {
        ajaxSubmit : {  
            beforeSend : function(form) {
                return function(xhr,opt) {
                    form = $(form);
                    $._data(form[0], "events").submit[0].handler();
                    var he = form.data('hasError');
                    form.removeData('hasError');
                    return he===false;
                }
            },
     
            afterValidate : function(form, data, hasError) {
                $(form).data('hasError', hasError);
                return true;
            }
        }
    };

    A time ago i've met the issue that Yii doesn't run any client-side form validation when submitting the form by CHtml::ajaxSubmitButton. The small javascript below helps to fix it.

  • Example #2 : An other examples for ajax button

    echo CHtml::ajaxSubmitButton('Submit',
        CHtml::normalizeUrl(array('updateItem')),
        array(
                'data'=>'js:jQuery(this).parents("form").serialize()',      
                        'success'=>'function(data){
                            alert("Successfull : "+data);
                        }'
        ),
        array(
                        'id'=>'ajax'.time().'SubmitBtn',
                        'name'=>'ajax'.time().'SubmitBtn',
                        'class'=>'btn btn-default',
        ));
    Output:
    
    
    <input id="ajax1380295188SubmitBtn" name="ajax1380295188SubmitBtn" class="btn btn-default" type="submit" value="Submit" />
    
    <script type="text/javascript">
    jQuery('body').on('click', '#ajax1380295188SubmitBtn', function () {
        jQuery.ajax({
            'data': jQuery(this).parents("form").serialize(),
            'success': function (data) {
                alert("Successfull : " + data);
            },
            'type': 'POST',
            'url': '/site/updateItem',
            'cache': false
        });
        return false;
    });
    });
    </script>

References

  • http://www.yiiframework.com/doc/api/1.1/CHtml#ajaxSubmitButton-detail
  • http://www.yiiframework.com/forum/index.php/topic/29302-ajaxsubmitbutton/
  • http://www.yiiframework.com/wiki/466/a-simple-way-to-get-yii-client-side-form-validation-run-when-submitting-by-ajax/