I want to show errors using Freeow or Modal alert. The PHP is using AJAX to fill some select input dropdowns. I'm using noConflict and creating one variable for each plugin (Freeow and Modal).
The JavaScript alert works, but the call to show Freeow or Modal doesn't work. What am I doing wrong?
<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript" src="../jQuery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="../bootstrap/3.1.1/js/bootstrap.js"></script>
<script type="text/javascript" src="../bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript"> var jq = jQuery.noConflict(); </script>
<script type="text/javascript"> var jm = jQuery.noConflict(); </script>
<script type="text/javascript" src="../Freeow/jquery.freeow.min.js"></script>
<?PHP if ($valid === false) { ?>
<script>
alert("before Freeow call");
jq("#freeow").freeow("My Title", "Here's a message");
alert("before modal call");
jm('#myModal').modal('show');
</script>
<?PHP } ?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="../bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="../bootstrap/3.1.1/js/bootstrap.js" rel="stylesheet">
<link href="../bootstrap/3.1.1/js/bootstrap.min.js" rel="stylesheet">
<link href="../Freeow/style/freeow/freeow.css" rel="stylesheet" type="text/css" >
</head>
<body>
<div id="freeow" class="freeow freeow-top-right"></div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
I inspected the JS file demo.js on the freeow demo page and compared with the code in your question. As gre_gor mentioned, the <script> tags are added outside the <html> tags. Move those inside the HTML (either in the <head> or <body> tag) in order to have the JavaScript run properly.
Additionally, the JavaScript code should wait until the document is ready (e.g. after the DOMContentLoaded event) before trying to utilize the freeow extensions. jQuery's .ready() can be used for that.
The major change I added was wrapping the JavaScript to call the freeow method in the following block:
(function ($) {
$(document).ready(function() {
//code here to utilize the freeow extensions
jq("#freeow").freeow("My Title", "Here's a message");
//etc...
});
)(jq);
See the demonstration in the snippet below.
var jq = jQuery.noConflict();
(function($) {
$(document).ready(function() { //wait until DOM is ready
console.log("before Freeow call");
jq("#freeow").freeow("My Title", "Here's a message");
console.log("before modal call");
jm('#myModal').modal('show');
});
})(jq);
<script data-require="prototype#*" data-semver="1.7.1+0" src="//cdnjs.cloudflare.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script data-require="jquery#*" data-semver="1.9.1" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link data-require="bootstrap#3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://web.archive.org/web/20160410115841/http://pjdietz.com/includes/component/jquery-plugins/freeow/jquery.freeow.min.js"></script>
<link rel="stylesheet" href="https://web.archive.org/web/20160410134722/https://pjdietz.com/includes/component/jquery-plugins/freeow/style/freeow/freeow.css" />
<script type="text/javascript">
var jq = jQuery.noConflict();
</script>
<script type="text/javascript">
var jm = jQuery.noConflict();
</script>
<div id="freeow" class="freeow freeow-top-right"></div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Related
.daterangepicker {
SingleDatepicker: true,
showdropdowns: true,
autoupdateinput: true,
parentE1: #modaldialogid
}
I have an input textbox with a calendar in a button. This textbox with calendar in a button will be shown in a modaldialog box which is popping from jQuery.
Also the above code snippet is called in the client side scripting for the calendar textbox.
Issue: modal dialog box is getting closed on click of the textbox near the calendar control but whereas the calendar button is clicked this issue doesn't occur and am getting the calendar dropdown.
I think it is due to the ID entered in the parentE1: parameter. How to show the input id without #
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
html, body, .modal-content{
height: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div>
<input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
</script>
</body>
</html>
I am trying make a dialog box using model. But I am not getting an output. Here is my code
Header Files
<head id="Head1" runat="server">
<title></title>
<link href="css/jquery-ui.css" rel="stylesheet" />
<script src="js/jquery-3.1.1.js"></script>
<script src="js/jquery-ui.js"></script>
<%--<script src="js/jquery-ui.min.js"></script>--%>
<script src="js/Report-Filter.js"></script>
<script src="js/ReportTotalSalesPivot.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/jquery-ui.min.css" rel="stylesheet" />
<link href="css/Accordian-Hide-Show.css" rel="stylesheet" />
<script src="js/Accordian-Hide-Show.js"></script>
<link href="css/ReportTotalSalesPivot-style.css" rel="stylesheet" />
</head>
Inside Body
<input id="btnSave opener" class="btn btn-info" type="button" value="SAVE" />
<div id="wrapper">
<p>Some txt goes here</p>
</div>
Jquery code
$(document).ready(function () {
$('#wrapper').dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function () {
$('#wrapper').dialog('open');
return false;
});
});
Please don't suggest this fiddle. From here only i got the code. I think the problem with arranging links in head tag.
I got error message. I think that error is not related to this model.
Error msg
jquery-3.1.1.js:6170 GET http://localhost:55047/css/images/ui-icons_444444_256x240.png 404 (Not Found)
Change the button id to one without spaces. You cannot use a space inside an id. It looks like you are using it in the same way as class, where you can add multiple values.
<input id="btnSave" class="btn btn-info" type="button" value="SAVE" />
Then the modal will open if you modify the jQuery listener.
$('#btnSave').click(function () {
$('#wrapper').dialog('open');
});
And those images you are missing can be downloaded here. They are included in the UI download.
You need to arrange the Header Tag like below. Below are working code. Header file sequence is important.
<html>
<head>
<title>Bootstrap Modal PopUp</title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#showmodal").click(function () {
$('#myModal').modal('show');
});
});
</script>
</head>
<body>
<button id="showmodal" class="btn btn-info btn-lg" type="button">Open Modal</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
This is the test modal pop-up.
</div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button></div>
</div>
</div>
</div>
</body>
</html>
I'm currently a beginner in Bootstrap Modals. I just want to ask why the external URL is not appearing in the modal?
Here's an example about what I'm trying to do:
http://www.screencast.com/t/YLWJeAwkPK
Here is the whole HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Modals with Remote URL</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<script type="text/javascript" charset="utf-8">
$('a.btn').on('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$(".modal-body").html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"></iframe>');
});
</script>
<body>
<a data-toggle="modal" class="btn" href="http://www.bing.com" data-target="#myModal">click me</a>
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
</div>
</div>
</body>
</html>
The code came from http://jsfiddle.net/f2Fcd/. I've just copy and paste it and explore it. Does anyone know what's wrong with the code? Or maybe I've missed something? Thank you very much for your response. :)
I have a view and with this code in the head.
$(document).ready(function() {
$('#myModal').modal('show');
}
and the following HTML:
<div id="myModal" class="modal hide" role="dialog">
</div>
The controller has:
class Home extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->library('session');
}
public function index() {
$this->load->view('home');
}
}
When I run the view the modal does not appear. I am new CodeIgniter and do not understand why the modal does not work by simply running the index.php/home.
I am loading the bootstrap.js file in the footer in the correct order with jQuery. I have a Bootstrap alert working.
Is there a Library or Helper that has to be loaded in the controller?
I do not see any html or body tags on your view. Also not really to do any thing with codeigniter it self.
Here is script for auto show bootstrap on page load
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
And The View
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</html>
For some reason I am having trouble firing a bootstrap modal, below is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="http://localhost/scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="modal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
<button id="button">Fire</button>
<script src="http://localhost/scripts/bootstrap/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$("#button").click(function(){
$('#modal').modal('show');
});
});
</script>
</body>
</html>
You have to include the bootstrap library after the jQuery library. Did you bother checking your browser's console for any errors?