如何显示freeow或模态警报 - How to show freeow or modal alert?

我想使用Freeow或Modal警报显示错误。PHP使用AJAX来填充一些选择输入下拉列表。我使用noConflict并为每个插件创建一个变量（Freeow和Modal）。

JavaScript警报有效，但显示Freeow或Modal的调用不起作用。我做错了什么？

            <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">&times;</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>

我检查了freeow演示页面上的JS文件demo.JS，并与您问题中的代码进行了比较。如gre_gor所述，<script>标签添加在<html>标签之外。将它们移动到HTML中（在<head>或<body>标记中），以使JavaScript正常运行。

此外，JavaScript代码应该等到文档准备好（例如，在DOMContentLoaded事件之后），然后再尝试使用freeow扩展。jQuery的.ready（）可以用于此。

我添加的主要更改是包装JavaScript以调用以下块中的freeow方法：

(function ($) {
    $(document).ready(function() {
        //code here to utilize the freeow extensions
        jq("#freeow").freeow("My Title", "Here's a message");
        //etc...
    });
)(jq);

请参阅下面片段中的演示。

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">&times;</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>