Disabling interstitial graphics when using cfdiv binding

Question

Is there a way for the "Loading ..." graphic to appear when updating cfdiv? I would like to prevent the flickering of the loading of the graphic, and then load the new html.

Answer 1

Adding these lines to the bottom of the header, it overwrites the html "Loading ..." and seems to prevent the flickering effect in both IE and FireFox:

<script language="JavaScript"> _cf_loadingtexthtml=""; </script> 

Although this seems to do the trick, it would be nice if there was an officially supported way to customize the loading animation on a page or based on control. I hope they add support for this in ColdFusion9.

Answer 2

I don't think there is currently a way to do this programmatically in the cfdiv tag. If you really want to get rid of the “Loading ...” message and image, there are several places that you can see.

You can rename or delete the image located at: CFIDE \ scripts \ ajax \ resources \ cf \ images \ loading.gif

This only eliminates the animation. The text "Loading ..." can be omitted in an empty line and defined in: CFIDE \ scripts \ ajax \ messages \ cfmessage.js

Making these changes will obviously affect tags other than cfdiv , but if you want to eliminate this behavior in one place, I am sure you will not mind killing him everywhere. :)

I would like to see a cleaner way to do this if anyone has any ideas.

Answer 3

This is far from a comprehensive or elegant solution, but I found that using negative margins on neighboring elements can "cover" the animation. I do not know if this method works in all cases, but for my specific case it worked. The animation appeared next to the associated text box, to the right of which was a submit button. The layer has been moved to the right. I used negative margin on the submit button, and it covered the animation without affecting the alignment of the layer.

Another measure I took was to check the layer structure and add the following code to my CSS:

 #TitleNameloadingicon {visibility:hidden;} #TitleName_cf_button {visibility:hidden;} #TitleNameautosuggest {background-color:#ffffff;} 

Answer 4

You can create functions to modify the message before calling the ajax load, which can set the message and image to a new value.

 function loadingOrder(){ _cf_loadingtexthtml="Loading Order Form <image src='/CFIDE/scripts/ajax/resources/cf/images/loading.gif'>"; } function loadingNavigation(){ _cf_loadingtexthtml="Loading Menu <image src='/CFIDE/scripts/ajax/resources/cf/images/loading_nav.gif'>"; } 

(in the end, they will be translated into one function, which will take both the text_value parameter and the image_path parameter)

In some of my processes that load both the main and left nav cfdiv, I use this function:

 function locateCreateOrder(){ loadingOrder(); ColdFusion.navigate('/functional_areas/orders/orders_actions/cf9_act_orders_index.cfm','main_content'); loadingNavigation(); ColdFusion.navigate('/functional_areas/products/products_actions/cf9_products_menu.cfm','left_menu'); }