PradoSoft

Passing Parameters with AJAX Requests using Prado Callbacks

From PRADO Wiki

Contents

[edit]

Introduction

To most Prado newcomers, handling AJAX requests and responses is not that intuitive. (this is based on the authors personal experience and may vary from person to person)

To address this, I've decided to post this informal guide to sending off AJAX requests to the server and acting on the AJAX response sent back to the client.


[edit]

Sending an AJAX Request WITHOUT Parameters

First things first - to send a basic AJAX request I typically edit the markup for a .page:

AJAX_Sample1.page 

 
<html>
   <head>
      <title>AJAX Sample 1</title>
   </head>
   <body>
 
      <h1>This is a page to showcase an ajax request in Prado</h1>
      <a href="javascript:sendAJAXRequest();">Click here to send an AJAX Request to the Server</a>
 
      <com:TCallback ID="MyCallback" OnCallback="callback_MyCallback"> </com:TCallback>   
 
      <script language="Javascript">
      <!--
   
         function sendAJAXRequest()
         {
            var request = <%= $this->MyCallback->ActiveControl->Javascript %>;
            request.dispatch();      
         }
  
      //-->
      </script>
 
      <!-- This javascript console will display the echo'ed text from the
           callback function in the php file below -->
      <com:TJavascriptLogger />
 
   </body>
</html>

AJAX_Sample1.php 

 
<?php
Prado::using('System.Web.UI.ActiveControls.*');
 
class Ajax_Sample1 extends TPage
{
   public function callback_MyCallback($sender,$param)
   {
      echo "MyCallback has been executed";
      //perform an action on the server that doesnt require info from client 
      $this->emailCurrentDateToDavid();
   }
    
   public emailCurrentDateToDavid()
   {
      //code omitted - not relevant to this example
   }
}
 
?>


[edit]

Sending an AJAX Request WITH Parameters

Now I know the above is a bit trivial to most Prado developers - but when it comes to sending useful information from the client side to the server side, things get a bit more involved. (don't worry - it's not too difficult!)

You can send information from the client to the server with:

  1. A Prado ActiveControl, such as a TActiveTextField, a <com:TCallback /> tag and some basic javascript OR
  2. A Prado TCallback implemented with Javascript and a <com:TCallback /> tag (Both examples on this page use this approach)

If anyone knows of any other way please PM me or edit this wiki page directly.


[edit]

Sending an AJAX Request WITH Parameters - But WITHOUT any ActiveControls

This example doesn't do anything useful with the parameters passed from the client side - apart from printing them out on the JavascriptLogger console at the bottom of the page.

AJAX_Sample2.page 

 
<html>
   <head>
      <title>AJAX Sample 2</title>
   </head>
   <body>
 
      <h1>This is a page to showcase an ajax request in Prado</h1>
      <a href="javascript:sendAJAXRequest();">Click here to send an AJAX Request to the Server</a>
 
      <com:TCallback ID="MyCallback" OnCallback="callback_MyCallback"> </com:TCallback>   
 
      <script language="Javascript">
      <!--
   
         function sendAJAXRequest()
         {
            var request = <%= $this->MyCallback->ActiveControl->Javascript %>;
            var param = {'nameofmyparameter' : 'valueofmyparameter'};
            request.setCallbackParameter(param);
            request.dispatch();      
         }
  
      //-->
      </script>
   </body>
</html>

Sidenote: It is worth noting that the Prado.CallbackRequest class is based on the PrototypeJS Ajax.Request class so take a look at PrototypeJS documentation as well as the ajax3.js file inside your ~/Web/Javascripts/source/prado/activecontrols folder if you want to know how each function works in greater detail.


AJAX_Sample2.php 

 
<?php
Prado::using('System.Web.UI.ActiveControls.*');
 
class Ajax_Sample2 extends TPage
{
   public function callback_MyCallback($sender,$param)
   {
      echo "MyCallback has been executed";
      echo "Parameters Passed are:";
      print_r($param->CallbackParameter);
      echo "One of the Parameters Passed has a value of:"
      $theObjectContainingParameters = $param->CallbackParameter;
      echo $theObjectContainingParameters->nameofmyparameter;
 
      //perform an action on the server that uses one of the parameters passed
      $this->emailUselessTextToDavid($theObjectContainingParameters->nameofmyparameter);
   }
    
   public emailUselessTextToDavid($theTextToSendToDavid)
   {
      //code omitted - not relevant to this example
   }
}
 
?>


[edit]

Troubleshooting

Often you will notice the AJAX response from the server (shown in the black JavascriptLogger console) says: 

 
Missing page state:null
 
HTTP 200 with response :

Usually this happens when your callback function (inside your .php file on the server) contains code that causes the function to raise an error. You can comment out different parts of your callback function on the server until the echo commands you have included in your callback function on the server appear on the JavascriptLogger console.


[edit]

Conclusion

That's pretty much it. Having used AJAX and plain old PHP together for a while, Prado's approach can be confusing at first. But with a bit of practise, and some participation on the forum it won't take long before you've mastered AJAX in Prado.

I found the terminology "Callback" and "Postback" very confusing while learning this topic. Now I know what a Callback is, but am still unsure about Postback! A glossary would almost certainly help in this regard.

Author's Note: I have NO idea when it comes to page state issues in Prado so would be interested to find out more about this if anyone would care to enlighten me.

Good luck !

[edit]

Feedback

Thanks to jereonp who pointed me towards the following info on viewstate:

Viewstate + other types of state in PRADO

Thanks also to mikl who suggested I read one of his useful tidbits on the forums:

There's a page whose value grew over time for me here . In combination (with the other page jereonp mentioned) you get a pretty good picture of what's going on. I'll try to explain ViewState as far is i understand it:

Simplified: whenever a form is submitted (aka a postback occurs) and the same page will be displayed again, PRADO collects all form values (handled by TControl) and everything else that was stored in viewstate and adds a hidden field to the form that contains the collected data in an encrypted format.

So when the form is submitted the next time, PRADO can extract all stored information from this hidden field. That way you can create controls like TWizard, where you have some controls on step 1 which get invisible on step 2. Their values must be stored until the wizard finishes and they must also be restored when the user returns to step 1. Or you can save your own temporary values that only are valid as long as the user doesn't leave the page.

Simply remember: the values in viewstate exist as long as the user is on the same page and makes a postback (or callback). It will be lost as soon as you re-enter the same page without.

Retrieved from "http://pradoframework.com/wiki/index.php/Passing_Parameters_with_AJAX_Requests_using_Prado_Callbacks"
Personal tools
Your user name:

Your password:

MediaWiki