Sep 11
Digg
Stumbleupon
Technorati
Delicious

AJAX with multiple content updates

I think that’s what finally everyone will come up to. So you want to perform AJAX action and result should be returned not into single div but into multiple divs or another tags. Unfortunately, form_remote_tag allows to point in only one ‘update’ parameter and this does not resolve the problem. That’s why I had to look through the web and found cool snippet code: http://www.symfony-project.com/snippets/snippet/152

It’s good explained and quite simple but I had to spent a couple of hours before it really starts to work for me (even after reading of comments to this snippet). That’s why I want to re-share it here again but with my fixes:

So first of all I have a piece of code in which I’m calling AJAX action and in my case it’s going to be form_remote_tag:

echo form_remote_tag(array(‘update’ => ”, ‘url’ => ‘sfAction/add’));

so it goes to add action and I have to define for this action the following template in which actually I’m going to update my tags:

<?php $sf_context->getResponse()->setContentType(‘text/javascript’) ?>
<?php slot(‘first_update’) ?>Successfully added<?php end_slot() ?>
<?php slot(‘second_update’) ?>Another one div is updated here<?php end_slot() ?>

Element.update(‘_feedback’, ‘<?php echo str_replace(array(“\r\n”, “\n”, “\r”), “\\n”, get_slot(‘first_update’)) ?>’);
Element.update(‘div_block’, ‘<?php echo str_replace(array(“\r\n”, “\n”, “\r”), “\\n”, get_slot(‘second_update’)) ?>’);

So in this piece of code important is setContentType(‘text/javascript’) – it means everything we put here is javascript type so we won’t need to add <script> tag, also important is str_replace stuff – that’s what I took from snippet comments but had to fix it as well coz it did not work for me.

And of course somewhere in your html code you should have defined

<div id=’_feedback’></div>

and

<div id=’div_block’></div>

So this way as much content blocks as you want can be updated. But there is limitation which is caused by lenght of javascript string. So updated blocks should be enough small and that’s sucks. So I’m still looking for more universal solution for this problem.
If you know it – you are very welcome to share it with us 🙂

Thanks guys!


Author: symfonian

5 Comments

WebDeveloper
October 14, 2007

Hi 🙂 I’am begginer in symfony and I don’t know how solve my problem (very simmilar to yours).
I have remote login form – on the sidebar [you know, something as described in askeet tutorial]. If user put correcrt data is updated. But how update sidebar, I need change login form to menu. How to make it in right way? Could you help me?

P.S.Sorry for my English

narkov
October 14, 2007

Well, I would say that the way described here should fit your needs. You have to use Element.update for your sidebar block and just print out there menu. Of course, this can be quite complicated because of you may need to print out quite big piece of code. Another possible solution is using of new plugin I saw on symfony site which allows to return JSON response which can update multiple page areas. It looks more general approach so I think in your case it can be more usefull. Frankly, I never replace login form with menu, I prefer to not use AJAX for such stuff.
I hope my answer helped a bit, let me know if you’ll need anything else. Thanks

Jackovson
October 23, 2007

Hi,

Why dont using jQuery plugin Taconite and the Symfony dedicated plugin ? :p

http://trac.symfony-project.com/wiki/sfTaconitePlugin

You send an XML response that indicates many changes, updates, …

I think its a better way 🙂

Bye

admin
October 23, 2007

Yes, you are right about using of sfTaconite. I’ve seen that plugin and liked it. But 2 things:

1. when I’ve been looking for multiple content solution stuff there was not available this plugin

2. I dont really like to use 2 javascript frameworks without really big reason for it. And I still prefer to use prototype because of it built in Symfony.

Actually, I think it’s also important dicussion which javascript framework to use. I’m going to raise it here and see what other developer says.

Pablo
December 9, 2007

Hey, nice article.
I’m trying to use it but I can’t get it to work. It seems like the element.update don’t work… they are not executed.
I noticed you didn’t explicitly allow script execution when calling with the form to remote, with ‘script’ => true, and although I did, it just doesn’t seem to execute. My “main” template includes prototype though. Any thoughts?

Comments RSS TrackBack Identifier URI

Leave a comment