Question

我正在使用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次验证错误。这是我写的是正确的或如果它是错的，请建议我一些解决方案。这项工作更受赞赏。

Answer 1

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);
        }
    });
});

CakePHP在Jquery模式窗口中添加动作

1 个答案: