2

I have a bootstrap 2.32 modal form which is kind of long ( see below ). I'd like to implement this as a separate partial view to be dynamically inserted in the HTML of another view ( for maintainability ), but I'm not sure exactly how to do this. I'm working with Codeigniter 2.1.

The button of the main view is:

<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>

Here is what I'd like to store separately as a partial view:

<div id="form-content" class="modal hide fade in" style="display: none;">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Send me a message</h3>
    </div>
    <div class="modal-body">
        <form class="contact" name="contact">
             <fieldset>

               <!-- Form Name -->

            <legend>modalForm</legend>

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

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

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

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



                </fieldset>
        </form>
    </div>


    <div class="modal-footer">
        <input class="btn btn-success" type="submit" value="Send!" id="submit">
        <a href="#" class="btn" data-dismiss="modal">Nah.</a>
    </div>
</div>
user1592380
  • 34,265
  • 92
  • 284
  • 515

1 Answers1

2

You can do this in any point into a view where you need to load the 'partial' view.

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

EDIT: Load dynamic content

In this example I will use an jQuery AJAX call to retrieve the view dynamically.

In your view you have to include a target div to insert the AJAX response.

<div id="modal_target"></div>

The button to load the modal and show.

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

The javascript function that do the magic

<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();
               }
            }
        });
    }
</script>

You have also to include in your contoller the function called in AJAX

public function get_modal()
{
    $this->load->view('modal_view');
}
Daniel
  • 233
  • 3
  • 11
  • Right, but how do I insert the modal in dynamically, only when the button is pushed? The only examples I've seen have the modal text already in the base view but Hidden until the activation. button is pushed. – user1592380 Nov 19 '14 at 18:12
  • ` – Daniel Nov 19 '14 at 18:16
  • If you realy want to load it dynamically I can edit the response to load it with AJAX, but is overingeneering the problem. At the end you are adding the html in the document. – Daniel Nov 19 '14 at 18:21
  • I understand, the main reason for having a partial view is for maintenance and seperation, so I'd be interested to see how you do it with JS – user1592380 Nov 19 '14 at 19:38