doudou0111 2015-11-08 01:56 采纳率: 0%
浏览 48

如何显示freeow或模态警报？

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">&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>
  • 写回答

1条回答 默认 最新

  • dpub33855 2016-01-27 08:32
    关注

    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">&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>

    </div>
    评论

报告相同问题？

悬赏问题

  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥170 如图所示配置eNSP
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏！微信开发者工具报错，求帮改
  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题：需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持