Загрузите содержимое ajax внутри fancybox

Question

Работая над созданием ящика, я работаю над следующим кодом, и он отлично работает, я хочу добавить к нему 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(); 
    } 
    }); 
}); 

но делает seesm работать, он загружает FancyBox и новую страницу также и fancybox дает ошибку 404. объект передается URL-адресу. я немного запутался здесь

Answer 1

Вы должны сделать это наоборот: вызов Ajax, а затем отобразить ответ в FancyBox внутри success установки, как:

$(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(), но это необязательно. В большинстве случаев (в зависимости от типа Аякса ответа) вы могли бы передать ответ в качестве первого параметра в методе FancyBox как:

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