Les onglets JQuery ajoutent dynamiquement ajax

Je suis nouveau à JQuery, et j'ai essayé d'implémenter une interface à onglets où les onglets sont ajoutés dynamiquement et leur contenu chargé via Ajax. J'utilise les onglets JQuery-ui. J'ai essayé de résoudre ce problème pendant des jours, et ai été googler tout autour et lu tous les fils appropriés ici dans SO. À l'heure actuelle, l'interface fonctionne si j'ajoute un seul onglet - l'onglet est créé, il est sélectionné, et son contenu chargé via Ajax. Cependant, quand j'ajoute un deuxième onglet, son contenu semble être correctement chargé, mais quand je sélectionne le premier onglet, je vois le contenu du second onglet ajouté au contenu du premier onglet, alors je ne suis plus capable de basculer entre onglets.

Je travaille sur Rails 3. Le code est dans Coffeescript, mais je pense qu'il devrait être facile à lire pour n'importe quel Javascript'er. Voici quelques notes:

  • $('a.edit') is my selector to add the tab. To avoid multiple firings, I first check if the selector has already been bound before biding the adding of the tab with the mouse click
  • the tab close works well
  • the urls and tab name are passed as attributes. The urls point to html forms (via partials in Rails)
  • in the generated html, when I add a tab, two ui-tab-panel's are created with ids "ui-tabs-1" and "ui-tabs-2". The tab has an href that points to the second. Only the first has ".ui-tabs-hide".
    • when I add the second tab, I'll have four ui-tab-panel's, with the tabs pointing to "ui-tabs-2" and "ui-tabs-4", but none of them have ".ui-tabs-hide".

Voici le code

$(->
        if !($('a.edit').is('.bound'))
            $('a.edit').on('click', ->
                addTab($(this).attr('url'), $(this).attr('tag'))  
            )
            $('a.edit').addClass('bound')
        $tabs = $('#tabs').tabs
        #$tabs.tabs
            closable: true
            cache: true
            tabTemplate: '
  • #{label} Remove Tab
  • '
                add: (event, ui) ->
                    $tabs.tabs('select', '#' + ui.panel.id)
    
            addTab = (url, tab_name)->
                $tabs.tabs('add',url,tab_name)
    
            $( "#tabs span.ui-icon-close" ).live(
                "click", ->
                    index = $( "li", $tabs ).index( $( this ).parent() )
                    $tabs.tabs( "remove", index )
    )
    
    0

    1 Réponses

    To fix the problem, I introduced some minor changes. The major one was to add the line $tabs = $('#tabs') so all the references and method calls to tab should refer to the selector itself. I am not sure why, but before I had $tabs = $('#tabs').tabs( ... ). Another change was one needed in the cases where the selector $('a.edit') was added dynamically. Because the selector may not exist when the page is initally loaded, I changed the binding from .on('click,-> ) to .live('click', ->), and changed the flag so a new '.bounded' class is added to #tabs to prevent multiple firing.

    $(-> 
        $tabs = $('#tabs')
    
        if !($tabs.is('.bound')) 
            $('a.edit').live('click', -> 
                addTab($(this).attr('url'), $(this).attr('tag'))   
            ) 
            $tabs.addClass('bound') 
    
        $tabs.tabs 
            closable: true 
            cache: true 
            tabTemplate: '
  • #{label} Remove Tab
  • ' 
            add: (event, ui) -> 
                $tabs.tabs('select', '#' + ui.panel.id) 
    
        addTab = (url, tab_name)-> 
            $tabs.tabs('add',url,tab_name) 
    
        $( "#tabs span.ui-icon-close" ).live( 
            "click", -> 
                index = $( "li", $tabs ).index( $( this ).parent() ) 
                $tabs.tabs( "remove", index ) 
    ) 
    
    0
    ajouté