Can't close bootstrap modal called from a controller

Can't close bootstrap modal called from a controller - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: Can't close bootstrap modal called from a controller (/showthread.php?tid=57471)

Can't close bootstrap modal called from a controller - El Forum - 03-17-2013

[eluser]Cgull[/eluser]
Hello,

I have a problem with bootstrap and codeigniter.

Hope someone can help.

I have a view called homepage with a link in it:

Code:
<a href="&lt;?php echo site_url('page/backissues/thinklocal/') . '/' . $province-&gt;id; ?&gt;">View Back Issues</a>

This view is calling this controller function:

Code:
public function backissues()

 {

  $magazine = $this->uri->segment(3);

  $province_id = $this->uri->segment(4);

  $this->load->model('province_m');

  $this->load->model('province_issues_m');

  $province = $this->province_m->get($province_id);

  $this->data['folder'] = $province->folder;

  $this->data['issues'] = $this->province_issues_m->get_backissues($province_id);

  $this->data['subview'] = 'backissues';

  $this->load->view('_modal_layout', $this->data);

 }

The _modal_layout view looks like this:

Code:
&lt;?php $this->load->view('components/page_head'); ?&gt;

 &lt;body  #555;"&gt;

  <div id="myModal" class="modal show" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

   &lt;?php $this->load->view($subview); // Subview is set in controller ?&gt;

   <div class="modal-footer">

       <button class="btn" id="myclose" data-dismiss="modal" aria-hidden="true">Close</button>

    <p  center">&copy; &lt;?php echo date('Y'); ?&gt; &lt;?php echo config_item('site_name'); ?&gt;</p>

   </div>

  </div>

 [removed]

 $(function() {

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

   $('#myModal').hide();

  });

 });

 [removed]

  &lt;/body&gt;

&lt;/html&gt;

The backissues view:

Code:
<div class="modal-header">

  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>

    <h2 id="myModalLabel">View Back Issues</h2>

  </div>

  <div class="modal-body">

    &lt;?php if($issues): ?&gt;

    <table class="table table-hover">

    &lt;?php foreach($issues as $issue): ?&gt;

      <thead>

        <tr>

          <th>Issue Date</th>

          <th>View Issue</th>

        </tr>

      </thead>

      <tbody>

        <tr>

          <td>&lt;?php echo mdate('%d/%m/%Y', strtotime($issue->issue_date)); ?&gt;</td>

          <td><img class="thumb" src="&lt;?php echo site_url('uploads/issues') . '/' . $folder . '/thinklocal/img/' . $issue-&gt;thinklocal_img; ?&gt;" /></td>

        </tr>

      </tbody>

    &lt;?php endforeach; ?&gt;

    </table>

    &lt;?php else: ?&gt;

    <p>No back issues were found for this province.</p>

    &lt;?php endif; ?&gt;

 </div>

When I click the close button on the modal, the modal closes but it does not go back to the homepage view, I just see a grey screen.

If I remove the modal.hide() script, nothing happens when I click the close button.

So how can I close the modal window?

Thank you.

Can't close bootstrap modal called from a controller - El Forum - 03-17-2013

[eluser]TheFuzzy0ne[/eluser]
Your HTML isn't valid, so that might be a good place to start.

http://validator.w3.org

Can't close bootstrap modal called from a controller - El Forum - 03-17-2013

[eluser]Cgull[/eluser]
Checked my file:

Line 14, Column 56: Bad value X-UA-Compatible for attribute http-equiv on element meta.

<meta http-equiv="X-UA-Compatible" c />

✉
Error Line 34, Column 121: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

…calhost/thinklocal/uploads/issues/freestate/thinklocal/img/dec2012.jpg" /></td>

Don't think that should stop the modal from closing?

Also, now it is closing but I don't go back to the screen that calls it, I just get a grey screen.

Can't close bootstrap modal called from a controller - El Forum - 03-17-2013

[eluser]davidMC1982[/eluser]
It doesn't go back to your homepage because you redirected away from it when the user clicked this link on your homepage:

Code:
<a href="&lt;?php echo site_url('page/backissues/thinklocal/') . '/' . $province-&gt;id; ?&gt;">View Back Issues</a>

So now you've gone to a page "backissues" that contains nothing more than the modal. When the modal is closed (which really just does something like display:none in css), you are rightfully shown what amounts to an empty html document.

I guess what you're trying to do is have a modal popup on your homepage that displays the backissues? To do this you'll want to make your backissues function return the html for the modal body content:

Code:
echo $this->load->view('_modal_layout', $this->data, TRUE);

And your link on your homepage will be something like this:

Code:
<a data-toggle="modal" data-target="#modal" href="&lt;?php echo site_url('page/backissues/thinklocal/'  . $province-&gt;id); ?&gt;">View Back Issues</a>

And you'll need to have the rest of the html for your modal in your homepage also.

Read here, paying attention to the options section:

http://twitter.github.com/bootstrap/javascript.html#modals

Can't close bootstrap modal called from a controller - El Forum - 03-17-2013

[eluser]Cgull[/eluser]
Hi davidMC,

Thank you very much for the help.

I did read the bootstrap page a few times before posting here, somehow didn't get it.

It works great now.

God bless you Smile