Question

我创建了一个bootstrap模式mngCat，它位于views / modals文件夹中，我想在两种情况下调用，当我想添加新类别或我想编辑现有类别时。

<div id="mngCat" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addNewLabel" aria-hidden="true">
    <div class="modal-header">
        <h3 id="addNewLabel"><?php echo empty($cat->category_id) ? 'Add category' : 'Edit category ' . $cat->category; ?></h3>
    </div><!-- end of .modal-header -->
    <div class="modal-body">
    <?php echo form_open('admin/category/manage') . PHP_EOL; ?>
        <p>
        <label for="category_name">Category name:</label>
    <input type="text" name="category_name" value="<?php echo set_value('category_name', $cat->category); ?>" />
        </p>
        <p>
        <label for="parent">Set Parent category:</label>
        <select>
        <option>-- None --</option>
        <?php if(count($all_categories)): foreach($all_categories as $cat): ?>
        <option value="<?php echo $cat->category_id; ?>"><?php echo $cat->category; ?></option>
        <?php endforeach; endif; ?>
        </select>
        </p>
        <?php echo form_close() . PHP_EOL; ?>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="submit">Ok</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div><!-- end of #mngCat modal -->

当我想添加一个类别时，我点击了这个ci锚

$attr = array(
    'class' => 'btn btn-primary',
    'data-toggle' => 'modal',
    'data-target' => '#mngCat'
    );
echo anchor('#mngCat','<i class="icon-plus icon-white"></i> Add Category', $attr);

当我想编辑一个类别时，我点击了这个：

<?php echo anchor('#mngCat' . $cat->category_id, $cat->category, $attr); //not passing any data  ?>

因此，当我单击添加类别时，模式显示标题为添加类别，但是当我单击类别名称（第二个锚点）时，不会出现模态。我想要做的是显示标题为“编辑”类别的模式，并在表单中显示类别数据，以便我可以进行编辑。

Answer 1

你必须了解一些事情：

bootstrap模式已经在视图中加载，或者已经加载了渲染 - 它只是隐藏（查看源，你会看到它）。
无论你多少点击它，你会做什么总是如此显示相同的数据
除非你这样做，否则无法通过链接将数据解析为bootstrap模式一些后期处理。

你需要做什么

在您的链接上使用jquery创建onclikc事件
添加data-category_id=$cat->category_id作为你的atribue（如果add add null）
触发事件后，创建模态

var category_modal = $('<div id="mngCat" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addNewLabel" aria-hidden="true"></div>');

通过ajax

将数据加载到模态体中

.post('somecontroler/getcatgoryform/',{category_id:$(this).data('category-id')}
          function(response){
           category_modal.html(response);
           category_modal.modal('show');

}

}

 <div class="modal-header"><h3 id="addNewLabel"><?php echo empty($cat->category_id) ? 'Add category' : 'Edit category ' . $cat->category; ?></h3></div><!-- end of .modal-header -->
<div class="modal-body">
<?php echo form_open('admin/category/manage') . PHP_EOL; ?>
    <p>
    <label for="category_name">Category name:</label>
<input type="text" name="category_name" value="<?php echo set_value('category_name', $cat->category); ?>" />
    </p>
    <p>
    <label for="parent">Set Parent category:</label>
    <select>
    <option>-- None --</option>
    <?php if(count($all_categories)): foreach($all_categories as $cat): ?>
    <option value="<?php echo $cat->category_id; ?>"><?php echo $cat->category; ?></option>
    <?php endforeach; endif; ?>
    </select>
    </p>
    <?php echo form_close() . PHP_EOL; ?>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" type="submit">Add</button>
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>

最后，如果不确定，谷歌load bootstrp modal via ajax

CodeIgniter和Bootstrap模式 - 传递数据

1 个答案: