Question

处理jquery的东西，我正在处理以下代码，它工作得很好，我想添加一个fancybox，我的意思是，而不是在同一页面打开，我希望内容加载到fancybox：

这是我的代码：

$(document).on('click','#table td a', function(e) {
            var hcall = e.currentTarget.toString();
            var cURL = hcall;
            ax();
            $.ajax({
                    url: 'mypage.php?u='+encodeURIComponent(cURL),
                    crossDomain : true,
                    cache: false,
                    beforeSend: function(xhr) {xhr.setRequestHeader("Access-Control-Allow-Origin","*");},
                    success: function(data){
                        cx();
                        $('#table').html(data);
                    }
                });
                e.preventDefault();
});

使用fancybox我正在尝试这样：

$(document).on('click','#table td a', function(e) {
                var hcall = e.currentTarget.toString();
                var cURL = hcall;
                ax();
                $.fancybox({
            'width':800,
            'height':650,
            'type':'iframe',
            'autoScale':'true',
            openEffect: 'elastic',
            closeEffect: 'elastic',
            aftershow: function() {
                $.ajax({
                        url: 'mypage.php?u='+encodeURIComponent(cURL),
                        crossDomain : true,
                        cache: false,
                        beforeSend: function(xhr) {xhr.setRequestHeader("Access-Control-Allow-Origin","*");},
                        success: function(data){
                            cx();
                            $('#table').html(data);
                        }
                    });
                    e.preventDefault();
     }
    });
});

但它确实可以工作，它也会加载fancybox和新页面而fancybox会出现404错误。一个对象被传递给url。我在这里有点困惑

Answer 1

你必须反过来这样做：首先调用Ajax然后在success设置中的fancybox中显示响应，如：

$(document).on('click', '#table td a', function (e) {
    e.preventDefault();
    var hcall = e.currentTarget.toString();
    var cURL = hcall;
    ax();
    $.ajax({
        url: 'mypage.php?u=' + encodeURIComponent(cURL),
        crossDomain: true,
        cache: false,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
        },
        success: function (data) {
            cx();
            // create a new HTML element and place response on it
            var _content = $('<div />', {
                id: "newId"
            }).html(data);
            $.fancybox({
                content: _content, // this is where you display ajax result
                // other API options
                width: 800,
                height: 650,
                // type: 'iframe', // you don't need this, is AJAX remember?
                autoScale: 'true',
                openEffect: 'elastic',
                closeEffect: 'elastic'
            }); // fancybox
        }
    }); // ajax
});

注意我们正在创建一个新的HTML元素，并使用.html()方法将响应添加到其中，但不一定非必要。在大多数情况下（取决于ajax 响应的类型 ），您可以将响应作为fancybox方法中的第一个参数传递，如：

$.ajax({
    // Ajax params
    success: function (data) {
        cx();
        $.fancybox(data, {
            // API options
        });
    }
}); // ajax

在fancybox中加载ajax内容

1 个答案: