JS Wai-aria和jQuery加载的动态内容

Question

I'm writing an web application which uses twitter bootstrap and aria . I have table with sort option which looks: . My content is dynamically loading into #content div with jQuery.html() function. When I hit F5 everything works fine, but after I load content by jQuery to my div which contains these tables, something goes wrong. Tables loses their search options and pagination bars.. like this: .

There are few functionality which stop working too. How should I load dynamic content into my #content div ?

My current code:

this.getContent = function(page){
    var self = this;
    $('#center-column').removeAttr("class");
    if (page.indexOf('&') > 0)
        $('#center-column').addClass( page.substr(0, page.indexOf('&') ) );
    else $('#center-column').addClass( page );

    $.get( $('body').attr('id')+".php?page="+page+"&mode=ajax",
        function(data){
            self.fetchData( data );
        }, "json");
}

this.fetchData = function(data){
    if (data.redirect_url != null)
        window.location = data.redirect_url;
    $("#content").html( data.html );
}

Is there any method aria has and I should call after I change content of my div dynamicly?

Answer 1

after I load content by jQuery to my div which contains these tables, something goes wrong. Tables loses their search options and pagination bars

Use .wrap to add dynamic content around the existing markup:

$("#content").html(  $(data.html).wrap("#content")  )

Is there any method aria has and I should call after I change content of my div dynamicly?

Use the aria-live attribute to indicate the content is dynamic, and assertive as the value.

$("#content").attr("aria-live", "assertive")

References

• JSON-ARIA
• Using ARIA role=alert or Live Regions to Identify Errors
• Choosing Between Special Case Live Regions
• aria-live (property)
• ARIA Practices: Managing Dynamic Changes