title: Adding values to a select box using ajax and organising javascript files
body: <p>I want to create a page where everything is loaded via ajax calls, so the URL always stays the same. At first the user will be presented with one  box with some choices. According to the choice he makes another one will appear and again according to the choice he makes on the second a third will appear. I have successfully created this logic using ajax bit like the following. I am sorry if the code is a bit meshed up, but I am typing the question from a different machine than my code is located, so please be gentle. If you have any problem I will try to provide as much info as I can. So the html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head etc....&gt;
  &lt;body&gt;
          &lt;div class="main-nav"&gt;
          &lt;/div&gt;&lt;!--some navigation things here not important--&gt;
          &lt;div class=controls&gt;
              &lt;div class="select-control1"&gt;
                  &lt;select&gt;
                      &lt;option selected="selected" value=""&gt;Choose one of the following&lt;/option&gt;
                      &lt;!-- adding the django code for this select--&gt;
                      {% for option in options %}
                          &lt;option value="{{option.id}}"&gt;{{option.name}}&lt;/option&gt;
                      {%endfor%}
                  &lt;/select&gt; 
              &lt;/div&gt;
              &lt;div class="select-control2" style="display:none;"&gt;
                  &lt;select&gt;
                      &lt;option selected="selected" value=""&gt;Choose one of the following&lt;/option&gt;                        
                  &lt;/select&gt; 
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;html&gt;
  </code></pre>
  
  <p>Also the option1 and 2 in each control1 are prepopulated by a django template for tag (it is a django project).</p>
  
  <p>the ajax calls are triggered on change of each control and the view that is executed from behind sends an array of json_objects</p>
  
  <pre><code>$(".select-control1 select").change(function (){
      option = $(this).prop("value");
      //Skipping the case where option value is "" for now
      $.ajax({
          url:'/url/to/view/',
          dataType:'json',
          type:'GET',
          success:onSuccess1
      });
  });
  function onSuccess1(data, status, jqXHR){
      $.each(data, function(index, value){
          html = "&lt;option value="+value['id']+"&gt;"+value['option']+"&lt;/option&gt;";
          $(".select-control2 select").append(html);
      });
      $(".select-control2").show();
  }
  </code></pre>
  
  <p>As i said not intrested in error checking or what happens if user checks a different option in select-control1. I do remove them and place the newly gotten ones from the ajax call, just didn't right that right now. My problem are 2 + 1. First of all when the second control is populated with options after the ajax call the "Choose one of the following" option dissappears. Is that the natural behaviour of append?Is there another way?</p>
  
  <p>Second even though i have the selected attribute in the first control in the "Choose one...." option when the page is loaded i don't it won't appear as selected but it will give one of the options loaded from django e.g. option1</p>
  
  <p>Third and final: I am fairly new to ajax and javascript in general, and this kind of programming. I am familiar with procedural languages and can organize them as I want. But Javascript is giving me a hard time. Right now I have a veeery large js file, that will include all ajax and jquery calls of all elements on the page. Is there a way to "modulize" it in a way, to seperate it in different files somehow?Any good links pages books that could give me a guidness?</p>
  
  <p>Thanks in advance!!</p>