ansaurus

Question

UpdatePanel - Any ideas on how to avoid a flicker in UI? - ASP.NET/Jquery

Answer 1

+1 A:

you can use DIVs or don't use update panel in your UI generation use any concept else

GOM3A 2009-04-08 23:55:34

Answer 2

+1 A:

The problem is likely to be that your code is running on load. I'm assuming that you're doing this using the standard jQuery method of running code on load, and not using the window's onload event. In any case, even using jQuerys $(document).ready(...) will be too slow if you have a lot of other javascript files to load, as the .ready event isn't fired on the document until all javascript includes have loaded.

You should be able to work around the issue by including your code that modifies the table just after the html for the table in your page and not running it on load i.e. make sure you don't wrap it in $(document).ready(...);

For this approach to work, you will need to have all javascript required by the code which is modifying the table included earlier in the page.

If you have other non-essential javascript files included, you should try to include them later in the page.

I'm not 100% sure how being inside an update panel will affect it - you will need to make sure that your code is being re-triggered when the updatepanel updates, but I believe this should all happen automatically.

Bennor McCarthy 2009-04-08 23:56:09

UpdatePanels do tend to add a lot of bloat to the page, and are not particularly fast. It's best to avoid using them if you can.

Bennor McCarthy 2009-04-08 23:57:52

@Bennor - The sequence of events is 1) the static html loads 2) the jquery runs that updates html based on mode. So, the user sees 1 and 2. I want the user to see only 2.

DotnetDude 2009-04-09 01:22:48

If you put code to hide your static html directly after the static html in the page (and not inside a document ready handler) then it will not be rendered. You can then set it up with your other code, and then show it when it's all set up.If it's taking a while, you can display a loading image instead while the table is hidden.

Bennor McCarthy 2009-04-21 04:54:31

Answer 3

A:

Presumably your UI is controlled by CSS? You might be able to get rid of the flickering by adding something like this at the start of your JavaScript or in the <head> of your HTML:

if (previewMode) {
    document.documentElement.className = 'preview';
}

Then if you modify your CSS rules that apply to your preview mode to reflect the HTML element having the class="preview" to something like:

.preview table .defaultMode {
    display:none;
}

hopefully your table should render correctly first time and will not need to be re-drawn.

Ian Oxley 2009-05-11 13:12:22

ansaurus

tags:

views:

answers:

UpdatePanel - Any ideas on how to avoid a flicker in UI? - ASP.NET/Jquery

related questions