Question

我使用MVC框架CodeIgniter，FullCalendar，Bootstrap和Jquery来创建网站。

日历包含可点击的事件，可打开包含表单的模式对话框表单似乎有效，因为控制器方法被正确调用并且数据库已更新，但我想避免网站转到另一页或在提交表单后重新加载。
我尝试了几种方法：

e.preventDefault();
return false;

以及更多......

这里是关于模态对话框和表单的HTML：

            <div class="modal-body">
                <form id="myForm" action="<?=base_url()?>index.php/activite/planning_people" method="post">
                    <input type="hidden" id="date" name="date"/>
                    <input type="hidden" id="id" name="id"/>
                    <?php foreach ($people as $person) : ?>
                        <div class="checkbox">
                            <label><input type="checkbox" value="<?=$person['number']?>" name="people[]"><?= $person['firstname']." ".$person['lastname'] ?></label>
                        </div>
                    <?php endforeach; ?>
            </div>

            <div class="modal-footer">
                    <input class="btn btn-lg" type="submit" id="submitButton" value="Validate">
                </form>
            </div>

<div class="container">
    <div id="bootstrapModalFullCalendar"></div>
</div>

这是eventClick事件的javascritpt：

    eventClick:  function(event) {
        var inputs = document.getElementsByTagName('input');

        $('#modalTitle').html(event.title+" "+moment(event.start).format('LL'));
        $('#id').val(event.id.split(" ")[0]);
        $('#date').val(event.id.split(" ")[1]);
        $('#fullCalModal').modal();
    }
});

$('#submitButton').submit(function(e) {
    e.preventDefault();
    $.ajax({
        url: "<?=base_url("index.php/activity/planning_people")?>",
        type: "POST",
        data: $("myForm").serializeArray(),
        success: function(data){
            alert(data);
        },
    });
    return false;
});

此外，未显示成功提示。

控制器重定向到空白页：

public function planning_people() {
    $people = $this->input->post("people[]");
    $id = $this->input->post("id");
    $date = $this->input->post("date");
    $this->EZ_query->delete_planning($id, $date);

    if ($people != null) {
        foreach ($encadrants as $key => $no) {
            $this->EZ_query->add_planning($id, $date, $no);
        }
    }
}

我的问题已经解决了很多次，并且我已经检查了很多相同问题的stackoverflow页面但没有成功。请帮忙！
感谢

Answer 1

第一名：您需要将submit用于表单而不是submit button

$('#myForm').submit(function(e) {

而不是

$('#submitButton').submit(function(e) {

第二名：您在# ID

之前忘记了myForm。

data: $(this).serializeArray(), // or data: $("#myForm").serializeArray(),

而不是

data: $("myForm").serializeArray(),

在表单提交后停止JS重新加载页面

1 个答案: