使用bootstrap弹出窗口时从数据库加载数据

时间:2013-07-26 17:35:50

标签: jquery ajax codeigniter twitter-bootstrap

我有一个包含字段的父表

  

id | student_code | parent_name |关系|手机|电子邮件


我正在为我的项目使用codeigniter和bootstrap。目前我已经加载了父表的一些细节

在控制器中

$data['parents'] = $this->parent_m->get();

在视图中

<h3><span style="color:#777">Profile of</span> <?php echo $student->first_name." ".$student->middle_name . " " .$student->last_name ?></h3>
<section>
<table class="table table-striped">
    <tr>
        <td>Sudent Code *</td>
        <td><?php echo $student->code; ?></td>
    </tr>
    <tr>
        <td>Admission Date *</td>
        <td><?php echo $student->admission_date; ?></td>
    </tr>
    </table>
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="#general" data-toggle="tab">General</a></li>
        <li><a href="#contact" data-toggle="tab">Contact</a></li>
        <li><a href="#parent" data-toggle="tab">Parent Info</a></li>
        <li><a href="#previous" data-toggle="tab">Previous Edu.</a></li>
        <li><a href="#result" data-toggle="tab">Result</a></li>
    </ul>
<div class="tab-content">
    <div class="tab-pane active" id="general">
    <h3>General Detail</h3>
    <table class="table table-striped">
    <tr>
        <td>Date of Birth *</td>
        <td><?php echo $student->dob; ?></td>
    </tr>
    <tr>
        <td>Gender</td>
        <td><?php echo $student->gender; ?></td>
    </tr>
    <tr>
        <td>Course</td>
        <td><?php echo $student->course; ?></td>
    </tr>   
    <tr>
        <td>Nationality</td>
        <td><?php echo  $student->nationality; ?></td>
    </tr>   
    <tr>
        <td>Religion</td>
        <td><?php echo $student->religion; ?></td>
    </tr>   
    <tr>
        <td>Current Semester </td>
        <td><?php echo $student->current_semester; ?></td>
    </tr>
    </table>
    </div>
    <div class="tab-pane" id="contact">
    <h3>Contact</h3>
    <table class="table table-striped">
    <tr>
        <td>Address Line 1 </td>
        <td><?php echo $student->address_line_1; ?></td>
    </tr>   
    <tr>
        <td>Address Line 2</td>
        <td><?php echo $student->address_line_2; ?></td>
    </tr>
    <tr>
        <td>City </td>
        <td><?php echo $student->city; ?></td>
    </tr>
    <tr>
        <td>Country </td>
        <td><?php echo $student->country; ?></td>
    </tr>
    <tr>
        <td>Phone</td>
        <td><?php echo $student->phone; ?></td>
    </tr>
    <tr>
        <td>Mobile </td>
        <td><?php echo $student->mobile; ?></td>
    </tr>
    <tr>
        <td>Email </td>
        <td><?php echo $student->email; ?></td>
    </tr>
    </table>
    </div>
    <div class="tab-pane" id="parent">
    <h3>Parent Info</h3>
    <?php if(count($parents)): ?>
        <table class="table table-striped">
            <tr>
                <th>Parent Name</th>
                <th>Relation</th>
            </tr>
            <?php foreach($parents as $parent): ?>
            <tr>
                <td><a href="#myModal" data-toggle="modal"><?php echo $parent->parent_name; ?></a></td>
                <td><?php echo $parent->relation; ?></td>
            </tr>
            <?php endforeach; ?>
        </table>
    <?php else: echo "No Parent Found <br />"; endif; ?>
    </div>
    <div class="tab-pane" id="previous">
    <h3>Previous Education Detail</h3>
    <?php if(count($previous_details)): ?>
    <table class="table table-striped">
        <tr>
        <th>Insitution Name</th>
        <th>Course</th>
        <th>Year</th>
        <th>Percentage</th>
    </tr>
    <?php foreach($previous_details as $key): ?>
        <tr>
            <td><?php echo $key->institution_name; ?></td>
            <td><?php echo $key->course; ?></td>
            <td><?php echo $key->year; ?></td>
            <td><?php echo $key->percentage; ?></td>
        </tr>
            <?php endforeach; ?>
    </table>
    <?php else: echo "Previous Qualification Detail Not Added <br />"; endif; ?>
    </div>
    <div class="tab-pane" id="result">
        <table class="table table-striped">
            <tr>
                <th>Result</th>
                <th>Stream</th>
                <th>Semester</th>
                <th>Date</th>
            </tr>
            <?php foreach($exams as $exam): ?>
            <tr>
                <td><?php echo $exam->title; ?></td>
                <td><?php echo $exam->stream; ?></td>
                <td><?php echo $exam->semester; ?></td>
                <td><?php echo $exam->date; ?></td>
            </tr>
            <?php endforeach; ?>
        </table>
    </div>
</div>
</section>

<div id="myModal" class="modal hide fade">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h3>Your Parents</h3>
</div>
<div class="modal-body">
[Parent Detail Should come Here]
</div>
</div>

到目前为止工作正常。我现在想要的是,[内容应该来到这里]应该替换为他的父母姓名,关系,手机,电子邮件等实际内容。列表中可能有多个父母,因此用户可以点击任何人。当用户单击父名称时,父详细信息应该在同一页面上弹出,如果它是bootstrap popup则会更好。

1 个答案:

答案 0 :(得分:0)

当用户点击父级时,您需要使用javascript动态生成信息。

要获得正确的父级,您可以在链接中添加一个变量,如下所示:

<a href="#myModal" data-toggle="modal" id="parentLink" data-variable = "123">

我建议使用json_encode将父项的php数组转换为json数组,然后你就可以访问该数组的成员以显示在你的模态中。像这样:

$('#parentLink').click(function(){

       var parents_info = <?php echo json_encode($parents); ?>
       var i = $(this).data("variable");

       $(.modal-body).html(parents_info[i].mobile + " " + parents_info[i].email);
    }