title: Insert HTML into a page with AJAX
body: <p>I am currently developing a website and i need that the pages loads dynamically based on what actions the user does.</p>
  
  <p>Example: If the user clicks on the button 'Settings' an ajax function will load from an external page the code and will put into the div with tag 'settings'.</p>
  
  <p>This is the code i use to make the Ajax request:</p>
  
  <pre><code>    function get_page_content(page, target_id)
      {
          xmlhttp = new XMLHttpRequest();
          xmlhttp.onreadystatechange = function()
          {
              if(xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200)
              {
                  document.getElementById(target_id).innerHTML = xmlhttp.responseText;
                  // After getting the response we have to re-apply ui effects or they
                  // won't be available on new elements coming from request.
                  $('button').sb_animateButton();
                  $('input').sb_animateInput();
              }
          }
          xmlhttp.open('GET', 'engine/ajax/get_page_content.php?page=' + page, true);
          xmlhttp.send();
      }
  </code></pre>
  
  <p>And this is where the ajax results will be put by first snippet:</p>
  
  <pre><code>&lt;div id="settings_appearance"&gt;                
  &lt;/div&gt;
  </code></pre>
  
  <p>The code is called from a function here:</p>
  
  <pre><code>&lt;div class="left_menu_item" id="left_menu_settings_appearance" onclick="show_settings_appearance()"&gt;
      Appearance
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the html that the ajax function will put into the <code>settings_appearance</code> div:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
          $(function()
          {
              $('#upload_hidden_frame').hide();
              show_mybrain();
  
              document.getElementById('avatar_upload_form').onsubmit = function()
              {
                  document.getElementById('avatar_upload_form').target = 'upload_hidden_frame';
                  upload_avatar();
              }
          });
      &lt;/script&gt;
      &lt;div class="title"&gt;Appearance&lt;/div&gt;
      &lt;iframe id="upload_hidden_frame" name="upload_hidden_frame" src="" class="error_message"&gt;&lt;/iframe&gt;
      &lt;table class="sub_container" id="avatar_upload_form" method="post" enctype="multipart/form-data" action="engine/ajax/upload_avatar.php"&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;label for="file"&gt;Avatar&lt;/label&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="file" name="file" id="file" class="file_upload" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;button type="submit" name="button_upload"&gt;Upload&lt;/button&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;div class="hint"&gt;The image must be in PNG, JPEG or GIF format.&lt;/div&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>I would like to know if there's a way to execute also the javascript code that's returned by the ajax function (upload button in the returncode doesn't work because of this) and if it's possible to apply some customized ui effects i build that are loaded with the main page.</p>
  
  <p>Thanks for helping.</p>
  
  <p>P.S. This is the script that applies the UI effects:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  // UI effects
  $(document).ready(function()
  {
    $('button').sb_animateButton();
    $('input').sb_animateInput();
    $('.top_menu_item').sb_animateMenuItem();
    $('.top_menu_item_right').sb_animateMenuItem();
    $('.left_menu_item').sb_animateMenuItem();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>P.P.S. ui effects are not applied to html elements (such as input and buttons) returned by the Ajax function. I used a little workaround by applying again ui-effects after ajax function returns the response. Probably there's another way of doing it... the same that will help me solve this problem.</p>