How to use jquery simple modal plugin to edit form data in zend framework?

I am developing a simple students information application. I have student list in my index.phtml and I can edit student information form there. It's working nice but I want to use modal for edition student info. But I don't know how to do this.Below I have posted my current codes :

/// indexController.php

public function editAction()
    {
        $modelStudents = new Application_Model_DbTable_Students();
        $id = (int) $this->_getParam('id');

        $student = $modelStudents->fetch($id);

        $form = new Application_Form_Student($student->email);
        $form->submit->setLabel('Save');
        $this->view->form = $form;
       if ($this->getRequest()->isPost()) {
            $formData = $this->getRequest()->getPost();
            if ($form->isValid($formData)) {
                $id = (int)$form->getValue('id');
                $name = $form->getValue('name');
                $email = $form->getValue('email');
                $phone = $form->getValue('phone');
                $students = new Application_Model_DbTable_Students();
                $students->updateStudent($id, $name, $email, $phone);

                $this->_helper->redirector('index');
            } else {
                $form->populate($formData);
            }
        } else {
            $id = $this->_getParam('id', 0);
            if ($id > 0) {

                $form->populate($modelStudents->getStudent($id));
            }
        }

    }

/// index.phtml

<html>
<head>
<style type="text/css" rel="stylesheet">
</style>
<script type="text/javascript" src="jQuery.js"> </script>
<script type ="text/javascript" src="jquery.simplemodal-1.4.2.js" ></script>
<script>

<?php         
echo "Student List";

?>
<p><a href="<?php echo $this->url(array('controller'=>'index', 
        'action'=>'add'));?>">Add new student</a></p>
<table border="1">
<tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>

    <th>Action</th>

</tr>
<?php foreach($this->students as $student) : ?>
<tr>

    <td><?php echo $student->name;?></td>
    <td><?php echo $student->email;?></td>
    <td><?php echo $student->phone;?></td>

    <td>
        <a href="<?php echo $this->url(array('controller'=>'index', 
            'action'=>'edit', 'id'=>$student->id));?>">Edit</a>
        <a href="<?php echo $this->url(array('controller'=>'index', 
            'action'=>'delete', 'id'=>$student->id));?>">Delete</a>
        <p id="delete" > Delete </p>
    </td>
</tr>
<?php endforeach; ?>
</table>

</center>
</html>

////edit.phtml

<center>
<?php 

echo "Edit Student List ";
echo $this->form ;
?>
</center>

Please let me know how to use jQuery simple modal plugin to preform this task. Thanks in advance

Solution

Start by editing your index.phtml file to add a class and the student id to your edit link:

<a href="<?php echo $this->url(array('controller'=>'index', 
            'action'=>'edit', 'id'=>$student->id));?>" class="editBtn" studentId="<?=$student->id?>">Edit</a>

Then, in an included js file:

$(document).ready(function() {

    $(function() {
        //Event triggered when clicking on the edit btn
        $('.editBtn').click(function(event) {
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
            //Get the page and add it to the modal
            studentId = $(this).attr('studentId');
            var data={};
            data['id'] = studentId;
            url = "/index/edit/";
            $.get(url, data, function(resp) {
                $.modal(resp);
            });
        });
    });

});

This should help you get started...