CakePHP добавляет действие в модальное окно Jquery

Я использую 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>

I have included ajax call for saving data. The code for javascript as below.

    $('#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. Это то, что я пишу, правильно или если это неправильно, пожалуйста, предложите мне несколько решений. Работа ценится больше.


person Sanganabasu    schedule 07.02.2013    source источник


Ответы (1)


Location.reload(), скорее всего, виноват. Самый чистый способ сделать это — получить визуализированный HTML вместо JSON из вызова POST и заменить им содержимое диалога. Таким образом, вы предоставляете создание формы 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);
        }
    });
});
person nanoman    schedule 11.03.2013