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!




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.
@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.
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.
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 !
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
Daniel Hofstetter’s Blog: How to update multiple divs with Ajax…
…
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?
@Josh Southern: I don’t know if it is fixed, probably not :|
So does the “AJAX multiple div updating” only work in Konqueror? That makes it pretty useless in the real world…
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.
@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…
[...] 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… [...]
[...] 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… [...]
[...] 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… [...]
be careful if you were thinking about putting $ajax->div() and $ajax->divEnd() into a element - they return strange errors that don’t point to the immediate problem.
Its not really updating multiple div’s
What if I have two tables and in each one one div. so Two divs in two tables, try now to update that divs with completely different data, try now to render different file in each div.???? is it possible ?
I do not think so !!!!!!!!!!!!!!!!!!!!!!!!!!
@misiek: Did you try it, or do you simply assume it doesn’t work? Imho it shouldn’t matter whether the divs are in a table or not.
How can I update different divs with different urls when I click on ajaxed link? I have
$options = array();
$options['update'] = “breadcrumbs”;
$options['url'] = “/tasks/breadcrumbs/”.$task['Task']['id'];
$options['after'] = ‘new Ajax.Updater(\’task-tree\’,\’/tasks/tree\’, {asynchronous:true, evalScripts:true});’;
echo $ajax->link( $task['Task']['name'], ‘#’, $options );
But when I click on this link doesn`t update task-tree but return the login form :(
The problem was solved when I use $options[’loaded’] instead of $options[’after’]
@sidr: I am glad you could solve the problem in the meantime :)
What’s the point in using ajax div functions in favour of html div functions?
I didnt really manage to understand the ajax helper code, but I think the ajax divs are conditionally rendered based on wheter or not an ajax request needs the div. Correct me if i’m wrong…
@Tim Daldini:
Turn on firebug and see some js snippet gets generated by the ajax div functions - so I guess that’s the answer.
var __ajaxUpdater__ = {first:”first%20div%20updated%3A%201196754195″,
second:”second%20div%20updated%0D%0A”};
for (n in __ajaxUpdater__) { if (typeof __ajaxUpdater__[n] == “string” && $(n)) Element.update($(n),
unescape(decodeURIComponent(__ajaxUpdater__[n]))); }
@Tim: See Zonium’s answer.
@Zonium: Thanks for providing the answer!
i have two views first.thtml and secundo.thtml
when i call the function in the controller i put the
$this->render('first', 'ajax');
//for this example
i also need to call the
$this->render(’second’, ‘ajax’);
doing
$this->render(’first’, ‘ajax’);
$this->render(’second’, ‘ajax’);
doesnt work
some help?
regards
i could do it!!! :D
i followed this link
http://www.reversefolds.com/articles/show/ajax
regards
@gustavo: Cool to hear you got it done in the meantime :)