For more information on ABAP/JavaScript visit: http://code.google.com/p/abapjs/
*This Blog would help you populate a DropDown Box after selecting a value *in another DropDown Box without refreshing the page.
What is AJAX?
AJAX is not a new programming language, but a technique for creating better, faster, and more interactive web applications.
With AJAX, your JavaScript can communicate directly with the server, using theJavaScript XMLHttpRequest object. With this object, your JavaScript can trade data with a web server, without reloading the page.
AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.
The AJAX technique makes Internet applications smaller, faster and more user-friendly.AJAX is a browser technology independent of web server software.
Prerequisites:-
To use Ajax in BSP application you should have a basic understanding of the following:·
- JavaScript·
- BSP
AJAX Uses HTTP Requests:-
In traditional JavaScript coding, if you want to get any information from a database or a file on the server, or send user information to a server, you will have to make an HTML form and GET or POST data to the server. The user will have to click the "Submit" button to send/get the information, wait for the server to respond, then a new page will load with the results.
Because the server returns a new page each time the user submits input, traditional web applications can run slowly and tend to be less user-friendly.
With AJAX, your JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object.
With an HTTP request, a web page can make a request to, and get a response from a web server - without reloading the page. The user will stay on the same page, and he or she will not notice that scripts request pages, or send data to a server in the background.
Browser Support:-
The keystone of AJAX is the XMLHttpRequest object.Different browsers use different methods to create the XMLHttpRequest object.
Internet Explorer uses an ActiveXObject, while other browsers use the built-in JavaScript object called XMLHttpRequest.To create this object, and deal with different browsers, we are going to use a "try and catch" statement.
Now let us create our JavaScript File (ajax_fun.js) containing the Ajax function that creates the XMLHttpRequest object.
Ajax_fun.js
function fnajax( v_id, v_value )
{
var xmlHttp;
try
{
// Firefox, Opera 8.0, Safari</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> xmlHttp=new XMLHttpRequest();</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> }</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt">catch (e)</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> {</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> // Internet Explorer</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> try</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> {</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> }</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> catch (e)</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> {</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> try</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> {</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> }</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> catch (e)</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> {</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> alert("Your browser does not support AJAX!");</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> return false;</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> }</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> }</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> }</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt">xmlHttp.onreadystatechange= function()</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> {</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> if(xmlHttp.readyState==4)</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> {</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> document.getElementById(v_id).innerHTML=xmlHttp.responseText;</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> }</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> }</pre><pre class="MsoNormal" style="background: #fbd4b4; margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> xmlHttp.open("GET","ajax_resp.htm?v_value="v_value,true);
xmlHttp.send(null);
}
Function explained: First create a variable xmlHttp to hold the XMLHttpRequest object.
Then try to create the object with XMLHttp=new XMLHttpRequest(). This is for the Firefox, Opera, and Safari browsers. If that fails, try xmlHttp=new ActiveXObject("Msxml2.XMLHTTP") which is for Internet Explorer 6.0, if that also fails, try xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") which is for Internet Explorer 5.5
If none of the three methods work, the user has a very outdated browser, and he or she will get an alert stating that the browser doesn't support AJAX.
<u>Before sending data to the server, let us understand three important properties </u>of the XMLHttpRequest object.
The onreadystatechange Property
After a request to the server, we need a function that can receive the data that is returned by the server.The onreadystatechange property stores your function that will process the response from a server. This is not a method, the function is stored in the property to be called automatically.
The following code sets the onreadystatechange property and stores an empty function inside it:
| xmlHttp.onreadystatechange=function() { // We are going to write some code here } |
The readyState Property
The readyState property holds the status of the server's response. Each time the readyState changes, the onreadystatechange function will be executed.
Here are the possible values for the readyState property:
| State | Description |
| 0 | The request is not initialized |
| 1 | The request has been set up |
| 2 | The request has been sent |
| 3 | The request is in process |
| 4 | The request is complete |
| xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // Get the data from the server's response } } |
The responseText Property
The data sent back from the server can be retrieved with the responseText property.
In our code, we will set the value of our "time" input field equal to responseText:
| xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.getElementById(v_id).innerHTML=xmlHttp.responseText; } } |
Sending a Request to the Server</p><p>To send off a request to the server, we use the open() method and the send() method.</p><p>The open() method takes three arguments. The first argument defines which method to use when sending the request (GET or POST). The second argument specifies the URL of the server-side script. The third argument specifies that the request should be handled asynchronously. The send() method sends the request off to the server. </p><table border="0" cellspacing="0" cellpadding="0" width="100%" class="MsoNormalTable" style="background: #fafaf6; width: 100%; border-collapse: collapse"><tbody><tr><td style="background: #fbd4b4; border: #d4d4d4 1pt solid; padding: 2.25pt"><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt">xmlHttp.open("GET","ajax_resp.htm?v_value="+v_value,true);</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt">xmlHttp.send(null);</pre></td></tr></tbody></table><p>The HTML page (ajax_resp.htm) sends a request to the server in the background.Also we are passing one value to the page in order to filter out the required data. </p><p>Now we must decide when the AJAX function should be executed. We will let the function run "behind the scenes" when the user selects a value from the first DropDownListbox: </p><table border="0" cellspacing="0" cellpadding="0" width="100%" class="MsoNormalTable" style="background: #fafaf6; width: 100%; border-collapse: collapse"><tbody><tr><td style="background: #fbd4b4; border: #d4d4d4 1pt solid; padding: 2.25pt"><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"><script for="d_systm_no" event=onclick type="text/javascript"></pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> var v_value = document.getElementById("d_systm_no").value;</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> if(v_value == '-Select-'){</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> fnajax('s_client','SLT');</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> }</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> else{</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> fnajax('s_client', v_value);</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> }</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"></script></pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> </pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"><script type="text/javascript" src="ajax_fun.js"> </script> </pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt">//Including .js file which has the Ajax Function.</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> </pre></td></tr></tbody></table> <table border="0" cellspacing="0" cellpadding="0" width="100%" class="MsoNormalTable" style="background: #fafaf6; width: 100%; border-collapse: collapse"><tbody><tr><td style="background: #fbd4b4; border: #d4d4d4 1pt solid; padding: 2.25pt"><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt">//First DropDown</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> <htmlb:dropdownListBox id = "d_systm_no"</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> table = "<%= i_syst_mast %>"</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> nameOfKeyColumn = "system_no"</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> nameOfValueColumn = "system_no"</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> selection = "<%= gl_system_no %>"</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> width = "150" ></pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> <htmlb:listBoxItem value = "-Select-" key = "-Select-" /></pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> </htmlb:dropdownListBox></pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> </pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> </pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> </pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt">//Second DropDown</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> <span id="s_client"></pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> <htmlb:dropdownListBox id = "d_client"</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> table = "<%= application->i_client %>"</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> nameOfKeyColumn = "client"</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> selection = "<%= gl_client %>"</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> nameOfValueColumn = "client"</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> width = "150" ></pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> <htmlb:listBoxItem value = "-Select-" key = "-Select-" /></pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> </htmlb:dropdownListBox></pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> </span></pre></td></tr></tbody></table><p>You can see that we are passing the ID “s_client” and the value selected in the first DropDown to the Ajax function. </p><p>The responseText received (document.getElementById(v_id).innerHTML=xmlHttp.responseText;) from the server replaces the innerHTML code in <span id=”s_client”> and a new DropDown is formed with the required data.</p><p> </p><p>Now the final page (ajax_resp.htm) which actually sends the request to the server. </p><table border="0" cellspacing="0" cellpadding="0" width="100%" class="MsoNormalTable" style="background: #fafaf6; width: 100%; border-collapse: collapse"><tbody><tr><td style="background: #fbd4b4; border: #d4d4d4 1pt solid; padding: 2.25pt"><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"><%</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> Data: v_syst_no TYPE STRING,</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> v_opt_data TYPE STRING.</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> </pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> v_syst_no = request->get_form_field( 'v_value' ).</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> </pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> SELECT DISTINCT client FROM Z_Table_Name</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> INTO TABLE i_client</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> WHERE system_no LIKE v_syst_no.</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> </pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> </pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> application->i_client = i_client.</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> </pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt">%></pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> </pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"><select name="d_client" id="d_client" style="width:150" class="sapDdlWhl"></pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> <option value="-Select-">-Select-</option></pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> <%</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> CLEAR v_opt_data.</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> </pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> LOOP AT i_client INTO w_client.</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> </pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> CONCATENATE v_opt_data '<option value="' w_client-client '">' </pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> w_client-client '</option>' </pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> INTO v_opt_data.</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> </pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> ENDLOOP.</pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> </pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> %></pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> </pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"> <%=v_opt_data. %></pre><pre class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt"></select></pre></td></tr></tbody></table><p>Here the selected value(v_value) from first DropDown passed to this page is firstly fetched and then the internal table (i_client) is populated so we get all the clients of the particular system we selected in the first DropDown.</p><p>Then we are recreating the dropdown box which includes the data retrived from a Z* table. </p><p> </p><p>You can observe that the whole code is written in the Layout of the pages(first.htm and ajax_resp.htm) and we need not use the server events at all. Hence the pages would never get refreshed/ recreated on the server. </p><p style="margin: 0in 0in 0pt; line-height: normal; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" class="MsoNormal">Output:-
Before calling the ajax function.
After function is called.
!https://weblogs.sdn.sap.com/weblogs/images/251903138/after.jpg|height=209|alt=after|width=447|src=ht...!</body>
4 Comments
