Code snippets for symfony 1.x

Navigation

Refine Tags

Snippets tagged "div"

Ajax multiple DIV update with Single action and multiple actions.

The idea here is to show different ways of using ajax to update different section of the document.


index.php

<br /><div id="input_tag_section_1" >input_tag_section_1</div>
<br /><div id="input_tag_section_2" >input_tag_section_2</div>
 
 
<br /><div id="update_me_1">update_me_1</div>
<br /><div id="update_me_2">update_me_2</div>
 
<br /><div id="js_holder_for_multi_update"></div>
<?php 
 
echo form_tag('test/index');
 
/**
 * The following input tag updates two different sections using two different actions.
 */
echo '<br />'.input_tag('test_input_tag1', '', array('onkeyup'=>
     remote_function(array(
        'update'=>'input_tag_section_1'
      , 'url'=> 'test/updateInputTagSectionOne'
      , 'with'=>"'value=' + \$F('test_input_tag1')"
      ))
    .remote_function(array(
        'update'=>'input_tag_section_2'
      , 'url'=> 'test/updateInputTagSectionTwo'
      , 'with'=>"'value=' + \$F('test_input_tag1')"
      ))
    ));
 
/**
 * The following input tag updates two different sections (DIV tags) using a single action
 * This is done using a javasctipt that gets created in the called action, and updates several sections 
 */
echo '<br />'.input_tag('test_input_tag2', '', array('onkeyup'=>
     remote_function(array(
        'update'=>'js_holder_for_multi_update'
      , 'url'=> 'test/updateJsHolderForMultiUpdate'
      , 'with'=>"'value=' + \$F('test_input_tag2')"
      , 'script'=>true))
    ));
 
 
echo '</form>';
 
?>
 

action.class.php

Here we have the different actions that are used by the ajax callers above.

<?php
 
class testActions extends sfActions
{
  public function executeIndex()
  {
    //nothing to do here
  }
 
  public function executeUpdateInputTagSectionOne(){
    $this->valueFromAction = 'This is from section ONE action.';
  }
 
  public function executeUpdateInputTagSectionTwo(){
    $this->valueFromAction = 'This is from section TWO action.';
  }
 
  public function executeUpdateJsHolderForMultiUpdate(){
    $this->valueFromAction = 'This is from Multi update action.';
    $this->update_me_1_value = 'Value for first ';
    $this->update_me_2_value = 'Value for second ';
  }
 
 
}
?>
 

updateInputTagSectionOneSuccess.php

This is called by the first input example, updates two DIVs with different content from different actions.

<?php
 
echo $valueFromAction .' Value = '.$sf_params->get('value');
 
?>
 

updateInputTagSectionTwoSuccess.php

This is called by the first input example, updates two DIVs with different content from different actions.

This contains the same code as the previous one template, however the action is giving it a different value.

<?php
 
echo $valueFromAction .' Value = '.$sf_params->get('value');
 
?>
 

updateJsHolderForMultiUpdateSuccess.php

This is called by the second input example, updates two DIVs with different content from a single action.

This template will only contain javascript to update our DIV tags with required data.

Note how the "update_element_function" is concatenated below.

<?php
echo javascript_tag(
     update_element_function('update_me_1', array('content' => $update_me_1_value.' '.$sf_params->get('value')))
    .update_element_function('update_me_2', array('content' => $update_me_2_value.' '.$sf_params->get('value')))
  );
?>
 

Finally .. Enjoy, and I really hope this helps someone out there.

by Fuad Arafa on 2009-09-08, tagged ajax  div  multiple  update 

Div to toggle and remote

This helper used JavascriptHelper. It create a div which open a another onclick with a visual effect. The content of the div is the template's result of a call to a module/action.

/**
 * Fonction my_div_to_remote
 * @author Julien Levasseur
 * @since - 13 sept. 07
 * Extend of my_button_to_remote. return a div.
 * 
 * Returns an html button to a remote action defined by 'url' (using the
 * 'url_for()' format) that's called in the background using XMLHttpRequest.
 *
 * See link_to_remote() for details.
 *
 */
function my_div_to_remote($name, $options = array(),$effect, $html_options = array())
{
  return my_div_to_function($name, $effect, remote_function($options), $html_options);
}
 
function my_div_to_function($name,$effect, $function, $html_options = array())
{
  $html_options = _parse_attributes($html_options);
  $html_options['onclick'] = $function.';'.$effect['onclickadd'].';return false;';
  return content_tag('div', $name, $html_options);
}
 

Example:

<?php echo my_div_to_remote('div de test',array('url'=>'principal/pret'),array('onclickadd' => visual_effect('toggle_blind', 'rem', array('duration' => 4.0))),array('style'=>'border: solid 1px;width:40px;height:40px;')) ?>
    <div id="rem" style="display:none;height:300px;border:solid 1px;">youpi</div>
 
by julien levasseur on 2007-09-14, tagged ajax  div  link  remote  toggle  visualeffect