0

我正在使用 cakephp 2.1，并且我已经为类别控制器编写了添加操作。我在其中包含用于添加类别形式的 jquery 模态窗口。

模态代码如下。

<!-- Modal -->
<div id="AddModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
        &#215;
    </button>
    <h3 id="myModalLabel">Add Category</h3>
</div> 
<div class="modal-body">
    <?php echo $this -> Form -> create('Stock'); ?>
        <fieldset>
                <div class="control-group">
                     <?php echo $this -> Form -> label('Name'); ?>
                     <div class="controls">
                         <?php echo $this -> Form -> text('InventoryCategory.name', array('class' => 'input-xlarge', 'placeholder' => 'Enter Category name here...', 'required' => false)); ?>
                         <?php echo $this -> Form -> error('InventoryCategory.name', array('class' => 'error-message')); ?>
                     </div>
                 </div>
                 <div class="control-group">
                     <?php echo $this -> Form -> label('Parent Category'); ?>
                     <div class="controls">
                         <?php echo $this -> Form -> select('InventoryCategory.inventory_category_id', null, array('value' => '', 'class' => 'input-xlarge')); ?>
                         <?php echo $this -> Form -> error('InventoryCategory.inventory_category_id', array('class' => 'error-message')); ?>
                     </div>
                 </div>
                 <div class="control-group">
                     <?php echo $this -> Form -> label('Description'); ?>
                     <div class="controls">
                         <?php echo $this -> Form -> textarea('InventoryCategory.description', array('class' => 'input-xlarge', 'rows' => '3', 'placeholder' => 'Some description or notes goes in here....')); ?>
                         <?php echo $this -> Form -> error('InventoryCategory.description', array('class' => 'error-message')); ?>
                     </div>
                 </div>
                 <div class="control-group">
                    <div class="controls">
                        <?php echo $this -> Form -> button('Submit', array('class' => 'btn btn-primary')); ?>
                    </div>
                </div>
        </fieldset>
    <?php echo $this -> Form -> end(); ?>
</div>

我已经包含了用于保存数据的 ajax 调用。javascript的代码如下。

    $('#AddModal').on('shown', function() {
        $.getJSON('<?php echo $this->Html->url(array('controller'=>'stocks', 'action'=>'categories', true)); ?>', function(data) {
            var options = '';
            $.each(data, function(key, value) { 
                options += '<option value="' + key + '">' + value + '</option>';
            });
            $("#InventoryCategoryInventoryCategoryId").html(options);
        })
    });

    $('#StockCategoriesForm').submit(function(e) {
        e.preventDefault();

        var name    = $("#InventoryCategoryName").val();
        var categoryId  = $("#InventoryCategoryInventoryCategoryId").val();
        var description   = $("#InventoryCategoryDescription").val(); 

        $.ajax({
            url: "<?php echo $this->Html->url(array('controller'=>'stocks', 'action'=>'add_category'))?>",
            type: "POST",
            cache: false,
            data: '{"InventoryCategory":{"name":"'+name+'", "categoryId": "'+categoryId+'", "description": "'+description+'"}}', // here build JSON object with your form data
            dataType: "json",
            contentType: "application/json",
            complete: function(result) {
                console.log(result);
                if(result.response == true) {
                    $("#InventoryCategoryName").val(null);
                    $("#InventoryCategoryInventoryCategoryId").val(null);
                    $("#InventoryCategoryDescription").val(null);
                    location.reload();
                    $('#AddModal').modal('hide');
                    alert('inserted');
                } else {
                    alert('not inserted');
                }
            }
        });
    });

类别正在保存，但模式本身并没有关闭，我只想要Cakephp Model验证错误Jquery Modal。这是我写的正确还是错误的，请给我一些解决方案。作品更受赞赏。

4

1 回答 1

2

location.reload() 很可能有问题。最简洁的方法是从 POST 调用中获取呈现的 HTML 而不是 JSON，并用它替换对话框内容。这样您就可以将表单构建留给 CakePHP。

成功后，您可以例如返回一个带有“关闭”按钮的窗口，或者嵌入一个关闭模式的标签。

var $form = $('#StockCategoriesForm');
$form.submit(function(e) {
    e.preventDefault();
    $.ajax({
        url: "<?php echo $this->Html->url(array('controller'=>'stocks', 'action'=>'add_category'))?>",
        type: "POST",
        cache: false,
        data: $form.serialize(),
        complete: function(result) {
            $('#AddModal').html(result);
        }
    });
});
于 2013-03-11T14:54:57.203 回答