引导模式:未定义

Bootstrap Modal: Undefined

本文关键字:未定义 模式      更新时间:2023-09-26

我试图在我的网站上添加一个模态,当表单的"名称"字段为空时,该模态会出现,以通知用户。

到目前为止,我拥有的是:

<div id="myModal-winner" class="modal fade">
    <div class="modal-dialog">
       <div class="modal-content">
          <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">There is a Problem!</h4>
            </div>
            <div class="modal-body">
                 <p>Please Enter Name of Winner.</p>
             </div>
             <div class="modal-footer">
                <button type="button" class="btn btn-info" data-dismiss="modal">Ok</button>
             </div>
        </div>
    </div>
 </div>

如果Name为空,则应显示模态的JS:

//when user clicks on the "submit" button
    form.submit({point: point}, function (event) {
        //prevent the default form behavior (which would refresh the page)
        event.preventDefault();
        //form validation
        if( !$("input[name=name]", this).val() ) {
          $("#myModal-winner").modal('show');
        }
        //put all form elements in a "data" object
        var data = {
            name: $("input[name=name]", this).val(),
            address: $("textarea[name=address]", this).val(),
            about: $("textarea[name=about]", this).val(),
            month: $("select[name=month]",this).val(),
            year: $("select[name=year]",this).val(),
            lat: event.data.point.overlay.getPosition().lat(),
            lon: event.data.point.overlay.getPosition().lng()
        };
        trace(data)
        //send the results to the PHP script that adds the point to the database
        $.post("addwinner.php", data, tidy_maps.saveStopResponse, "json");

但控制台返回:Uncaught TypeError: undefined is not a function,在线:

  $("#myModal-winner").modal('show');

这是带有提交按钮的表单:

 <div class="winner-add">
<form class="form-horizontal winner-form" method="post" style="display: none" action="addwinner.php">
    <h4>Add Winner</h4>
    <img src="" >
    <fieldset>
        <label for="name">
            <span>Event Name :</span>
            <input id="name" type="text" name="name" placeholder="Enter Name of Winner" />
        </label>
        <label for="address">
            <span>Description :</span>
            <textarea id="address" name="address" placeholder="Address of Winner"></textarea>
        </label>
        <label for="about">
            <span>Description :</span>
            <textarea id="about" name="about" placeholder="Details of Award"></textarea>
        </label>
        <label for="image">
            <span>Upload a Photo:</span>
            <input type="file" id="image" name="image" />
        </label>
        <hr>
        <div class="form-actions">
            <input name="Save" type="submit" class="btn btn-success btn-sm" value="Save">
        </div>
    </fieldset>
</form>

我同意Jarod的观点,看起来jQuery没有被加载。确保在引导程序的脚本标记正上方有<script src="path_to_jquery"></script>

或者,如果你的项目文件夹中没有jQuery,你可以从互联网上获取:<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

这是一个jQuery问题。我在这里的"MyModal赢家"中出现拼写错误:

<script type="text/javascript">
    $(document).ready(function(){
        $("#myModal-winner").modal('hide');
    });
</script>

此外,在jQuery之前加载Bootstrap导致了2之间的冲突,所以现在我在Bootstrap之前加载了jQuery。