JQuery filele adaugă dinamic ajax

Question

JQuery filele adaugă dinamic ajax

Sunt nou în jQuery și am încercat să pun în aplicare o interfață tabulară în care filele sunt adăugate dinamic și conținutul lor încărcat prin Ajax. Folosesc filele JQuery-ui. Am încercat să rezolv această problemă de zile, și am fost googling peste tot și citiți toate firele relevante aici, în SO. În acest moment, interfața funcționează dacă adaug doar o singură filă - fila este creată, este selectată și conținutul încărcat prin Ajax. Cu toate acestea, atunci când adaug oa doua filă, conținutul său pare a fi încărcat corect, dar când selectez prima filă, văd conținutul celei de-a doua fila, atașat la conținutul primei filuri, atunci nu mai pot comuta între file.

Lucrez la Rails 3. Codul este în Coffeescript, dar cred că ar trebui să fie ușor de citit pentru orice Javascript'er. Iată câteva note:

$('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".

Iată codul

$(->
        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

adăugat 24 mai 2012 la 07:18 autor user1413880 editat 24 mai 2012 la 09:07

Vizualizări: 2

sursa

ru fr es pt de hi bn ar

1 răspunsuri

autor user1413880 · Answer 1 · 2012-05-24T10:21Z

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 ) 
)