Hi,

I have just got started on JQuery in the past week, and the main functions I am using are tabs and .load().
I will try to simplify the situation as much as possible in the following explanation.

Basically, I am designing the admin front end of a site for a company. The company has products which appear in a table. There are several tabs of products - namely Ranges, Collections and Designs, where a Range will have multiple Collections and a Range-Collection will have multiple Designs.

To keep it simple I will just use Designs in this example, but thought I should explain this in case I was asked why I have a tabs control when there is only one tab (Designs).

Basically I am using tabs for Ranges, Collections and Designs, but on clicking one of these tabs they load a page into an element there and then - for example clicking Designs will load "/Tables/DesignTable.aspx" into its tab. This page loads one user control for every Design in the database. Each row has multiple buttons - for example "Details", "Remove", "Move Up" and "Move Down". The Details button is no problem, but when I remove a design I cant get it to reload the tab.

Basically I am using the following code for the tabs' click function:

1. $(".DesignTab").click(function() { $(".DesignList").load("/Tables/DesignTable.aspx"); });

Where the design list may appear multiple times in one page, hence I am using classes rather than ids (it only loads one list in a page at the moment, but for all I know it may need to load multiple lists in the future as the website develops). This line just means that all lists in the page reload.

I am using the following code for the remove button. This is added from within a user control, but I have tried adding it in the main page using class "removedesign" for the remove button and applying it in place of the remove id of the code below.

1. Controls.Add(New LiteralControl("<script language='javascript' type='text/javascript'>$(function() {$('#" & remove.UniqueID & "').click(function() { $('#InvisibleContainer').load('/Actions/Bin.aspx?ID=" & _Item.ID & "'); $('.DesignList').load('/Tables/DesignList.aspx'); });});</script>"))
   

Currently it all works, except for reloading the design list on click of the remove button. I know the two lines are the same in the sense that the code I am using to load the design list into the correct places is the same, but I cant figure out whats causing that line not to work in the second instance.

Any help with this would be appreciated. I think everything above should be all you need to look into it.

Regards,

Richard Clarke