Need to make jquery add css to a table which is added through ajax

Question

I have a webpage... http://beta.charmscorp.com/inspect/projects.php - this webpage is in beta and doesn't currently look super professional and is only half working, also, the server internet connection is slow so it takes a bit to load up the elements properly.

Anyways, this page calls other pages through ajax to display in a div. My problem comes from wanting to use jquery to apply css to a table on a page which dynamically loads up in a div. If that sounds confusing, go ahead and go to the link I posted above, click the down arrow in the sidebar, and chose a link... Assets for example. you will see this page load up, and anything on this page won't have jquery applied to it.

From looking at solutions, I see I can add a .live() jquery function, but this seems to apply only to events and selectors. Anything i can do?

ps. this is what I've tried to do:

$("#maintable").live(function(){
      $(this).corner();
    });

This works on the main page, as you can see, there are rounded corners for the main table. However every table has the same ID, and yet, they don't have rounded corners...

Answer 1

"every table has the same ID"

IDs are supposed to be unique. jQuery sees the first id and quits. Change those "ids" to classes and you'll be good to go.

Answer 2

You have an ID problem, it seems. There should never be two elements with the same ID. That said, you need to configure your server-side code so that the markup served to the AJAX request gives these tables a class attribute. Something like class="rounded". Then you can use jQuery to apply the style like this...

$("table.rounded").corner();

Note you will have to make this call each time you "reload" the div with fresh markup, which can be done globally using the ajaxComplete function...

$("table.rounded").ajaxComplete(function() {
  $(this).corner();
});