[commits] [Wiki] changed: Doc/Dev/HordeAjaxApplications/Example

[Ralf Lang (B1 Systems GmbH)]

rlang  Wed, 23 May 2018 06:24:59 +0000

Modified page: https://wiki.horde.org/Doc/Dev/HordeAjaxApplications/Example
New Revision:  5
Change log:  Marc Unger's new howto

@@ -1,4 +1,97 @@
+++ Ajax Example using the skeleton App:
+
+This example uses the skeleton app to create an ajax function  
"helloAjax". This function takes a string as argument and returns a  
new string saying "Hello $string".
+
+1. Create the Ajax Handler Class:
+- Create the Application folder:
+# cd skeleton/lib/Ajax
+# mkdir Application
+
+- Create a new file named "Handler.php" inside the  
skeleton/lib/Ajax/Application folder.
+The Handler.php will contain the Skeleton_Ajax_Application_Handler Class.
+Add the following content to this file:
+------
+<code>
+<?php
+
+class Skeleton_Ajax_Application_Handler extends  
Horde_Core_Ajax_Application_Handler {
+
+    public function helloAjax() {
+        $data = $this->vars->name;
+        $answer = 'Hello ' . $data;
+        return $answer;
+    }
+}
+------
+</code>
+The argument of the helloAjax function is called "name".
+To access the arguments you have to call "$this->vars->NAME_OF_THE_ARGUMENT".
+In this example we store the value of "name" in a variable $data:
+$data = $this->vars->name;
+Then we create a new string saying "Hello $data" and return this new string.
+
+2. Load the Skeleton_Ajax_Application_Handler Class:
+Open the skeleton/lib/Ajax/Application.php file and add the following  
line to the _init() function:
+------
+$this->addHandler('Skeleton_Ajax_Application_Handler');
+------
+
+
+3. Call the helloAjax function via javascript:
+- Create the skeleton/js folder:
+# cd skeleton
+# mkdir js
+
+- Create the skeleton/js/skeleton.js file with the following content:
+------
+SkeletonCore = {
+
+    onDomLoad: function()
+    {
+        var myName = 'Foobar';
+        HordeCore.doAction('helloAjax', {name:  
Object.toJSON(myName)}, {callback: function(result) {
+            console.log('Ajax answer: ' + result);
+        }});
+    }
+
+}
+document.observe('dom:loaded', SkeletonCore.onDomLoad.bind(SkeletonCore));
+------
+
+The "myName" variable holds the string we want to send to the  
helloAjax funtion.
+The helloAjax function is called by "HordeCore.doAction".
+HordeCore.doAction takes three arguments:
+1). Name of the Ajax function:
+the helloAjax function we created in step 1.
+
+2). Argument list (in json format) of the Ajax function:
+the "name" argument we accessed in step 1 via "$this->vars->name".
+
+3). A callback function to access the returned data of the Ajax function:
+the "result" variable holds the "Hello $data" string we returned in step 1.
+
+Inside the callback we print the content of the "result" variable  
(Hello foobar) to the browser console.
+
+
+4. Load the skeleton.js file.
+Open the skeleton/list.php file and add the following line after  
"$page_output->addScriptFile('tables.js', 'horde');":
+------
+<code>
+$page_output->addScriptFile('skeleton.js');
+</code>
+------
+
+5. Test if everything works:
+Access the skeleton app in your browser and open the console. If  
everything worked you'll see the following message: Ajax answer: Hello  
Foobar
+
+
+
+++ Pre git split
+
+*This below is outdated information. Use the horde git-tool command  
to create a new module*
+
+
  Boneyard - an example of a dynamic "skeleton".

  In this article, I will show you some minimal setup for a "horde5  
dynamic view" application as demonstrated by hermes time tracking and  
kronolith calendar