Using ajax to update form elements.

app/controllers/members_controller.rb

@@ -311,9 +311,19 @@ def builder
 
     if request.post? && params[:builder]
       @builder.build(params[:builder])
+      render :inline => @builder.to_expr
     end
   end
 
+  def update_builder
+    @builder = UserSegment::OperationBuilder.new nil
+    @builder.build(params[:builder])
+    return render :partial => 'operation_form_arguments' if params[:arguments]
+    return render :partial => 'operation_form_operation' if params[:operation]
+    return render :partial => 'operation_form_expression' if params[:expression]
+    return :nothing => true
+  end
+
   def create
     cms_page_path ['People'],'Create Contact'
 

app/views/members/_operation_form.html.erb

@@ -1,24 +1,49 @@
 
-<div id="operation_builder">
-<% admin_form_for :builder, @builder do |f| -%>
-<%= f.check_boxes :operator, [['not', 'not']], :single => true, :label => 'I am' %>
-<%= f.select :field, @builder.field_options, :label => 'looking for' %>
-<%= f.select :operation, @builder.operation_options %>
-
-  <% @builder.operation_arguments.each_with_index do |arg, idx| -%>
-    <% arg_options = @builder.operation_argument_options[idx]
-       label = @builder.operation_argument_names[idx]
-       if arg_options[:options] -%>
-      <%= f.select "argument#{idx}", arg_options[:options], :label => label %>
-    <% else -%>
-      <%= f.text_field "argument#{idx}", :label => label %>
-    <% end -%>
-  <% end -%>
-<%= f.submit_tag 'Build' %>
-<%= f.spacer %>
-<%= f.text_area :to_expr, :style => 'width:400px; height: 50px;', :readonly => true, :label => 'Expression' %>
-<% end -%>
+<script>
+OperationBuilder = {
+  updateOperations: function() {
+    <%= remote_function :url => url_for(:action => 'update_builder', :operation => 1), :submit => 'builder', :update => 'operation' %>;
+    OperationBuilder.updateExpression();
+  },
+
+  updateArguments: function() {
+    <%= remote_function :url => url_for(:action => 'update_builder', :arguments => 1), :submit => 'builder', :update => 'arguments' %>;
+    OperationBuilder.updateExpression();
+  },
+
+  updateExpression: function() {
+    <%= remote_function :url => url_for(:action => 'update_builder', :expression => 1), :submit => 'builder', :update => 'expression' %>;
+  }
+}
+</script>
+
+<fieldset id="operation_builder">
+<legend>User Segment Syntax Helper</legend>
+<% cms_unstyled_form_for :builder, @builder, :html => {:id => 'builder', :onsubmit => 'OperationBuilder.updateExpression(); return false;'} do |f| -%>
+<ul>
+<li>
+<lable><%= 'I am'.t %></label>
+<%= f.check_boxes :operator, [['not', 'not']], :single => true %>
+</li>
+<li>
+<label><%= 'looking for'.t %></label>
+  <%= f.select :field, @builder.field_options, {}, :onchange => 'OperationBuilder.updateOperations();' %>
+</li>
 
+<div id="operation" class="operation">
+<%= render :partial => 'operation_form_operation' %>
 </div>
 
+<li class="submit">
+<%= f.submit_tag 'Build' %>
+</li>
+
+<li id="expression">
+<%= render :partial => 'operation_form_expression' %>
+</li>
+
+<% end -%>
+
+</fieldset>
 
+<%= observe_form 'builder', :frequency => 1, :function => 'OperationBuilder.updateExpression();' %>

app/views/members/_operation_form_arguments.html.erb

@@ -0,0 +1,17 @@
+
+<% cms_unstyled_fields_for :builder, @builder do |f| %>
+<ul>
+  <% @builder.operation_arguments.each_with_index do |arg, idx| -%>
+    <li>
+    <label><%= "Argument #{idx+1}" %></label>
+    <% arg_options = @builder.operation_argument_options[idx]
+       label = @builder.operation_argument_names[idx]
+       if arg_options[:options] -%>
+      <%= f.select "argument#{idx}", arg_options[:options], :label => label %>
+    <% else -%>
+      <%= f.text_field "argument#{idx}", :label => label %>
+    <% end -%>
+    </li>
+  <% end -%>
+</ul>
+<% end %>

app/views/members/_operation_form_expression.html.erb

@@ -0,0 +1,4 @@
+
+<% cms_unstyled_fields_for :builder, @builder do |f| -%>
+<%= f.text_area_tag :expr, @builder.to_expr, :style => 'width:400px; height: 50px;', :readonly => true %>
+<% end -%>

app/views/members/_operation_form_operation.html.erb

@@ -0,0 +1,11 @@
+
+<% cms_unstyled_fields_for :builder, @builder do |f| %>
+<li>
+<%= f.select :operation, @builder.operation_options, {}, :onchange => 'OperationBuilder.updateArguments();' %>
+</li>
+
+<li id="arguments" class="arguments">
+<%= render :partial => 'operation_form_arguments' %>
+</li>
+
+<% end %>