<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE section PUBLIC "-//OASIS//DTD DocBook XML V4.5//EN" "http://www.oasis-open.org/docbook/xml/4.5/docbookx.dtd" [
<!ENTITY % BOOK_ENTITIES SYSTEM "../../Reference_Guide.ent">
%BOOK_ENTITIES;
]>
<section id="sect-Reference_Guide-Deactivation_of_the_Ajax_Loading_Mask_Layer_">
	<title>Deactivation of the Ajax Loading Mask Layer</title>
    <para xml:id="sect-Reference_Guide-Deactivation_of_the_Ajax_Loading_Mask_Layer_-Purpose">
	<citetitle>
		<emphasis role="bold">Purpose</emphasis>
	</citetitle>
    </para>
		<para>
			The loading mask layer is deployed after an ajax-call. It aims at blocking the GUI to prevent further user actions until the the ajax-request has been completed.
		</para>
		<para>
			However, the mask layer may need to be deactivated in instances where the portal requires user instructions before the previous instructions have been carried out.
		</para>
		<procedure id="proc-Reference_Guide-Purpose-How_to_deactivate_the_ajax_loading_mask">
			<title>How to deactivate the ajax-loading mask</title>
			<step>
				<para>
					Generate a script to make an asynchronous ajax-call. Use the <emphasis>uicomponent.doAsync()</emphasis> method rather than the <emphasis>uicomponent.event()</emphasis> method.
				</para>
				<para>
					For example:
				</para>
				
<programlisting>&#60;a href=&#34;&#60;%=uicomponent.doAsync(action, beanId, params)%&#62;&#34; alt=&#34;&#34;&#62;Asynchronous&#60;/a&#62;
</programlisting>
			</step>
			<step>
				<para>
					The <emphasis>doAsync()</emphasis> method automatically adds the following new parameter to the parameters list: <emphasis>asyncparam = new Parameter(AJAX ASYNC,&#34;true&#34;); (AJAX ASYNC == &#34;ajax async&#34;)</emphasis>
				</para>
				<para>
					This request is asynchronous and the ajax-loading mask will not deployed.
				</para>
				<note>
					<para>
						An asynchronous request can still be made using the <emphasis>uicomponent.event()</emphasis>. When using this method, the asyncparam must be added manually.
					</para>
				</note>
			</step>
		</procedure>
		
		<para>
			The GUI will be blocked to ensure that the user can only request one action at one time and while the request seems to be synchronous, all ajax requests are always asynchronous. For further information, refer to <xref linkend="sect-Reference_Guide-Deactivation_of_the_Ajax_Loading_Mask_Layer_-Synchronous_issue" />.
		</para>
    <para xml:id="sect-Reference_Guide-Deactivation_of_the_Ajax_Loading_Mask_Layer_-Synchronous_issue">
	    <citetitle>
		    <emphasis role="bold">Synchronous issue</emphasis>
	    </citetitle>
    </para>
		<para>
			Most web browsers support ajax requests in two modes: <emphasis>Synchronous</emphasis> and <emphasis>Asynchronous</emphasis>. This mode is specified with a boolean <emphasis>bAsync</emphasis> parameter.
		</para>
		
<programlisting language="javascript">var bAsync = false; // Synchronous
request.open(instance.method, instance.url, bAsync);
</programlisting>
		<para>
			However, to work with browsers that do not support the <emphasis>Synchronous</emphasis> requests, <emphasis>bAsync</emphasis> is always set to true (Ajax request will always be asynchronous).
		</para>
<programlisting language="javascript">// Asynchronous request
request.open(instance.method, instance.url, true);
</programlisting>
</section>