buttons: ajax vs stateful vs icons

Issue #22 resolved
created an issue

icons works only for types "submit" and "button"

if the button is stateful no css style or icons are possible

if the button type is an ajax no icons and no stateful possible

so what can I do if in a project I need a button like that (ajaxsubmit+stateful+icon+primary) ?



$this->widget('BootButton', array( 'fn' => 'ajaxSubmit', 'icon' => 'home white', 'type' => 'primary', 'label' => ..., 'loadingText' => ..., 'htmlOptions' => array('id' => ...), )); }}}

Comments (6)

  1. Christophe BOULAIN

    Submit, ajaxButton, and ajaxSubmit will render <input> tags, which is not compatible with icon (no content possible). Therefore, I propose the following modification in BootButton to solve this issue. This hasn't been heavily tested though.

    protected function createButton()
      switch ($this->fn)
        case self::FN_BUTTON:
          return CHtml::htmlButton($this->label, $this->htmlOptions);
        case self::FN_SUBMIT:
          return CHtml::htmlButton($this->label, $this->htmlOptions);
        case self::FN_RESET:
          return CHtml::htmlButton($this->label, $this->htmlOptions);
        case self::FN_SUBMITLINK:
          return CHtml::linkButton($this->label, $this->htmlOptions);
        case self::FN_AJAXLINK:
          return CHtml::ajaxLink($this->label, $this->url, $this->ajaxOptions, $this->htmlOptions);
        case self::FN_AJAXBUTTON:
          return CHtml::htmlButton($this->label, $this->htmlOptions);
        case self::FN_AJAXSUBMIT:
          return CHtml::htmlButton($this->label,$this->htmlOptions);
        case self::FN_LINK:
          return CHtml::link($this->label, $this->url, $this->htmlOptions);

    Changeset : ff839be87ea9 and 9e872bdb1d86

    EDIT: Forgot reset button support.

  2. manuel_84 reporter

    I achieved my goal adding ajaxOptions in the call:

        $this->widget('BootButton', array(
          'fn' => 'ajaxSubmit',
          'icon' => 'home white',
          'type' => 'primary',
          'label' => Yii::t('Prefs', 'Salva posizione'),
          'loadingText' => Yii::t('Prefs', 'Sto salvando...'),
          'htmlOptions' => array('id' => 'saveLatLng'),
          'ajaxOptions' => array(
            'complete' => 'function(jqXHR, textStatus) { onSaveComplete(jqXHR, textStatus); }',
            'error' => 'function() { alert("' . Yii::t('Prefs', 'Errore durante il salvataggio della posizione, riprovare') . '") }'

    in the page I have companion js of this code:

      $('#saveLatLng').click(function() {
        $(this).button('loading'); // call the loading function
    function onSaveComplete(jqXHR, textStatus) {
      if (jqXHR.responseText != 'OK') alert(jqXHR.responseText);

    this could be a great example for users :)

  3. Log in to comment