title: Sinatra instance variables not evaluated in view following an ajax call
body: <p>I've run out of ideas, and have canvased the web with no hint of a solution, so I hope someone can get me out of this mess because I'm really, really stuck.</p>
  
  <p>One of my routes queries a databse and renders data through an erb via a bunch of instance variables (@campagnes and @missions). No worries there, everything works fine.</p>
  
  <p>I've set up a jQuery function that helps me filter data on my table based on a dropdown selector. So if the user changes the selected value in the dropdown, the jQuery $.ajax method reloads the page, passing the selected value to the 'get' route.</p>
  
  <p>Here's what I don't get. The call works, it's successful, the parameters are passed to the route, they are used to read from the database, BUT all the instance variables that have the new set of data REFUSE to be evaluated in the view. Instead, the old ones are still used (the ones that where evaluated with the initial GET, before the Ajax call) and therefore the table is still the old table.</p>
  
  <p>What do I need to pass in my Ajax call for the instance variables to be evaluated again in the view?</p>
  
  <p>Here's my route:</p>
  
  <pre><code>get '/admin/mission' do
  # load the appropriate js file in template
  @js = "mission.js"
  
  # retrieve list of all campagnes, latest on top
  @campagnes = Campagne.all :order=&gt;:id.desc
  
  
  if !params[:campagne]
  #puts "camp id retrieved from normal GET"
  camp_id = @campagnes[0].id # first campagne in collection is latest
  else
  #puts "camp id retrieved from ajax call"
  camp_id = params[:campagne] # if submitted via Ajax
  end
  
  # retrieve list of missions for selected campaign
  @missions = Mission.all :campagne_id =&gt; camp_id, :order=&gt; :numero.asc
  
  erb :admin_mission , :layout =&gt; !request.xhr?
  
  end
  </code></pre>
  
  <p>My view (edited down to important stuff)</p>
  
  <pre><code>&lt;div id="mission_form"&gt;
  &lt;form class="cmxform" name="mission" action="/admin/mission" method="post"&gt;
  &lt;ol&gt;
  &lt;li&gt;
    &lt;label for="campagne" id="campagne_label" &gt;Choisir une Campagne&lt;/label&gt;
    &lt;select id="campagne" name="campagne"&gt;
      &lt;% @campagnes.each do |c| %&gt;
        &lt;option value="&lt;%= c.id %&gt;"&gt; &lt;%=h c.nom %&gt; &lt;/option&gt;
      &lt;% end %&gt;
    &lt;/select&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;label for="numero" id="numero_label" &gt;Num&amp;eacute;ro&lt;/label&gt;
    &lt;input type="text" name="numero" id="numero" placeholder="" size="5"/&gt;
    &lt;label class="error" for="numero" id="numero_error"&gt;Champ obligatoire.&lt;/label&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;label for="nom" id="nom_label" &gt;Nom de la mission&lt;/label&gt;
    &lt;input type="text" name="nom" id="nom" placeholder="" size="50"/&gt;
    &lt;label class="error" for="nom" id="nom_error"&gt;Champ obligatoire.&lt;/label&gt;      
  &lt;/li&gt;
  &lt;li&gt;
    &lt;input type="submit" name="submit" id="submit_btn" class="button" value="Ajouter" /&gt;
  &lt;/li&gt;
  &lt;/ol&gt;  
  &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;table div="table_mission" id="hor-minimalist-a" summary="Main Table"&gt;
    &lt;!-- Table header --&gt;
    &lt;thead&gt;
    &lt;tr&gt;
    &lt;th scope-"col"&gt;Campagne&lt;/th&gt;
    &lt;th scope="col"&gt;Mission&lt;/th&gt;
    &lt;th scope="col"&gt;Briefing&lt;/th&gt;
    &lt;th scope="col"&gt;De-Briefing&lt;/th&gt;
  
   &lt;/tr&gt;
  &lt;/thead&gt;
  
  &lt;!-- Table body --&gt;
  &lt;tbody&gt;
  &lt;% @missions.each do |m| %&gt;
  &lt;tr&gt;
    &lt;td&gt;
      &lt;%=h m.campagne.nom %&gt;
    &lt;/td&gt;
    &lt;td&gt;
      #&lt;%=h m.numero %&gt;: &lt;%=h m.nom %&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;%=h m.briefing %&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;%=h m.debriefing %&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;span&gt;&lt;a href="/&lt;%= m.id %&gt;"&gt;[edit]&lt;/a&gt;&lt;/span&gt;  
    &lt;/td&gt;
    &lt;td&gt;
      &lt;class="meta"&gt;&lt;%= m.created_at.strftime("Created: %m/%d/%Y") %&gt;
    &lt;/td&gt;  
  &lt;/tr&gt;
  &lt;% end %&gt;
  &lt;/tbody&gt;  
  &lt;/table&gt;
  </code></pre>
  
  <p>And my script file (also edited to keep the important bits):</p>
  
  <pre><code>$(document).ready (function() {
  // hide all error and confirm labels
  // refresh  mission table if change campagne dropdown
  $('#campagne').change(function() {
    var inputs = [];
    $(':input').each(function () {
          inputs.push(this.name + '=' + escape(this.value));
        });
  
    $.ajax({
      data: inputs.join('&amp;'),
      url: '/admin/mission', // couldhave used: this.action if it was a submit...
      timeout: 2000,
      error: function() {
        console.log("Failed to submit"); // remove when going live
      },
      success: function() { // 
  
        $('label#campagne_confirm').show(function() {
              console.log("Sucess!");
  
            });
         }
   });
  });
  </code></pre>