|
|
Snippets |
|
One link, multiple ajax div updates, the ultimate solution
I already proposed a solution in another snippet, but it seems I missed the simplest solution.
Let's summarize the probkem again: A page contains one Ajax link, but the remote function must update several divs on the page. Consider, for instance, the following template:
<h1>First zone to update</h1> <div id="first_zone"> Hello there </div> <h1>Second zone to update</h1> <div id="second_zone"> <p>How do you do, <strong>mate</strong>? </div>
We want an ajax link to update the two zones. The solution is not to use the Ajax helpers, but rather call the prototype Ajax object directly:
<?php echo use_helper('Javascript') ?> <h1>Ajax link</h1> <?php echo link_to_function('click me', 'new Ajax.Request(\''.url_for('test/ajax').'\');return false')) ?>
The code of the action itself (executeAjax()) does some server stuff to prepare the data used to update the template. It really depends on what logic you put in your Ajax interaction. For this example, it will be empty.
The code of the template (ajaxSuccess.php) just needs to be as follows:
<?php $sf_context->getResponse()->setContentType('text/javascript') ?> <?php slot('first_update') ?> So you like clicking, uh? <?php end_slot() ?> <?php slot('second_update') ?> <p>I\'d like to test quotes (like "). </p> <p>And <strong>tags</strong>, too.</p> <?php end_slot() ?> Element.update('first_zone', '<?php include_slot('first_update') ?>'); Element.update('second_zone', '<?php include_slot('second_update') ?>');
And that's it. Because the response content type is text/javascript, the Ajax object will eval it automatically (no need to mention evalScripts: true anymore).
And this will do exactly what we wanted: update both zones with different content, in a single remote call. The interest of using the slot helpers is that you don't need to worry about escaping the content passed to the JavaScript function, and it looks really nice in your favorite syntax-highlighting text editor.
Do you like this code snippets section? It is an implementation of the snipeet application, an open-source project initiated by the symfony team. If you want to browse its source, install it or contribute, head to snipeet.com.
contacts & credits - powered by
Comments on this snippet
I can't put my finger on it... but I really liked your other solution better. None of the little quirks about it (needing evalScripts=true, the update_elements_function helper, the extra div for results, etc.) really bothered me. I rather thought it quite elegant.
How does the saying go? "One man's garbage is another man's gold."? Maybe that's not how it goes, but you get the idea.
Cool, I like ajax updates. While I was trying to reproduce it, I ran into two issues. The link_to_function has an extra closing bracket and I can't get it to update the div zones. I'm using firebug to watch response string witch I think should be ok:
Element.update('first_zone', 'So you like clicking, uh? ');
Element.update('second_zone', '<p>I\'d like to test quotes (like "). </p> <p>And <strong>tags</strong>, too.</p>
');
My link_to_function looks like : "<?php echo link_to_function('click me', 'new Ajax.Request(\''.url_for('alkatresz/ajax').'\')') ?>" I noticed that there is no need of extra ";" and "return false" into the request string, it is rendered by something else .. :)
I can't make it to work with Firefox and Konqueror. It seems that the eval is aborted because both second parameter strings aren't correct (there should be a backslash at the end of each line).
So the solution is:
Hello,
Hello, I want to employ this extract because it is what I have need, it is well for simple contents but for the contents complexes (table, other div,…) it is not possible. Why? because in Javascript the number of character is limiting on the level of the variables, finally it seems to to me ;) But if you have another solution do not hesitate to let it know.
@+