JQuery ট্যাব গতিশীলভাবে AJAX যোগ করুন

আমি jQuery এ নতুন, এবং একটি ট্যাবলেট ইন্টারফেস বাস্তবায়ন করার চেষ্টা করছি যেখানে ট্যাবগুলি গতিশীলভাবে যোগ করা হয় এবং Ajax এর মাধ্যমে লোড করা সামগ্রীগুলি। আমি JQuery-UI টি ট্যাব ব্যবহার করছি। আমি কয়েকদিন ধরে এই সমস্যাটি সমাধান করার চেষ্টা করেছি, এবং প্রায় সব সময় googling হয়েছে এবং এখানে সব প্রাসঙ্গিক থ্রেড পড়া SO ডান এখন, আমি শুধুমাত্র একটি ট্যাব যোগ করা যদি ইন্টারফেস কাজ করে - ট্যাব তৈরি করা হয়, এটি নির্বাচন করা হয়, এবং এটি Ajax মাধ্যমে লোড বিষয়বস্তু। যাইহোক, যখন আমি দ্বিতীয় ট্যাব যুক্ত করি, তখন তার বিষয়বস্তু সঠিকভাবে লোড হয় বলে মনে হয়, কিন্তু যখন আমি প্রথম ট্যাব নির্বাচন করি, তখন প্রথম ট্যাবের বিষয়বস্তুতে সংযুক্ত দ্বিতীয় ট্যাব এর সামগ্রীগুলি দেখতে পাই, তারপর আমি আর সুইচ করতে সক্ষম নই ট্যাব।

আমি Rails 3 এ কাজ করছি। কোডটি Coffeescript- এ রয়েছে, কিন্তু আমি মনে করি এটা কোনও জাভাস্ক্রিপের জন্য পড়তে সহজ হবে। এখানে কিছু নোট আছে:

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

এখানে কোড

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

    1 উত্তর

    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
    যোগ