Populate form vars on return from ajax call to server

[RavenWebServices]

The title should read: Populate form vars on return from ajax call to server

1) Script Title: DHTML Window Widget

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...htmlwindow.zip

3) Describe problem: I am trying to use the ajaxwindow to retrieve values from a php script and populate various FORM elements.

Here's what I have done. I have a js function

function ajaxWindowCreate(w,h,controller,title) {
   var winl=(window.innerWidth-w)/2;
   var wint=(window.innerHeight-h)/2;
   var controller = "controllers/"+controller;
   ajaxwin=dhtmlwindow.open("ajaxbox", "ajax", controller, title, "width="+w+"px,height="+h+"px,left="+winl+",top="+wint+",resize=0,scrolling=1");
   return false;
}

Then I call it with this:

<input type="button"  name="db_type"  class="inputbox"  value="Check DB Connection" onclick="ajaxWindowCreate(650,500,'validateServerPermissions.cntl.php','Test');"  />

As it stands right now it all works - great script! What I need to do is update various <form> elements and not the ajax window. How do I communicate the return values from the PHP script to update the corresponding <form> elements?

Thanks!

[ddadmin]

So you're opening a DHTML window using the Ajax option that contains "values" you wish to retrieve then transfer to to form elements on your main page (that opened the DHTML window)? How are those values stored in the PHP page being opened?

[RavenWebServices]

I would prefer to not open a window at all and just use an ajax call to the server. But I couldn't find that in the documentation so my though was to generate the window but hide it.

The php script will basically be like this:

<?php
$dbname = 'database_name';
$dbuser = 'datbase_user';
/* and so forth */
?>

So, to recap, I have a form that has a button to call an ajax routine, which in this case is the ajaxWindow code. When the button is pressed I want to make contact with the server side php script and return certain values to the form elements. I have all code working except I need to know how to send value pairs back to the form. Thanks!

[ddadmin]

Hmm if you're using Ajax only for the purpose of fetching data from another page on your server and doing something with it, you shouldn't be using DHTML window script, but rather, just a generic Ajax script. For example, something like this script fetches and displays the contents of the external page in its entirety. In your case, it really depends on how you've set up the external page to only return the data you want, to then be used to populate the form fields on your page. Does that page return those data as JavaScript variables? As regular DHTML wrapped in some DIV? There needs to be some massaging of the data before Ajax is even called on the external page...

[RavenWebServices]

Thank you for that script. However, I know I can retrieve through that type script. I am using the DHTML window for several other processes in my application and I was just trying to not have to use another script (one size fits all). It just seemed like it should/could be possible to use this script. This is the pseudo code for what I want to do if at all possible.

Form is created containing DHTML window element
Call DHTML script (hidden)
DHTML script contacts Server
PHP script is executed
Data output from PHP is returned to form, either directly or via DHTML window

[ddadmin]

It's definitely possible, but you still haven't answered my question- how are the values on the external page that's being loaded in the DHTML window presented, the values that you wish to then transfer into a form on the main page? Perhaps a demo/ link to your problem page would be helpful.

[RavenWebServices]

They aren't. That's the whole point of my question. I am trying to bypass the window and deliver the data to the form. If I present them in the window then it's just text and not value pairs to populate the form. In other words I am trying to use the window object as a transparent conduit (for lack of a better term). I have a form with several text boxes (<input type="text" />). I have a submit button. What I want is to click the button, link to server, process a php script that pulls the data for the corresponding text boxes on the form, and then populate the text boxes with the server data. A very basic ajax type application. I know it can be done in other ways but as I said, it just seems like your widget could/should work. It's very powerful as it stands right now and I am just trying to stretch it

[ddadmin]

Well, talking in general then, the page inside the DHTML window can access the main page via JavaScript. For example, if on your main page you have a form like so:

<form id="test">
<input type="text" id="myfield" />
</form>

Then, on the external page contained inside a DHTML window, you can have the following:

<div id="description">This is some test</div>

<script type="text/javascript">

function populateform(){
parent.document.getElementById("myfield").value=document.getElementById("description").innerHTML
}

</script>

<button onClick="populateform()">Test</button>

When you press "Test" for example, the form field on the main page gets populated with the text "This is some test".

[RavenWebServices]

In your example, I don't see where a call is made to the server to feed the form. Pulling a field off of another field is not the issue. It's getting the response from the server to populate the form filed on the parent form. For example, this works just like it should.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title></title>
      <script type="text/javascript">
//<![CDATA[
         function populateform(){
            parent.document.getElementById("myfield").value='Hello World';
         }
      //]]>
      </script>
   </head>
   <body>
      <form id="test" name="test">
         <input type="text" id="myfield" />
         <br /><br />
         <button onclick="populateform();return false;">Test</button>
      </form>
   </body>
</html>

This is what I want to do. When the button is clicked the populateform() is called which in turn calls the ajaxWindowCreate function (as the client-server transport) which executes the test.cntl.php program which retrieves 1 or more value pairs from the server and passes it back through the ajaxWindowCreate function (as the server-client transport).

Then, the parent.document.getElementById("myfield").value='Hello World'; statement would be like this parent.document.getElementById("myfield").value=RESPONSE_FROM_SERVER

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title></title>
      <script type="text/javascript">
//<![CDATA[
         function populateform(){
           ajaxWindowCreate(1,1,'test.cntl.php','Test');
           parent.document.getElementById("myfield").value=RESPONSE_FROM_SERVER;
         }
      //]]>
      </script>
   </head>
   <body>
      <form id="test" name="test">
         <input type="text" id="myfield" />
         <br /><br />
         <button onclick="populateform();return false;">Test</button>
      </form>
   </body>
</html>

[ddadmin]

I'm actually more confused now than ever, not on what you're trying to do in general, but the details, and why DHTML Window must be invoved. What you're describing sounds again like what I was describing in this post above. The Ajax functionality in DHTML Window script is designed to basically fetch the returned response call to a page or script on the server and display that as the contents of the DHTML window. So if you may have something like:

ajaxwin=dhtmlwindow.open("ajaxbox", "ajax", "response.php", "Ajax Window Title", "width=650px,height=400px,left=300px,top=100px,resize=1,scrolling=1")

whereby response.php can be a page with just raw HTML or a PHP script that selectively returns a chunk of text (ie: 'Hello World'). This text is then shown as the contents of the DHTML window. It's not designed to return that chunk of text for fine manipulation by you, such as instead of dumping it as the contents of the DHTML window, you can tell it to instead add that value to a form field, alert it etc. That's what more generic Ajax scripts do, another one being Basic Ajax Routine (a flawed script that definitely needs redesigning, but shown here as an example of what you'd need).