CakePHP AJAX Layout

Question

I\'m working with a CakePHP application and jQuery Mobile. In the CakePHP application, RequestHandler is turned on, now, jQuery Mobile makes all of it\'s requests as ajax re

Answer 1

I was having the same problem with a CakePHP 1.3 app that is using jQueryMobile to build mobile-friendly views. I'll try to lay it out for future searches.

When I switched on $.mobile.ajaxEnabled = true; for jQM's nice Ajax-based navigation all the linked pages showed undefined instead of the page content. The Ajax nav requires that the linked page have the proper structure, like so:

    

        
Page Title
    

    
   
        
Page content goes here.
      
    

    

        
Page Footer
    

This markup was coming from two places for my app, though: my default mobile layout had the , and the page and footer divs. Each view had a header and content div.

The problem arose because Cake's RequestHandler wanted to set the layout to ajax for all Ajax requests. It does this somewhere after beforeFilter(), which caused it to ignore a declared layout there (which Luke mentions).

The ajax layout is empty, unlike my default layout--it doesn't have and other markup because it assumes (rightly) that you only want partial markup that will be inserted into a page by Ajax. The jQuery Ajax-based navigation does want to see the full markup though, and when it didn't receive a well-formed page when making the Ajax request it had no page to display.

So the question became, "How do I make RequestHandler use my default mobile layout for mobile page requests?" I wasn't satisfied with Luke's solution above of disabling RequestHandler completely for mobile. Luckily I found a post from May '11 with the same problem and a better solution:

Finally sorted it! I was checking to see whether a mobile device was requesting the page using $this->RequestHandler->isMobile(), but had placed it in the beforeFilter() function. Moving this to the beforeRender() function in the app_controller.php file fixed the problem. http://cakephp.1045679.n5.nabble.com/Jquery-Mobile-and-CakePHP-1-3-td4422871.html

So my code ended up something like this in AppController:

function beforeRender() {
    if ($this->RequestHandler->isMobile()) {
        $this->layout = 'm_default';
    }
}

I hope that helps someone out there.