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

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
047c2e2a6349db15db769e3ad46cf936?d=identicon&s=25 Kumar Saurav (sauravsuman012)
on 2009-01-21 17: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',
:html=>{:onsubmit=>'UrlGeneration(this)'}})%>
        <dl style="width:450px">
          <dt>Type</dt>
          <dd>
          <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
for="strip">Strip</label>
          <input name="id" id="dot" value="dot" type="radio"><label
for="dot">Dot</label>
          <input name="id" id="gradation" value="gradation"
type="radio"><label for="gradation">Gradation</label>
          </dd>
          <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>
          <dd>
          <div style="margin-bottom:5px"><input name="linetrans"
id="linetrans"  type="checkbox" onClick="showHideBox(this,'line')" />
Transparent</div>
          <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',
:onfocus=>"blur()"%>
          &nbsp;<input type="text" ID="sample_1" style="background:
#000" size="1" value="" onfocus="blur()" >
          </div>
          </dd>

          <dt>Background Color</dt>
          <dd>
          <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()" >
          </div>
          </dd>

          <dt>Size</dt><dd>

          <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
isNumberKey(event)">
          <label for="height">height</label> <input disabled="disabled"
name="height" id="height" value="20" type="text" onkeypress="return
isNumberKey(event)">
          </dd>
          <dt>Alpha</dt><dd>
          <input name="alpha" id="alpha" value="0" type="text"
onkeypress="return isNumberKey(event)"> <br /><br />between 0(opaque)
and 127(transparent)

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


      <!-- end customize -->

        </td>
        <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
,:onFocus=>'this.select()'%>

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

          <div>
          <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
left;"><b>Sample</b></div>
            <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;">
            </div>
            </div>
          </div>
          </div>

        </div>
      <!-- end preview -->
=============================================================================

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


    # Creation of Gradition Image
    if params[:id] == 'gradation'
      if params[:linetrans]
        @line_color = "#000000"
      end
      if params[:bgtrans]
        @bg_color = "#FFFFFF"
      end
      fill = Magick::GradientFill.new(0, 0, 0, @Width, @line_color,
@bg_color)
      img = Magick::Image.new(@Height, @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)
        img_rev.write("public/images/bgmaker/gradation/xyz.png")
        render :text => "<img
src='/images/bgmaker/gradation/xyz.png?#{@random_number.to_s}'/>"
      else
        img_new.write("public/images/bgmaker/gradation/xyz.png")
        render :text => "<img
src='/images/bgmaker/gradation/xyz.png?#{@random_number.to_s}'/>"
      end
    end
==============================================================================

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

Thanks In Advance
2505b282d57c29be797dc35b245adb4c?d=identicon&s=25 Philip Hallstrom (Guest)
on 2009-01-21 18:57
(Received via mailing list)
On Jan 21, 2009, at 8:26 AM, Kumar Saurav 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:

http://api.rubyonrails.org/classes/ActionView/Help...

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

-philip
This topic is locked and can not be replied to.