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></div>