title: Convert code from multiple div's to use Ajax instead
body: <p>How it works is, the <code>&lt;div&gt;</code> content changes depending which <code>&lt;select&gt;</code> option they choose.</p>
  
  <p>Instead of a bunch of <code>&lt;div&gt;</code>'s I'd like to use ajax.
  Unfortunately, I am not very good with ajax, but I want to learn to use it. If somebody could help point me in the right direction, it'd be great.</p>
  
  <p>I'd like to make a general Ajax class, so I can use it anywhere in my framework. Then, if needed, extend another class from it.</p>
  
  <p>You can see my PHP on my previous SO question: <strong><a href="https://stackoverflow.com/questions/28620088/change-div-according-to-dropdown-boxes-selected">Change div according to dropdown boxes selected</a></strong></p>
  
  <p><strong><a href="http://jsfiddle.net/Draven/dz5gh7wo/17/" rel="nofollow noreferrer">JSFiddle</a></strong></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form action="" method="post" name="create" target="_top"&gt;
      &lt;fieldset&gt;
          &lt;ul class="create"&gt;
              &lt;li&gt;
                  &lt;label class="label" for="character_name"&gt;Character Name:&lt;/label&gt;
                  &lt;input class="text" type="text" name="character_name" id="character_name" /&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label class="label" for="character_gender"&gt;Gender:&lt;/label&gt;
                  &lt;select class="character_gender select" name="character_gender" id="character_gender"&gt;
                      &lt;option class="option" value="1"&gt;Female&lt;/option&gt;
                      &lt;option class="option" value="2"&gt;Male&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label class="label" for="character_race"&gt;Character Race:&lt;/label&gt;
                  &lt;select class="character_race select" name="character_race" id="character_race"&gt;
                      &lt;option class="option" value="1"&gt;Goblin&lt;/option&gt;
                      &lt;option class="option" value="2"&gt;Human&lt;/option&gt;
                      &lt;option class="option" value="3"&gt;Undead&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label class="label" for="character_class"&gt;Character Class:&lt;/label&gt;
                  &lt;select class="character_class select" name="character_class" id="character_class"&gt;
                      &lt;option class="option" value="1"&gt;Warrior&lt;/option&gt;
                      &lt;option class="option" value="2"&gt;Wizard&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;input class="submit-create-character" type="submit" name="create_character" value="Create" /&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;div class="class-info female-goblin-warrior"&gt;
      &lt;div class="avatar-box"&gt;
          &lt;img src="Female.Goblin.Warrior.gif" alt="Female Goblin Warrior" /&gt;
      &lt;/div&gt;
      Goblin description.&lt;br /&gt;
      Warrior Description
  &lt;/div&gt;
  &lt;div class="class-info male-goblin-warrior"&gt;
      &lt;div class="avatar-box"&gt;
          &lt;img src="Male.Goblin.Warrior.gif" alt="Male Goblin Warrior" /&gt;
      &lt;/div&gt;
      Goblin description.&lt;br /&gt;
      Warrior Description
  &lt;/div&gt;
  &lt;div class="class-info female-human-warrior"&gt;
      &lt;div class="avatar-box"&gt;
          &lt;img src="Female.Human.Warrior.gif" alt="Female Human Warrior" /&gt;
      &lt;/div&gt;
      Human description.&lt;br /&gt;
      Warrior Description
  &lt;/div&gt;
  &lt;div class="class-info male-human-warrior"&gt;
      &lt;div class="avatar-box"&gt;
          &lt;img src="Male.Human.Warrior.gif" alt="Male Human Warrior" /&gt;
      &lt;/div&gt;
      Human description.&lt;br /&gt;
      Warrior Description
  &lt;/div&gt;
  &lt;div class="class-info female-undead-warrior"&gt;
      &lt;div class="avatar-box"&gt;
          &lt;img src="Female.Undead.Warrior.gif" alt="Female Undead Warrior" /&gt;
      &lt;/div&gt;
      Undead description.&lt;br /&gt;
      Warrior Description
  &lt;/div&gt;
  &lt;div class="class-info male-undead-warrior"&gt;
      &lt;div class="avatar-box"&gt;
          &lt;img src="Male.Undead.Warrior.gif" alt="Male Undead Warrior" /&gt;
      &lt;/div&gt;
      Undead description.&lt;br /&gt;
      Warrior Description
  &lt;/div&gt;
  &lt;div class="class-info female-goblin-wizard"&gt;
      &lt;div class="avatar-box"&gt;
          &lt;img src="Female.Goblin.Wizard.gif" alt="Female Goblin Wizard" /&gt;
      &lt;/div&gt;
      Goblin description.&lt;br /&gt;
      Wizard Description
  &lt;/div&gt;
  &lt;div class="class-info male-goblin-wizard"&gt;
      &lt;div class="avatar-box"&gt;
          &lt;img src="Male.Goblin.Warrior.gif" alt="Male Goblin Wizard" /&gt;
      &lt;/div&gt;
      Goblin description.&lt;br /&gt;
      Wizard Description
  &lt;/div&gt;
  &lt;div class="class-info female-human-wizard"&gt;
      &lt;div class="avatar-box"&gt;
          &lt;img src="Female.Human.Wizard.gif" alt="Female Human Wizard" /&gt;
      &lt;/div&gt;
      Human description.&lt;br /&gt;
      Wizard Description
  &lt;/div&gt;
  &lt;div class="class-info male-human-wizard"&gt;
      &lt;div class="avatar-box"&gt;
          &lt;img src="Male.Human.Wizard.gif" alt="Male Human Wizard" /&gt;
      &lt;/div&gt;
      Human description.&lt;br /&gt;
      Wizard Description
  &lt;/div&gt;
  &lt;div class="class-info female-undead-wizard"&gt;
      &lt;div class="avatar-box"&gt;
          &lt;img src="Female.Undead.Wizard.gif" alt="Female Undead Wizard" /&gt;
      &lt;/div&gt;
      Undead description.&lt;br /&gt;
      Wizard Description
  &lt;/div&gt;
  &lt;div class="class-info male-undead-wizard"&gt;
      &lt;div class="avatar-box"&gt;
          &lt;img src="Male.Undead.Wizard.gif" alt="Male Undead Wizard" /&gt;
      &lt;/div&gt;
      Undead description.&lt;br /&gt;
      Wizard Description
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.class-info {
      display: none
  }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>var buildCharacter = function () {
      var character = {
          properties: {
              gender: '',
              race: '',
              class: ''
          },
          getCss: function () {
              return (this.properties.gender + '-' + this.properties.race + '-' + this.properties.class).toLowerCase();
          }
      };
  
      for (var prop in character.properties) {
          character.properties[prop] = $('#character_' + prop + ' :selected').text();
      }
  
      $('.class-info').hide();
      $('.' + character.getCss()).show();
  };
  buildCharacter();
  $('.select').on('change', buildCharacter);
  </code></pre>
  
  <p>I started making a general Ajax class but I don't actually think it'll work for what I want.</p>
  
  <p>Ajax.php</p>
  
  <pre><code>&lt;?php /* /application/modules/Ajax/Ajax.php */
  
  /**
   * Ajax
   *
   * The Ajax Class is used to get data from a Class and return the data.
   *
   */
  class Ajax
  {
      private $class;
      private $method;
      private $params;
  
      /**
       * __construct
       *
       * @access  public
       */
      public function __construct()
      {
          $this-&gt;params=$_POST;           # Call params
          $call=explode('-&gt;', $this-&gt;params['call']);
  
          if(method_exists($call[0], $call[1]))
          {
              $this-&gt;class=new $call[0];  # e.g. controller-&gt;method
              $this-&gt;method=$call[1];
              unset($this-&gt;params['call']);
              $this-&gt;parse();
          }
          else
          {
              throw new Exception('Method does not exist', E_RECOVERABLE_ERROR);
          }
      }
  
      public function parse()
      {
          $param=array();
  
          # Params in any order...
          $ref_method=new ReflectionMethod($this-&gt;class, $this-&gt;method);
          foreach($ref_method-&gt;getParameters() as $p)
          {
              $param[$p-&gt;name]=$this-&gt;params[$p-&gt;name];
          }
          $this-&gt;params=$param;
  
          $result_data=call_user_func_array(array($this-&gt;class, $this-&gt;method), $this-&gt;params);
  
          return $result_data;
      }
  } # End Ajax class.
  </code></pre>