Question

I have the following ajax call:

$("#welcome a.close").click(function(e) {
    $.ajax({
        type: "GET",
        url: "/visitors/hide_welcome",
        success: function(){
            $("#welcome").hide(0);
            e.preventDefault();
        }
    });
});

Aimed at the following piece of my site:

<div id="welcome">
    <h2>Welcome  <a class="close" href="Javascript:;"></a></h2>
    <div class="left">
    </div>
    <div class="right">
        <div class="loginElement">

        </div>
    </div>
    <div class="clear"></div>
</div>

With the following code to answer the ajax request:

<?php
class VisitorsController extends AppController {

        function hide_welcome() {
                if($this->RequestHandler->isAjax()) {
                        $this->Session->write('Welcome.hidden', true);
                        echo 'Success.';
                }
                else {
                        echo 'I am, in fact, here.<br>';
                        $this->autoRender = false;
                }
        }

}
?>

It’s pretty straight forward. It calls to /visitors/hide_welcome to set a session variable noting that they’ve hidden the welcome. But it doesn’t seem to complete. If I place alerts on either side of it, like so:

$("#welcome a.close").click(function(e) {
    alert("Begin.");
            $.ajax({
        type: "GET",
        url: "/visitors/hide_welcome",
        success: function(){
            $("#welcome").hide(0);
            e.preventDefault();
        }
    });
            alert("End.");
});

They will trigger. But alerts placed in success are ignored. The same goes for error and complete. This was working just fine on my test machine. The page in question is definitely there, I can reach it with out ajax. Firebug reports nothing, neither does the error console. Success simply never fires.

The strangest part is that often if I reload manually the welcome disappears, indicating that the ajax call did fire. It just never returned. What is going on here? I’m at wits end. Any one see any trees I haven’t barked up yet?

SOLUTION:

CakePHP is supposed to auto detect ajax calls. But in this instance, it wasn’t. As a result it was running the code I had for the Ajax, but then returning a 404 when it failed to find a view. The solution was to append $this->autoRender= false; to the end of the ajax handling controller function. After that everything worked beautifully.

Answer 1

I think given your symptoms, you’re redirecting to whatever URL the <a class="close"> you’re clicking on pointed to – since the default behavior isn’t prevented.

The e.preventDefault() call should happen in the base method, not a callback, like this:

$("#welcome a.close").click(function(e) {
    $.ajax({
        type: "GET",
        url: "/visitors/hide_welcome",
        success: function(){
            $("#welcome").hide(0);
        }
    });
    e.preventDefault();
});