Ajax request from a select drop down

Question

I'm trying to get data of events out of my database using jQuery and AJAX.
My database table:

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`)

My code (in a MVC architecture):
Controller:

function index()
    {
        $overview_model = $this->loadModel('Events');
        $this->view->events = $overview_model->getEventTypes();
        $this->view->render('events/index');
    }

Model:

public function getEventTypes()
{
    $sth = $this->db->prepare("SELECT * FROM events");
    $sth->execute();

    $events = array();

    foreach ($sth->fetchAll() as $event) {
        $events[$event->event_id] = new stdClass();
        $events[$event->event_id]->event_title = $event->event_title;
        $events[$event->event_id]->event_desc = $event->event_desc;
        $events[$event->event_id]->event_location = $event->event_location;
        $events[$event->event_id]->event_requirements = $event->event_requirements;
        $events[$event->event_id]->event_date = $event->event_date;
    }

    return $events;
}

View:

  <!-- start event type selection --> 
  <div class="event-selection">
    <label>Choose an event:</label>
    <select id="select-event-type">
        <?php foreach ($this->events as $event) {
            echo "<option value='" .$event->event_title. "'>" .$event->event_title."</option>";
        }?>
    </select>

    <!-- I NEED HELP WITH THIS PART -->
    <script>
        $(document).ready(function() {
            $('#select-event-type').change(function() {

                $.ajax({
                    type:'post',
                    url:'',
                    data:'',
                        success: function(data) 
                        {
                            $('#event-details').html(data);
                        }
                });
            });
        });
    </script>   

    <!-- Start event-details -> here the data is supposed to be displayed -->
    <div id="event-details"></div> <!-- /#event-details -->

  </div><!-- /.event-selection -->

My problem: I'm not sure what URL and data are in my case and I am unsure, if I have to use JSON or not. I am not getting any error messages. Everytime I change my selection in the drop down it loads the whole page into the #event-details div and not the desired database data.

I'm really new to this and I have never worked with AJAX before. Thank you so much for any kind of help.

UPDATE:
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!

Answer 1

You're already passing details about all of the events to the template when you render it, so the AJAX call would be redundant and a waste of a request. Try something like this:

Controller

function index()
{
    $overview_model = $this->loadModel('Events');
    $this->view->events = $overview_model->getEventTypes();
    $this->view->render('events/index');
}

Model

public function getEventTypes()
{
    $sth = $this->db->prepare("SELECT * FROM events");
    $sth->execute();

    $events = array();

    foreach ($sth->fetchAll() as $event) {
        $events[$event->event_id] = new stdClass();
        $events[$event->event_id]->event_id = $event->event_id;
        $events[$event->event_id]->event_title = $event->event_title;
        $events[$event->event_id]->event_desc = $event->event_desc;
        $events[$event->event_id]->event_location = $event->event_location;
        $events[$event->event_id]->event_requirements = $event->event_requirements;
        $events[$event->event_id]->event_date = $event->event_date;
    }

    return $events;
}

View

<!-- start event type selection --> 
<div class="event-selection">
    <label>Choose an event:</label>
    <select id="select-event-type">
        <?php foreach ($this->events as $event) {
            // Using the event's ID as a value makes it easier for us to look up the selected event.
            echo "<option value='" .$event->event_id. "'>" .$event->event_title."</option>";
        }?>
    </select>

    <script>
        (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 = <?php echo (count($this.events) > 0) ? "JSON.parse(" .json_encode($this->events). ")" : "null"; ?>
            $(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.title);
                    }
                });
            });
        })($);
    </script>   

    <!-- Start event-details -->
    <div id="event-details"></div> <!-- /#event-details -->

  </div><!-- /.event-selection -->

I haven't tested it so I'm not sure if it works as is, but the basic idea is to pass the PHP array to the page as JSON, so your JavaScript can use the same data.

Answer 2

As the URL you can try something like :

"/controller/action" e.g. "events/index" (the URL you would request by a normel page-request)

You should now get the hole HTML from your view in your data in the success-function and can load this in your div.

If you want to specify which events should be loaded you can post some date and evaluate this in your controller-function.

It could look like this (the second parameter of $.post is not needed):

$.post('/events/index', {data: {event_id : id}}).done(function(data){
   $('#event-details').html(data);
});

the data send to the controller as an array which looks like:

array(
   data => array(
     event_id => id
  )
)

I hope this will help you