CodeIgniter Forums

Full Version: Window Modal does not work
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
(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
<!-- Modal -->
<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">&times;</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?
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>

<!-- Principal CSS do Bootstrap
<link href="<?php echo base_url();?>dist/css/bootstrap.min.css" rel="stylesheet">-->

<!-- Estilos customizados para esse template -->
<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>
SORTED OUT
Excuse me. The header.php file path was wrong and so was loading an outdated file.
Check the console tab
(06-11-2019, 07:25 AM)RRIOS Wrote: [ -> ]...
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?
Instead of this

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


you should use

Code:
$('#myModal').modal('show');
(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 !
But its not working, getting the same error.

--------------------------------
Regards,
BBBootstrap
(Codeigniter lover)
Pages: 1 2