Window Modal does not work - Printable Version

Window Modal does not work - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: General (https://forum.codeigniter.com/forumdisplay.php?fid=1)
+--- Forum: Lounge (https://forum.codeigniter.com/forumdisplay.php?fid=3)
+--- Thread: Window Modal does not work (/showthread.php?tid=73807)

Pages: 1 2

RE: Window Modal does not work - RRIOS - 06-11-2019

(06-10-2019, 06:36 PM)hamanalda Wrote: Is the modal window called?
$('#myModal').on('show.bs.modal', function (event) {
     console.log('myModal show~~~~~~~');
})
$('#myModal').modal();

If the call does not work
<script>
$(document).ready(function(){
    function on_ready() {
        $('#myModal').on('show.bs.modal', function (event) {
            console.log('myModal show~~~~~~~');
        })
        $('#myModal').modal();
    }
    on_ready();
});
</script>

If called, Test it with the following code

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </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>
https://getbootstrap.com/docs/3.4/javascript/#modals

Good luck~

Hello. Is it for me to test this code first? Without the <script> tag?
How to test this?

Code:
Is the modal window called?

$('#myModal').on('show.bs.modal', function (event) {

     console.log('myModal show~~~~~~~');

})

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

This second part is to be used along with html bootstrap below, ok?
Sorry, but I do not understand: the first code is for me to test how?
The first and second scrip JS are the same, correct?

RE: Window Modal does not work - RRIOS - 06-11-2019

Using the inspect code I saw this error."validator.min.js:9 Uncaught ReferenceError: jQuery is not defined at"
Well, from what I understand I have to call jquery.js first of all. But it's embedded in the html_header.html, which is always called to mount the screen.

html_header.html
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">

<title>Sistema Escolar Integrado - SEI.</title>




<link href="<?php echo base_url();?>assets/css/dashboard.css" rel="stylesheet">
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/popper.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/bootstrap-modal.js"></script>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

RE: Window Modal does not work - RRIOS - 06-11-2019

SORTED OUT
Excuse me. The header.php file path was wrong and so was loading an outdated file.

RE: Window Modal does not work - hamanalda - 06-11-2019

Check the console tab

(06-11-2019, 07:25 AM)RRIOS Wrote: ...

RE: Window Modal does not work - InsiteFX - 06-16-2019

In your web browser hit F12 for the Developer tools then click on console to see
what it is doing.

Plus why are you using Bootstrap 3.3.6 when Bootstrap 3.4.1 has been released?

RE: Window Modal does not work - Piotr - 06-16-2019

Instead of this

Code:
$('#myModal').modal();

you should use

Code:
$('#myModal').modal('show');

RE: Window Modal does not work - InsiteFX - 06-17-2019

Here are some examples on how to do it.

Dynamically load content in Bootstrap Modal with AJAX

Ajax dynamic data load process in codeigniter with Bootstrap modal

RE: Window Modal does not work - RRIOS - 06-17-2019

(06-17-2019, 08:35 AM)InsiteFX Wrote: Here are some examples on how to do it.

Dynamically load content in Bootstrap Modal with AJAX

Ajax dynamic data load process in codeigniter with Bootstrap modal

Thank You !

RE: Window Modal does not work - johnmark10 - 10-25-2019

But its not working, getting the same error.

--------------------------------
Regards,
BBBootstrap
(Codeigniter lover)