Using jQuery to force div to reload

Using jQuery to force div to reload

Good day all,


Currently, I am working on a project where you arrive on a page that has a list of Annual Reports.  The user has an option to add to this list.  If they click the Add Annual Report(s) button, a modal window will appear.  Within it, you pick a status of the Annual Report (only two statuses: Projected and Actual).

1.) Projected: picking this status causes another div to be set to show(), which contains a date picker for a Start Date, and a dropdownlist for End Year.

2.) Actual: picking this status causes another div to be set to show(), which contains a date picker for an Actual Date.

Once the date is picked (and End Year if Projected), the user can click the Add button.  This will force an ajax call back to the server, which creates a list of the details of the new Annual Report(s), which is then sent off to Session.  The server sends back a success/fail message.  If successful, close the window and refresh a div on the original page that lists out the Annual Reports so that it now shows the new Annual Reports.  Failure just outputs the error message and keeps the window open.

My issue at the moment is the following: when refreshing the div, the browser seems to only go get a cached version of the div.  The div contains a Partial View, which is to be rebuilt by ajax call when the div is refreshing.  If it is the first time through (as in no previous calls or the site has been reset), this works perfectly and displays correctly.  However, if you wish to add more data, the div never updates properly.  Same if you try to delete data (newly added Annual Reports can be deleted one at a time).

If you turn on IE Developer Tools and watch it, the div does act correctly at this point.  It no longer uses the cached version and forcibly updates.  However, that is only if you use the IE Developer Tools.

I have tried a multitude of ideas on how to update that div.  Originally, I was running an ajax call and filling the div's .html property with the results.  This works the first time through, but afterwards, the caching issue breaks it.  Another idea I had was add an outer div and then remove the inner div (original) when needing to update.  This theoretically should have killed the cache, however, it did not.  I ran into the same issue.  Another attempt I had was use the .load property of the div, but I had the same results.

At this point, I'm kind of out of ideas on how to forcibly reload the div.  I could go about building the div by hand but that is kind of annoying to say the least.  Another thought I had was to maybe use the outer div idea again and then rename the inner div each time.  Not likely that would help, but it's a though.

Any ideas would be appreciative.  Thanks.