How to update multiple divs with Ajax

This is a question which arises from time to time in the CakePHP google group. There is an example in the group, but I have to admit I didn’t understood it the first time I read it. So I try to provide a better example.

First we create a view with an Ajax link and two divs we want to update:

<?php echo $ajax->link('Link', '/test/update', array('update' => array('first', 'second'))); ?>
<div id="first"> first div </div>
<div id="second"> second div </div>

The update function of the test controller is very simple, we just say it should use the ajax layout:

function update()
{
   $this->layout = 'ajax';
}

As last step we have to create the update view.

<?php echo $ajax->div('first'); ?>
first div updated: <?php echo strtotime('now'); ?>
<?php echo $ajax->divEnd('first'); ?>
<?php echo $ajax->div('second'); ?>
second div updated
<?php echo $ajax->divEnd('second'); ?>

That’s it. If you click on the link the divs should get updated (I say “should” as it crashes for some reason my Firefox, but it works fine with Konqueror).

Update (2006-08-18): To avoid that Firefox crashes, you have to use a prototype version higher than 1.4. Thanks to Josh Southern for the hint!

About these ads

10 Comments

  1. nate
    Posted June 29, 2006 at 4:30 pm | Permalink

    Side note for the readers: if you use RequestHandler in your controller, putting $this->layout = 'ajax'; in your action is not necessary.

    I’m not sure what’s up with the Firefox crashes. This was tested in Firefox 1.5.0.4 and 1.0.7 on both PC and Mac, and both with extensions enabled and disabled (I have a few common extensions installed on each, i.e. Firebug and WDE, etc).

    If anyone is able to isolate the problem to a particular version or extension, please email me or open a ticket.

  2. Posted June 29, 2006 at 5:47 pm | Permalink

    @nate: Thanks for the addition. I tested it with Firefox 1.5.0.2 and 1.5.0.4 on Debian. I also disabled the extensions, without luck.

  3. nate
    Posted June 29, 2006 at 6:56 pm | Permalink

    Hmmm, sounds like a Debian/Linux issue : /

    I don’t have access to a Linux box, so any patch submissions on this issue will be greatly appreciated.

  4. dijiko
    Posted June 29, 2006 at 8:44 pm | Permalink

    IMHO firefox shouldn’t crash like this with no reason…
    I think it’s more a firefox’s bug rather than a cake’s one !

  5. Posted June 30, 2006 at 10:19 am | Permalink

    I can confirm the crashes with Firefox 1.5.0.4 on Win 2k
    This my extensions list:

    Add Bookmark Here 0.5.5
    ChatZilla 0.9.74
    ClamWin Antivirus Glue for Firefox 0.2.4
    DOM Inspector 1.8.0.4
    ImgLikeOpera 0.6.9
    InfoLister 0.9c
    ListZilla 0.7
    Live HTTP Headers 0.12
    LiveLines 0.4.5
    LoremIpsum Content Generator 0.4.2
    Performancing 1.2
    RSS Editor 0.0.9.1
    SDI_Integrator 1.0
    Sage 1.3.6
    ScrapBook 1.0.6
    Signature 0.4.0.3.200511282308
    Tails Export 0.2.5
    Talkback 1.5.0.4
    del.icio.us 1.1
    mozCC 1.2.1
    undoclosetab 20051204

  6. Josh Southern
    Posted August 14, 2006 at 5:15 pm | Permalink

    Did anyne ever resolve the Firefox issue? It crashes on both my PC (version 1.5.0.6, Windows 2000, no extensions), and my Mac (version 1.5.0.5, OS X 10.4, no extensions). Also, the method doesn’t produce anything in Internet Explorer (version 6.0.2800, Windows 2000). In fact, the only “major” browser I can get it to work in is Safari on the Mac (version 2.0.4). Any ideas?

  7. Posted August 15, 2006 at 8:54 am | Permalink

    @Josh Southern: I don’t know if it is fixed, probably not :|

  8. Josh Southern
    Posted August 16, 2006 at 5:13 pm | Permalink

    So does the “AJAX multiple div updating” only work in Konqueror? That makes it pretty useless in the real world…

  9. Josh Southern
    Posted August 16, 2006 at 6:11 pm | Permalink

    I figured out all the problems. Being new to this whole Prototype thing, I had downloaded the “latest version” of Prototype (1.4) from the Prototype website, then downloaded Scriptaculous. I just noticed that the Scriptaculous download contains the *actual* latest version of the Prototype library (1.5), and after uploading that file, everything works great in Firefox now.

    Sidenote – I could not get the updates to work in IE, either, and that ended up being a problem with my Norton Internet Security Popup Blocker. If I disable that, everything works perfect in IE as well.

  10. Posted August 16, 2006 at 6:12 pm | Permalink

    @Josh Southern: At least on my machine it works only with Konqueror. But Nate, the primary author of the Ajax helper, says in http://cakebaker.wordpress.com/2006/06/29/how-to-update-multiple-divs-with-ajax/#827 that it works with Firefox on his machines…


4 Trackbacks/Pingbacks

  1. Daniel Hofstetter’s Blog: How to update multiple divs with Ajax…

  2. [...] In an earlier post I showed you how you can update multiple divs with Ajax. But there was one problem: it crashed Firefox on my machine, and other people reported the same problem, whereas it worked for others… [...]

  3. [...] Daniel Hofstetter (cakebaker): Updating multiple divs with Ajax. Without crashing Firefox: ”In an earlier post I showed you how you can update multiple divs with Ajax. But there was one problem: it crashed Firefox on my machine, and other people reported the same problem, whereas it worked for others… [...]

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: