ajaxを正常に注入した後、どのようにしてColorboxを起動できますか？

Question

私は、カラーボックスが外部HTMLを読み込むことができますが、それは参照されたページ全体だけを読み込むことがわかります。私はいくつかのログインとフォーム登録に必要なページの部分だけを注入し、プロセスが成功した場合にのみColorboxを起動したいと思います。

、私は次のようにスケッチしました...

$('.gateway').click(function(e) { 
    var _link = $(this); 
    var $error = $('<div id="error" />'); 
    var $modal = $('<div id="modal" />'); 

    var $url = _link.attr('href') + ' #gateway'; 
    // I only want to load #gateway from the target page 

    $modal.load($url, function (response, status, xhr) { 
    if (status == 'success') { 
     $('body').append($modal); 
     $modal.hide().colorbox({ 
     width:'60%', 
     inline:true, 
     href:'#gateway', 
     onLoad:function(){ $modal.show(); }, 
     onCleanup:function(){ 
      $modal.remove(); 
      $error.remove(); 
     } 
     }); 
    } 
    if (status == 'error') { 
     var $msg = 'Sorry, something went wrong: '; 
     $error.html($msg + xhr.status + ' ' + xhr.statusText); 
     // Do something with this message! 
    } 
    }); 

    e.preventDefault(); 
}); 

$modalは右#gateway内容の微注入されているが、カラーボックスには何もしません。私はここで私の出来事や方法を混乱させてしまったと感じます。私はColorboxメソッドを推測しています（それは正しい用語ですか？）は、クリックイベントだけに反応し、その後の成功したロードイベントには反応しません。

誰かが私の後ろのものを達成するために、私がColorイベントに応答したり、よりエレガントな方法を示すのを助けてくれたら、私は感謝します！

Answer 1

ColorBoxはjQueryのロードメソッドをajaxの機能として使用しているため、HTMLドキュメントからスニペットを取り出すことができます。代わりにあなたが投稿すべての、この試してみてください。

$('.gateway').colorbox({ 
    width:'60%', 
    href: function(){ return $(this).attr('href') + ' #gateway';} 
}); 

をAJAXリクエストが失敗した場合、カラーボックスはそう言って、メッセージングを提供します。カスタムエラー処理が必要な場合は、HTMLスニペットのajax/loadリクエストを作成し、DOMに追加してインラインプロパティを使用するのではなく、直接colorboxの 'html'プロパティに渡すことができます。