调用模式窗体时,Bootbox无法正常工作

时间:2015-10-11 06:14:58

标签: javascript forms modal-dialog bootbox

我使用bootbox模式来调用模态表单,但表单不是作为模态出现的。点击撰写时没有任何反应。我想在点击撰写按钮后在模型中打开一个表单,但它不起作用。

<a  class="btn btn-block btn-compose btn-lg" id="loginButton"><i class="fa fa-" ></i> Compose Mail </a>
<!-- The login modal. Don't display it initially -->
<form id="loginForm" method="post" class="form-horizontal" style="display: none;">
    <div class="form-group">
        <label class="col-xs-3 control-label">To</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="to" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-3 control-label">Subject</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="ssubject" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Message</label>
        <div class="col-xs-5">
            <textarea name="smessage" class="form-control"></textarea>          
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-5 col-xs-offset-3">
            <button type="submit" class="btn btn-default">Send</button>
        </div>
    </div>
</form>     

这是html表单,java脚本文件放在同一页面inbox.php

$(document).ready(function() {
$('#loginForm').formValidation({
    framework: 'bootstrap',
    icon: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        to: {
            validators: {
                notEmpty: {
                    message: 'Please type destination bo'
                }
            }
        },
        ssubject: {
            validators: {
                notEmpty: {
                    message: 'Please type subject'
                }
            }
        },
        smessage: {
            validators: {
                notEmpty: {
                    message: 'Please type some message'
                }
            }
        }
    }
});

// Login button click handler
$('#loginButton').on('click', function() {
    bootbox
        .dialog({
            title: 'Compose Message',
            message: $('#loginForm'),
            show: true // We will show it manually later
        })
        .on('shown.bs.modal', function() {
            $('#loginForm')
                .show()                             // Show the login form
                .formValidation('resetForm', true); // Reset form
        })
        .on('hide.bs.modal', function(e) {
            // Bootbox will remove the modal (including the body which contains the login form)
            // after hiding the modal
            // Therefor, we need to backup the form
            $('#loginForm').hide().appendTo('body');
        })
       .modal('show');


 });
});
</script>



<script>
$(document).ready(function() {
    $('#loginForm').on('success.form.fv', function(e) { 
        // Prevent form submission
        e.preventDefault();

        var $form     = $(e.target),
            validator = $form.data('formValidation'),
            username  = validator.getFieldElements('username').val();   
        // Hide the modal containing the form
        $form.parents('.bootbox').modal('hide');

        // Show the welcome dialog

        // Use Ajax to submit form data
        $.ajax({
            //url: $form.attr('action'),
            url: 'test/send.php',
            type: 'POST',
            data: $form.serialize(),
            success: function(result) {
                //alert(result);
                //bootbox.alert('Welcome back, ' + username);
                bootbox.alert(result);
                window.location.reload();
            }
        });
    });
});
</script>

这里是test / send.php代码。

<?php
$from="0";
$to=$_POST["to"];
$subject=$_POST["ssubject"];
$message=$_POST["smessage"];
//echo $to.$message;
//validate before insert
if(strlen($subject)>50){
    echo "Subject was too long";
    die();
}
if(strlen($message)>150){
    echo "Message was too long";
    die();
}
include('../dbsource.php');
$mysqli=connect();
if(insert($mysqli,$from,$to,$subject,$message)>0)
    echo "Message was sent";
else
    echo "Message was not sent";
?>


<?php
function insert($mysqli,$from,$to,$subject,$message){   
    $mdate=date('Y-m-d');
    $mtime=date('H:i:s');

    $query = "INSERT INTO messages (mfrom,mto,subject,message,mdate,mtime)".
        "VALUES ('$from','$to','$subject','$message','$mdate','$mtime')";
    if($mysqli->query($query)>0)
        return($mysqli->insert_id);
    else
        return 0;
}
?>

模态不会出现。
我不知道为什么模态没有出现在这个项目中。 有谁能够帮我 ?  控制台出错:

enter image description here

0 个答案:

没有答案