OK, I understand things a bit better now and got it to work. My
problem was that my editor renamed my default layout to
default.ctp.php causing the links to prototype & scriptaculous to not
register ( echo $javascript->link('prototype'); echo $javascript-
>link('scriptaculous'); ) to not register.Now that I have something working, I thought I would lay out the steps I took in case someone comes across this while looking for help: So, to get a basic ajax example working with cakephp: 1) Download prototype from http://prototypejs.org/download. You should end up with a javascript file like "prototype-1.6.0.3.js". Rename to "prototype.js" and place in your "app\webroot\js" folder. 2) Download the script.aculo.us zip file from http://script.aculo.us/downloads. You should end up with a zip file (for example: "scriptaculous- js-1.8.1.zip"). Within is a "src" folder containing a bunch of *.js files. Copy all these files and place them into your "app\webroot\js" folder. 3) We now need to add the javascript and ajax helpers. One option is to add them to each controller as needed, but it's easier to add them to the app_controller to make them available to all controllers automatically. Find "app_controller.php" in "\cake\libs\controller" & copy it to your "\app" folder. Add one line to make the AppController class definition look like this: class AppController extends Controller { var $helpers = array('Html','Form','Javascript','Ajax'); } 4) Every html page that uses javascript has to have something like this in the head: <script type="text/javascript" src="/js/ protoype.js"></script> to indicate where the javascript functions are located. In CakePHP the javascript helper can generate this line like this $javascript->link('prototype'); So copy the default layout from \cake\libs\view\layouts to \app\views\layouts and add these lines in the head: <?php echo $javascript->link('prototype'); echo $javascript->link('scriptaculous'); ?> Now all views that use the default layout are "javascript enabled". 5) Now that we have set things up, let's add a very simple example: an ajax link that when clicked updates the text in a div: create a new folder called "tests" inside \app\views\ and place the following code in a file called simple_ajax1.ctp inside it: ==================== <h2>simple_ajax1</h2> <?php echo $ajax->link('link1', array('controller'=>'tests' , 'action'=>'simple_ajax1_fcn'), array('update' => 'divout') ); ?> <div id="divout"> </div> ==================== 6) Create a controller called tests_controller.php: ==================== <?php class TestsController extends AppController { var $name = 'Tests'; // we're not going to use a model for this example, but // it would be easy to use a database thanks to cake var $uses = array(); function simple_ajax1() { } // ajax call function simple_ajax1_fcn() { $this->autoRender = false; echo "text from ajax call"; } } ?> ==================== 7) Now navigate to http://127.0.0.1/[cakephpapp]/tests/simple_ajax1 where [cakephpapp] is your app folder name, click the link, and you should see the "text from ajax call" text appear in the div below the link. Comments: 1) Troubleshooting: to make sure the ajax call is happening, add some parameters to the ajax link as follows: echo $ajax->link('link1', array('controller'=>'tests' , 'action'=>'simple_ajax1_fcn'), array('update' => 'divout', 'complete' => 'alert( "Executed OK" )', 'loading'=> 'alert("Loading")', 'loaded'=> 'alert("Loaded")') ); You'll then get an alert popup window when (from cake api): * loading:: Called when the remote document is being loaded with data by the browser. * loaded:: Called when the browser has finished loading the remote document. * complete:: Called when the XMLHttpRequest is complete. If no popup windows appear when the link is clicked, there is likely a problem with the javascript setup. 2) What helped me understand things a bit better was getting a better comprehension of the relationship between a cake view & controller. Basically, when you type a cake link such as http://127.0.0.1/[cakephpaapp]/tests/simple_ajax1, the function simple_ajax1 within the tests controller is executed. At the end of the function an IMPLICIT call is made to then render the view. If spelled out it would look like this: $this- >render('simple_ajax1','default'); ('default' is the layout). We can prevent this rendering from happening by placing the line $this- >autoRender = false; in the controller function as I have done above. Also, note that the render function is simply generating text and returning it to the browser via http. Any text output with "echo" in the controller function will also be sent back to the browser when it browses to the function. To illustrate this, add this function to the TestsController: ==================== function simple_text() { $this->autoRender = false; echo "aaaaaaa<br/>"; echo "bbbbbbb<br/>"; echo "ccccccc<br/>"; } ==================== Now navigate to http://127.0.0.1/[cakephpapp]/tests/simple_text You should see the text in the browser. aaaaaaa bbbbbbb ccccccc And because we set autoRender to false, the controller doesn't even go looking for simple_text.ctp . For the ajax function, it's the same thing except that the text (whether generated with echo or with a ctp template) is injected into the div we set up in the ajax link as the update parameter (array('update' => 'divout')). Anyway, this is probably very basic stuff for most CakePHP developers, but I just wanted to get it out there in case it can help someone struggling with the ajax docs as I was. On Sep 30, 10:33 am, qwanta <[EMAIL PROTECTED]> wrote: > Thanks for the reply. > > I placed an fwrite statement in ajaxfcn1() and it is writing to file. > So I'm getting as far as triggering ajaxfcn1 now. But the div isn't > updating. > I guess what I am having trouble understanding is how CakePHP > generates a response to the asynchronous call. With the standard > javascript XMLhttprequest object, the server-side php usually > generates an xml response containing the desired data to be is sent > back to the client. > > eg. something like this: > =============== > <?php > $data = "this is a test"; > > // we'll generate XML output > header('Content-Type: text/xml'); > // generate XML header > echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>'; > // create the <response> element > echo '<response>'; > // > echo $data; > // close the <response> element > echo '</response>'; > ?> > ================= > > then you can use $data on the client side javascript, for example > placing it in a <div> element. > > I understand that this is abstracted out in CakePHP, but I am having a > hard time understanding the process conceptually. In CakePHP how is > this xml data generated? (how do I place data in the response to be > passed back to the client)? And how do I update divs with it? (without > having access to js functions like > document.getElementById("divout").innerHTML). thanks > > On Sep 30, 9:07 am, Donkeybob <[EMAIL PROTECTED]> wrote: > > > it looks like your syntax is wrong for the ajax link . . .no > > parenthesis around '$ajax->link' code either . . .check > > outhttp://book.cakephp.org/view/212/Methodsforproper syntax. > > > from the manual related to your code > > <?php echo $ajax->link('View Post', > > array( 'controller' => 'tests', 'action' => 'ajaxfcn1', 1 ), > > array( 'update' => 'divout', 'complete' => 'alert( "Executed > > OK" )' ) > > ); > > ?> > > > in your controller function: > > > echo "Controller Executed"; > > > as long as protoptype is linked up, then that should work. > > > On Sep 29, 11:56 pm, qwanta <[EMAIL PROTECTED]> wrote: > > > > Hi, > > > I have been struggling a bit to get a simple Ajax link working. I have > > > searched this group for help in older posts, but it seems like a key > > > tutorial (the grahambird one) is no longer available - perhaps because > > > it no longer works with 1.2. > > > > If there is a tutorial somewhere that covers this, please let me know. > > > I think I have gone over all the available (through google) CakePHP > > > ajax tutorials, but unfortunately without success - some are outdated > > > (pre 1.2), others do not have full working code etc... > > > > In any case, here is my code: > > > ======================================== > > > index.ctp > > > <h2>Ajax 3 - testing ajax link and button</h2> > > > <?php > > > $link_array1 = array('controller'=>'tests' , > > > > > > 'action'=>'ajaxfcn1'); // the function to execute: function > > > ajaxfcn1 in controller tests > > > > $link_array2 = array( 'update' => 'divout', > > > > > > 'complete' => 'alert( "Executed OK" )' ); // the div we want > > > to update > > > > echo ($ajax->link('this an ajax link', $link_array1, > > > $link_array2,'Confirmation String')); > > > > echo "<br/><br/>"; > > > > echo ($ajax->submit('this is an ajax button', $link_array1, > > > $link_array2,'Confirmation String')); > > > ?> > > > <br/> > > > <div id="divout"> > > > the div to update > > > </div> > > > ======================================== > > > tests_controller.php > > > <?php > > > class TestsController extends AppController { > > > > var $name = 'Tests'; > > > var $uses = array(); // prevent cake from looking for > > > a database > > > model > > > > function index() { > > > > } > > > > function ajaxfcn1() { > > > $this->render('index', 'ajax'); > > > }} > > > > ?> > > > ======================================== > > > > So basically I have a view with an ajax link, an ajax button, and a > > > <div>. I would like to change the text in the div when I click the > > > link or button. At this point, nothing happens when I click them. I am > > > not sure if the ajaxfcn1() function is even executing at this point. > > > What's an easy statement to add in ajaxfcn1() to determine if the code > > > is executing? What function would I use to set the new div text from > > > within ajaxfcn1()? > > > > Thanks --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "CakePHP" group. To post to this group, send email to cake-php@googlegroups.com To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/cake-php?hl=en -~----------~----~----~----~------~----~------~--~---
