YiiBooster Onglets de contenu du widget de mise à jour avec l'appel ajax

Je suis en utilisant Yii Booster Yii extension pour l'INTERFACE utilisateur. J'ai besoin de mettre à jour le contenu des onglets à l'aide d'ajax. À l'aide de code ci-dessous je suis en mesure d'obtenir le contenu à l'aide de renderPartial mais au lieu de cela, je veux faire appel ajax et de mettre à jour le contenu.

$this->widget('bootstrap.widgets.TbTabs', array(
        'type' => 'tabs',
        'tabs' => array(
                array('label' => 'Home', 'content' => $this->renderPartial('home', NULL, true), 'active' => true),
                array('label' => 'Test', 'items' => array(
                        array('label' => 'Sub Tab 1', 'content' => $this->renderPartial('testpage', NULL, true)),
                        array('label' => 'Sub Tab 2', 'content' => 'some content ')
                )),
        )
    )
);

Ai-je besoin pour utiliser jquery ou quelque chose d'autre pour travailler avec Yii Booster les widgets ?. C'est la première fois que je suis en utilisant php/yii/extensions.

Je suis un peu confus donc Yii Booster a intégré Bootstrap widgets de sorte qu'ils peuvent être utilisés avec php. Mais pour le côté client, ai-je besoin pour utiliser jquery pour manipuler bootstrap widgets ?

Existe-il des tutoriels pour l'utilisation de Yii Booster, je sais que le lien vers yii booster site, mais il nous suffit que de simples exemples rien liées à des événements, ajax.

  • Il n'est pas facile. Vous avez besoin d'obtenir dans un complexe de la méthode: 1er, ajouter un gestionnaire sur l'événement à afficher pour le contenu de l'onglet, lorsque l'utilisateur clique sur un onglet, vous devez charger via une requête ajax testpage
  • tous les liens pour le faire ? J'ai besoin d'obtenir certains commencent.
  • Savez-vous comment charger du texte par l'ajax méthodes?
  • Oui, je sais, mais je n'ai pas travaillé avec des widgets/jquery avant. De toute façon j'ai eu ce lien bootstrap-2-onglets-jquery-chargement de contenu. Je vais essayer cela.
  • Je pense que ce sera le travail, bonne chance!
InformationsquelleAutor Mr Spark | 2012-11-18
  1. 1

    Obtenu ce travail. Comme @Sergey dit j'ai besoin d'utiliser 'montré' événement. J'ai donné des identifiants pour chaque onglet pour identifier onglet spécifique et charger le contenu. Voici le code

    <?php $this->widget('bootstrap.widgets.TbTabs', array(
        'id' => 'mytabs',
        'type' => 'tabs',
        'tabs' => array(
                array('id' => 'tab1', 'label' => 'Tab 1', 'content' => $this->renderPartial('tab1', null, true), 'active' => true),
                array('id' => 'tab2', 'label' => 'Tab 2', 'content' => 'loading ....'),
                array('id' => 'tab3', 'label' => 'Tab 3', 'content' => 'loading ....'),
        ),
        'events'=>array('shown'=>'js:loadContent')
    )
);?>

    Nous avons 3 onglets, le contenu sera chargé à l'aide de loadContent fonction javascript.

    <script type="text/javascript">

function loadContent(e){

    var tabId = e.target.getAttribute("href");

    var ctUrl = ''; 

    if(tabId == '#tab1') {
        ctUrl = 'url to get tab 1 content';
    } else if(tabId == '#tab2') {
        ctUrl = 'url to get tab 2 content';
    } else if(tabId == '#tab3') {
        ctUrl = 'url to get tab 3 content';
    }

    if(ctUrl != '') {
        $.ajax({
            url      : ctUrl,
            type     : 'POST',
            dataType : 'html',
            cache    : false,
            success  : function(html)
            {
                jQuery(tabId).html(html);
            },
            error:function(){
                    alert('Request failed');
            }
        });
    }

    preventDefault();
    return false;
}

    Ici nous obtenons la cible, qui doit être le point d'ancrage de l'élément de l'onglet que nous avons cliqué, obtenir href valeur qui doit être l'id que nous avons configuré. Décider de l'url en fonction de cet identifiant, charger le contenu et mise à jour de la div à l'. L'id de la div sont pas les mêmes qu'href.

    Je n'ai pas trouvé de moyen de charger le contenu de l'initiale de l'onglet actif, il devrait y avoir moyen de le feu loadContent fonction, pour l'instant j'ai utilisé renderPartial pour obtenir le contenu, au lieu

    InformationsquelleAutor Mr Spark
  2. 1

    J'ai étendu la TbTabs classe avec @Abdullahs exemple. Il est testé avec YiiBooster, mais devrait fonctionner avec d'autres Bootstrap plugins ainsi.

    Utilisation:

    $this->widget(
    'ext.ajaxTabs.widgets.ajaxTabs',
    array(
         'reload' => true, //Reload the tab content each time a tab is clicked. Delete this line to load it only once.
         'tabs' => array(
             array(
                 'label' => 'Static',
                 'content' => 'Static content'
             ),
             array(
                 'label' => 'Static rendered',
                 'content' => $this->renderPartial('index', null, true),
             ),
             //And finally AJAX:
             array(
                 'label' => 'AJAX',
                 'content' => 'loading ....',
                 'linkOptions' => array('data-tab-url' => Yii::app()->createAbsoluteUrl('site/'))
             )
         ),
    )
);

    /protected/extensions/ajaxTabs/widget/ajaxTabs.php:

    <?php

Yii::import('bootstrap.widgets.TbTabs');

class ajaxTabs extends TbTabs
{
    /**
     * @var bool Reload the tab content each time the tab is clicked. Default: load only once
     */
    public $reload = false;

    public function run()
    {
        $id = $this->id;

        /** @var CClientScript $cs */
        $cs = Yii::app()->getClientScript();
        $cs->registerScript(
            __CLASS__ . '#' . $id . '_ajax', '
                function TbTabsAjax(e) {

                    e.preventDefault();

                    var $eTarget = $(e.target);
                    var $tab = $($eTarget.attr("href"));
                    var ctUrl = $eTarget.data("tab-url");

                    if (ctUrl != "" && ctUrl !== undefined) {
                        $.ajax({
                            url: ctUrl,
                            type: "POST",
                            dataType: "html",
                            cache: false,
                            success: function (html) {
                                $tab.html(html);
                            },
                            error: function () {
                                alert("Request failed");
                            }
                        });
                    }
                    if(' . ($this->reload ? 0 : 1) . '){
                        $eTarget.data("tab-url", "");
                    }
                    return false;
                }'
        );
        $this->events['shown'] = 'js:TbTabsAjax';

        parent::run();
    }

}
    InformationsquelleAutor Fabian H.
  3. 0

    Sa une nouvelle version de loadContent

    function loadContent(e){
var targetUrl = e.target.getAttribute('data-tab-url');
var contentID = e.target.getAttribute('href');
$(contentID).load(targetUrl, function(){
    $('.tabs').tabs(); //reinitialize tabs
});
e.preventDefault();
return false;}
    InformationsquelleAutor touzas