title: How to dynamically change variables after calling a function
body: <p>I've created a jQuery autocomplete with a set of predefined values.</p>
  
  <pre><code>$(function() {
      var foo = [
          "bar",
          "baz"
      ];
      $( "#foo-teszt" ).autocomplete({ source: foo });
  });
  </code></pre>
  
  <p>What I would like to do, is that if the user changes the country, the names are changed in the foo. Initially it works, but when I use an AJAX call to change the variables. However, even after that, the variable remains the same. (I guess because the function does not look at the variable each time, but loads only once and reuses the foo the state it was the first time it was called.)</p>
  
  <p>So I tried to invoke both the foo and the foo-teszt autocomplete in hope it will reload the contents of foo. I tried it with </p>
  
  <pre><code>$( function() {
      var foo = [
          "bar",
          "baz"
      ];
      $( "#foo-teszt" ).autocomplete({ source: foo });
  })();
  </code></pre>
  
  <p>And giving the function a name and calling it with the country selects onChange, but neither of them worked, I still got the initial values.</p>
  
  <p>I'm looking for this:</p>
  
  <p>User selects a country from a select. </p>
  
  <p>It's onchange makes an AJAX call, which returns the list of available cities in that country.</p>
  
  <p>And the input field gets to load a new autocomplete with the returned AJAX values. (This is the part not working. The HTML source code script changes to the correct form, but the autocomplete is not loaded with the new variables.)</p>
  
  <p><a href="https://stackoverflow.com/questions/1625858/dynamically-changing-javascript-variable">Dynamically changing javascript variable</a></p>
  
  <p>I also tried this, while it was still running initially, after the AJAX call I still not call it with the onchange, nor within the AJAX itself.</p>
  
  <p>AJAX is a jQuery like this.</p>
  
  <pre><code>$.ajax({ //jadajada
            url: "url",
            type: "post", //send it through get method
            data: {
              method: "baz",
              foo: bar
            },
            success: function(response) {
                document.getElementById("bal").innerHTML = response;
            },                                                              
            error: function(xhr) {
              //Do Something to handle error
            }
          });
  </code></pre>