Forum: Ruby on Rails How to update more than one div through form_remote_tag

Announcement (2017-05-07): is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see and for other Rails- und Ruby-related community platforms.
Kumar S. (Guest)
on 2009-01-21 18:26
Hi All
I have to update more than a single DIV through form_remote_tag .
I am posting my code .
In rhtml page

<%= form_remote_tag({:url=>{:controller=>'image_builders', :action
=>'image_creation'}, :update =>'photo',
        <dl style="width:450px">
          <input name="id" id="slash" value="slash" checked="checked"
type="radio"><label for="slash">Slash</label>
          <input name="id" id="strip" value="strip" type="radio"><label
          <input name="id" id="dot" value="dot" type="radio"><label
          <input name="id" id="gradation" value="gradation"
type="radio"><label for="gradation">Gradation</label>
          <dt><label for="margin">Margin</label></dt>
          <dd><input class="default_color" name="margin" id="margin"
value="3" type="text" onkeypress="return isNumberKey(event)"> px</dd>

          <dt>Line Color</dt>
          <div style="margin-bottom:5px"><input name="linetrans"
id="linetrans"  type="checkbox" onClick="showHideBox(this,'line')" />
          <div ID="line">
          <div id="colorpicker201" class="colorpicker201"></div>
          Line Color: <input type="button"
onclick="showColorGrid2('linecolor','sample_1');" value="...">
          <%= text_field_tag 'linecolor', '#000000',
          &nbsp;<input type="text" ID="sample_1" style="background:
#000" size="1" value="" onfocus="blur()" >

          <dt>Background Color</dt>
          <div style="margin-bottom:5px"><input name="bgtrans"
id="bgtrans" checked="checked" type="checkbox"
onClick="showHideBox(this,'background')" /> Transparent</div>
          <div ID="background" style="display: none">
          <div id="colorpicker202" class="colorpicker202"></div>
          Background Color: <input type="button"
onclick="showColorGrid3('bgcolor','sample_2');" value="...">
          <%= text_field_tag 'bgcolor', '#FFFFFF', :onfocus=>"blur()" %>
          &nbsp;<input type="text" ID="sample_2" size="1" value=""
style="background: #fff" onfocus="blur()" >


          <input name="auto" id="auto" checked="checked" type="checkbox"
onclick="enable_field(auto, width, height)"> <label
for="auto">Auto</label> <br /><br />
          <label for="width">width</label> <input disabled="disabled"
name="width" id="width" value="120" type="text" onkeypress="return
          <label for="height">height</label> <input disabled="disabled"
name="height" id="height" value="20" type="text" onkeypress="return
          <input name="alpha" id="alpha" value="0" type="text"
onkeypress="return isNumberKey(event)"> <br /><br />between 0(opaque)
and 127(transparent)

          <dt>Options</dt><dd><input name="reverse" id="reverse"
value="1" type="checkbox"> <label for="reverse">Reverse</label></dd>
          <%= submit_tag 'Create Image' %>

      <!-- end customize -->

        <td width="65%" valign="top" align="left">

      <!-- start preview --><h2>Preview</h2>

        <div id='result'>

          <div><label for='url'><b>URL:</b></label>
          <%= text_field_tag 'url', @url_for , :size => 75

          <div id="photo" style="width:99%;">
            <img src='/images/xyz.png'/>

          <label><b>Sample Area:</b></label>

          <div class="prv" id="photo" >

            <div id="sample1" style="width:200px; height:200px;
margin-left:5px; background:url('') repeat top left;"></div>
            <div id="sample2" style="width:98%; height:20px;
margin-left:5px; background:url('') repeat-x top
            <div id="sample3" style="width:50px; margin-left:5px;
height:35px; padding-bottom:10px; background:url('/images/back_img.jpg')
no-repeat top left;">
            <div id="sample4" style="width:50px; height:35px;
margin-left:15px; background:url('') repeat top left;">

      <!-- end preview -->

As i am updating "photo" here , I have to refresh the other div's like
Sample2,Sample3,Sample4 also
Code in my controller

    # Creation of Gradition Image
    if params[:id] == 'gradation'
      if params[:linetrans]
        @line_color = "#000000"
      if params[:bgtrans]
        @bg_color = "#FFFFFF"
      fill =, 0, 0, @Width, @line_color,
      img =, @Width, fill)
       img.opacity = @alpha/ 127.0 * Magick::TransparentOpacity if
@alpha != 0
      img_new = img.rotate(90)
      if params[:reverse]
        img_rev = img_new.rotate(270)
        render :text => "<img
        render :text => "<img

If anybody having any solution please let me know , it would be great
help for me .

Thanks In Advance
Philip H. (Guest)
on 2009-01-21 19:57
(Received via mailing list)
On Jan 21, 2009, at 8:26 AM, Kumar S. wrote:

> =
> =
> =
> ======================================================================
> <%= form_remote_tag({:url=>{:controller=>'image_builders', :action
> =>'image_creation'}, :update =>'photo',
> :html=>{:onsubmit=>'UrlGeneration(this)'}})%>

First, you don't want to pass an :update option to form_remote_tag.
Then you want to start reading about update_page here:

Basically you'll return some javascript which will do whatever you
want... updating divs, hiding stuff, replacing other stuff, etc...

This topic is locked and can not be replied to.