Member Avatar for iamthwee

Hi guys,

I'm a bit stuck, I'm using the twitterbootstrap modal window 3.0 but I want to get it working with ajax.

So for example you click submit then it queries the database and returns the info in the modal window.
I can provide the code if needed.

  • 2 Contributors
  • 1 Reply
  • 451 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by veedeoo
Member Avatar for veedeoo

just create a method for the modal, for example let's use the most common example of bootstrap modal.

View page

<head>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#myModal").modal('show');
      });
    </script>

 </head>
 <body>
 <!-- the modal. Again, there is nothing here that I wrote, except I added something for the jquery to catch, else the rest of the codes are default in bootstrap 3-->

 <a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal">Launch Demo Modal</a>
<!-- Bootstrap trigger to open modal -->
<div id="myModal" class="modal fade">

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Confirmation</h4>
            </div>

            <div class="modal-body">

 <form class="form-horizontal well" data-async data-target="#result" action="<?php echo $base_url(); ?>modalcontroller/modal_response" method="POST">

<fieldset>
<!-- form content -->
 <label>Test</label><input type="text" name="text"/>
 <input type="submit" name="submit" value="submit">
</fieldset>
</form>

<!-- this is our target div where the response from the controller's method will show up -->
<div id="result"></div>

  </div>
      <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<!-- end of test modal -->

we add our jquery

<script>

jQuery(function($) {
$('form[data-async]').on('submit', function(event) {
var $form = $(this);
var $target = $($form.attr('data-target'));

$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),

success: function(data, status) {
$target.html(data);
}
});

event.preventDefault();
});
});
</script>

we create our simple modalcontroller and modal_response method

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

    class Modalcontroller extends CI_Controller {

        public function __construct(){
            parent::__construct();

        }

        /*
        * we create our modal_response method
        */

        public function modal_response(){
            ## we load our form helper
            $this->load->helper('form');

            ## we assign the submitted form input to a variable
            $text = $this->input->post('text');
            if(isset($text)){
                echo $text.'<br/>';

                ## start testing and make sure the results are consistent.

            }
        }

   } //end of controller

if the result is being posted on the modal, we can create the Modalmodel. Assuming that that database library has been loaded.

class Modal_model extends CI_Model {

    public function __construct(){
        parent::__construct();

    }

    public function get_modal_items(){

        ## perform database query here
        $res = "results"; //some database resulst

        return($res); // if this is the case, the cotroller must iterate them for the modal window.

    }

    } //end of the modal_model.

that's pretty much it...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.