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

Я использую cakephp 2.1, и я написал команду add для контроллера категорий. Где я включил 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">
        ×
    </button>
    

Add Category

</div> <div class="modal-body"> <?php echo $this -> Form -> create('Stock'); ?>
<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>
<?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 += '';
            });
            $("#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');
                }
            }
        });
    });

The categories are saving but the modal is not getting close itself and I wanted Cakephp Model validation errors in that Jquery Modal only. Is this what I am writing is correct or if it is wrong please suggest me some solutions. The work is more appreciated.

0
nl ja de

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);
        }
    });
});
1
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda