title: Show database data based on drop down selection
body: <p>My <strong>database table</strong>:</p>
  
  <pre><code>TABLE `events` (
      `event_id` INT(11) unsigned NOT NULL AUTO_INCREMENT,
      `event_title` VARCHAR(255) NOT NULL,
      `event_desc` TEXT,
      `event_location` VARCHAR(255) NOT NULL,
      `event_requirements` TEXT DEFAULT NULL,
      `event_date` DATETIME NOT NULL,
   PRIMARY KEY (`event_id`)
  </code></pre>
  
  <p><strong>The goal</strong>: When an event is selected in a select drop down menu, I would like to show the rest of the database data, which belongs to the event in a div below.<br /><br />
  <strong>The attempt</strong> to solve the problem (in a MVC architecture):<br /><br />
  Controller</p>
  
  <pre><code>  function index()
    {
        $overview_model = $this-&gt;loadModel('Events');
        $this-&gt;view-&gt;events = $overview_model-&gt;getEventTypes();
        $this-&gt;view-&gt;render('events/index');
    }
  </code></pre>
  
  <p>Model</p>
  
  <pre><code>  public function getEventTypes()
    {
        $sth = $this-&gt;db-&gt;prepare("SELECT * FROM events");
        $sth-&gt;execute();
  
        $events = array();
  
        foreach ($sth-&gt;fetchAll() as $event) {
            $events[$event-&gt;event_id] = new stdClass();
            $events[$event-&gt;event_id]-&gt;event_id = $event-&gt;event_id;
            $events[$event-&gt;event_id]-&gt;event_title = $event-&gt;event_title;
            $events[$event-&gt;event_id]-&gt;event_desc = $event-&gt;event_desc;
            $events[$event-&gt;event_id]-&gt;event_location = $event-&gt;event_location;
            $events[$event-&gt;event_id]-&gt;event_requirements = $event-&gt;event_requirements;
            $events[$event-&gt;event_id]-&gt;event_date = $event-&gt;event_date;
        }
  
        return $events;
    }
  </code></pre>
  
  <p>View</p>
  
  <pre><code>    &lt;!-- start event type selection --&gt; 
     &lt;div class="event-selection"&gt;
       &lt;label&gt;Choose an event:&lt;/label&gt;
       &lt;select id="select-event-type"&gt;
          &lt;?php foreach ($this-&gt;events as $event) {
              // Using the event's ID as a value makes it easier for us to look up the selected event.
              echo "&lt;option value='" .$event-&gt;event_id. "'&gt;" .$event-&gt;event_title."&lt;/option&gt;";
          }?&gt;
      &lt;/select&gt;
  
      &lt;script&gt;
          (function ($) {
              // Here we set the JavaScript variable 'events' to a JSON-encoded copy of the array we passed to the template, or null (if there are no events).
              var events = &lt;?php echo (count($this-&gt;events) &gt; 0) ? "JSON.parse(" .json_encode($this-&gt;events). ")" : "null"; ?&gt;
              $(document).ready(function() {
                  $('#select-event-type').change(function() {
                      if (events) {
                          // Now we can get the event details from the selected value.
                          var event = events[this.value];
                          $('#event-details').html(event-&gt;title);
                      }
                  });
              });
          })($);
      &lt;/script&gt;   
  
      &lt;!-- Start event-details --&gt;
      &lt;div id="event-details"&gt;&lt;/div&gt; &lt;!-- /#event-details --&gt;
  
  &lt;/div&gt;&lt;!-- /.event-selection --&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong>:<br />
  In the console all the event's data is shown now in json format (Thank you so so much for that!). But there is still nothing outputted and when I change the event in the selection the data in the console does not update!<br /></p>