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

    1 răspunsuri

    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
    adăugat
    JavaScript, România - Moldova
    JavaScript, România - Moldova
    328 participanți

    Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com