Question

我已经搜索了一段时间，但我无法弄清楚如何让它工作。我是jQuery / AJAX和Bootstrap的新手，我希望这不容易......

我在循环中有这个按钮

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#info" data-added="<?php if( strtotime($ecp_code->added) > strtotime('2000-01-01 01:00:00') ) { echo date('d.m.y H:i', strtotime($ecp_code->added)); } else { echo "-";} ?>" data-modified="<?php if( strtotime($ecp_code->changed) > strtotime('2000-01-01 01:00:00') ) { echo date('d.m.y H:i', strtotime($ecp_code->changed)); } else { echo "-";} ?>"><i class="fa fa-info" style="width:14px;"></i></button>

那是模态

<div class="modal fade" id="info" tabindex="-1" role="dialog" aria-labelledby="infoLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                Informations
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                Added: PLACEHOLDER
                Modified: PLACEHOLDER2
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>        
            </div>
        </div>
    </div>
</div>

剧本：

<script>
    $(document).ready(function () {
        $('#info').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var added = button.data('added');
            var modified = button.data('modified');

            var content = 'Added: ' + added + ' Modified: ' + modified + '';

            var modal = $(this);
            modal.find('.modal-body').text(content);
        });
    });
</script>

工作正常。它取代了模态体中的全部内容。

但现在我想要只替换一个单词。添加了var的PLACEHOLDER和修改了var的PLACEHOLDER2。（这只是一个例子）

<script>
    $(document).ready(function () {
        $('#info').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var added = button.data('added');
            var modified = button.data('modified');
            var modal = $(this);
            var res = replace("PLACEHOLDER", (added));
            modal.find('.modal-body').text(res);
        });
    });
</script>

这样的事情无效。

还有一个问题：你知道我可以提供jQuery和AJAX的好资源吗？

Answer 1

在模态体中插入两个新元素

<div class="modal-body">
    <label>Added:</label>
    <div id="Added"></div>
    <label>Modified:</label>    
    <div id="Modified"></div>
</div>

modal.find('.modal-body #Added').text(your content added);

和

modal.find('.modal-body #Modified').text(your content modified);

如果要添加到这些div的内容包含html标记，则可以更好地使用.html()代替.text()

Bootstrap模态替换占位符

1 个答案: