title: Nested ajax form within a ruby form
body: <p>Thanks in advance for whoever tries to resolve my issue.
  I am new to rails so please help, I have</p>
  
  <pre><code>rails g scaffold City name:string
  rails g scaffold Area name:string city:references
  rails g scaffold User name:string brief:text
  rails g migration CreateAreasUsers id:false area:references user:references
  
  rake db:migrate
  </code></pre>
  
  <p><code>CreateAreasUsers</code> is a table join bw area and user</p>
  
  <p><code>City</code> and <code>Areas</code> are pre-populated</p>
  
  <h1>Two issues</h1>
  
  <p>1) How to add functionality in user form so that :areas_users (join table) is also updated.</p>
  
  <p>2) City and Area are separate models so how can I change select tag for city with select tag for area (however area depends on city)
  like:</p>
  
  <pre><code>&lt;div id="foo"&gt;
  &lt;select&gt;
   &lt;% @cities.each do |city|%&gt;
    &lt;option value="&lt;%=city.id%&gt;"&gt; &lt;%=city.name%&gt; &lt;/option&gt;
   &lt;%end%&gt;
  &lt;select/&gt;
  </code></pre>
  
  <h2>    </h2>
  
  <pre><code> &lt;div id="bar"&gt;
      &lt;select&gt;
       &lt;% @areas.each do |area|%&gt;
        &lt;option value="&lt;%=area.id%&gt;"&gt; &lt;%=area.name%&gt; &lt;/option&gt;
       &lt;%end%&gt;
      &lt;select/&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>div foo should be interchanged with div bar within the new user form
  Please help. </p>