Question

我想使用ajax加载模式，这是我的代码：

jQuery(document).ready(function() {
jQuery("a").click(function() {
var Id = jQuery(this).attr("id");
        jQuery.ajax({
        type: 'POST',
        data: {
            'modal_id' : Id,
        },

        url : "ajax.php",
        success: function(reponse) {
            if(reponse) {
                alert(reponse);
            } else {
                alert('Error');
            }
        }
         });
});
});

这是{a}标签：

<a id="2" data-original-title="Preview" data-placement="top" class="data-tooltip" rel="tooltip" data-toggle="modal" href="#modal_2"><span class="btn btn-default btn-sm glyphicon glyphicon-new-window"></span></a>

ajax.php：

echo "<div class='modal fade' id='modal_".$_POST['modal_id']."'>
        <div class='modal-dialog'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
                    <h4 class='modal-title'>Preview</h4>
                </div>
                <div class='modal-body'>";

                echo "</div>
            </div>
        </div>
    </div>";

如何通过ajax显示模态以及为什么我的代码不起作用？感谢。

Answer 1

试

<a id="2" data-original-title="Preview" data-placement="top" class="data-tooltip" rel="tooltip" data-toggle="modal" href="#modal_2"><span class="btn btn-default btn-sm glyphicon glyphicon-new-window">gdfgdf</span></a>
<div id="alert"></div>
<script>$(document).ready(function() {
$("a").click(function() {
var Id = $(this).attr("id");
        $.ajax({
        type: 'POST',
        data: {
            'modal_id' : Id,
        },
    url : "db_search.php",
        success: function(data) {
             $('#alert').html(data); $('#alert').show();
        }
         });
});
$('#2').trigger('click');
});
</script>

Answer 2

您忘记将模态框的内容附加到文档正文并实际打开框。

$(document).ready(function() {
    $("a").click(function() {
        var Id = jQuery(this).attr("id");
        $.ajax({
            type: 'POST',
            data: {
                'modal_id' : Id,
            },
            url : "ajax.php",
            success: function(response) {
                if(response) {
                    $('body').append(response);
                    $('#modal_'+Id).modal('show');
                    $(document).on('hidden.bs.modal', modal_id, function (event) {
                        $(this).remove();
                    });
                } else {
                    alert('Error');
                }
            }
        });
    });
});

通过ajax加载一个bootstrap模式 - PHP

2 个答案: