关于php：动态地将引导模式部分视图插入视图


Dynamically inserting a bootstrap modal partial view into a view

我有一个bootstrap 2.32模态形式，它很长(请参阅下文)。我想将其实现为一个单独的局部视图，以动态地插入另一个视图的HTML中(出于可维护性)，但是我不确定到底该怎么做。我正在使用Codeigniter 2.1。

主视图的按钮是：

1
<p>Modal powers, activate!</p>

这是我想作为局部视图单独存储的内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
        ×
        Send me a message
   
   
        <form class="contact" name="contact">
             <fieldset>

               <!-- Form Name -->

            <legend>modalForm</legend>

            <!-- Text input-->
           
              <label class="control-label" for="user">User</label>
             
                <input id="user" name="user" type="text" placeholder="User" class="input-xlarge" required="">
                <p class="help-block">help</p>
             
           

            <!-- Text input-->
           
              <label class="control-label" for="old">Old password</label>
             
                <input id="old" name="old" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
             
           

            <!-- Text input-->
           
              <label class="control-label" for="new">New password</label>
             
                <input id="new" name="new" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
             
           

            <!-- Text input-->
           
              <label class="control-label" for="repeat">Repeat new password</label>
             
                <input id="repeat" name="repeat" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
             
           



                </fieldset>
        </form>
   


   
        <input class="btn btn-success" type="submit" value="Send!" id="submit">
        Nah.

您可以在需要加载"局部"视图的视图中的任何位置执行此操作。

1
$this->load->view('modal_view');

编辑：加载动态内容

在此示例中，我将使用jQuery AJAX调用来动态检索视图。

在您看来，您必须包括一个目标div才能插入AJAX响应。

1
 

用于加载模态和显示的按钮。

1
<button type="button" class="btn btn-primary btn-medium" onclick="get_modal();">Show Modal</button>

发挥神奇作用的javascript函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
    function get_modal(){
        $.ajax({
            type    : 'POST',
            url     : '<?php base_url() ?>controler/get_modal',
            cache   : false,
            success : function(data){
               if(data){
                    $('#modal_target').html(data);

                    //This shows the modal
                    $('#form-content').modal();
               }
            }
        });
    }

您还必须在Contoller中包含在AJAX中调用的功能

1
2
3
4
public function get_modal()
{
    $this->load->view('modal_view');
}
相关讨论